Forms Designer Forum

Does anyone see the problem with the code below? The drop down looks right but it doesn't appear to be binding and updating.
In the HTML field I'm using:
***********************
<asp:HiddenField runat="server" ID="{{FieldName}}Field" Value="{@{{FieldName}}}" __designer:bind="{{DataBinding}}" />
<select>
<option value="Backlog">Backlog</option>
<option value="Contracting">Contracting</option>
<option value="Invoicing/AR">Invoicing/AR</option>
<option value="Miscellaneous">Miscellaneous</option>
<option value="Month-End/Revenue Adjustment" selected="true">Month-End/Revenue Adjustment</option>
<option value="Project Status">Project Status</option>
<option value="Scope Changes">Scope Changes</option>
</select>
<div></div>
**********************
In the JavaScript field I'm using:
***************************
$('head').append('<link rel="stylesheet" href="https://static.spform.com/fd/css/kendo.common.min.css" type="text/css" />');
$('head').append('<link rel="stylesheet" href="https://static.spform.com/fd/css/kendo. ... 65.min.css" type="text/css" />');


var hidden = fd.field(fieldName).control()._el().find('>input');
var editor = fd.field(fieldName).control()._el().find('>select');

//updates hidden field that stores the actual data
function updateText(){
hidden.val(editor.data("kendoEditor").value());
}

//detects changes to the input
function onChange(e) {
updateText();
}
function onPaste(e) {
updateText();
}

//initializes kendo editor
SP.SOD.executeFunc('plumsail.fd.kendo.js', 'kendo', function() {
var text = hidden.val();
//only use decoded if you plan to store the value in Plain text
var decoded = $('<selected/>').options[element.selectedIndex].text();
editor.kendoEditor({
change: onChange,
paste: onPaste,
value: decoded
});
});

Dear David,
Can you, please, tell us what you try to achieve? Do you want to use Kendo DropDownList instead of default dropdown field? Or do you want to change something else about the dropdown? The more details we get - the easier it would be to assist for us!

I have an ECT list and all of the fields come in as a single line of text. I would like to have a custom template that will display a drop down list field instead of the single line of text. This would help me standardize input. I would like to do this on both the new and edit forms. Thank you for your help.

Cheers

@davidnarramore: did you find a working solution for this setting? We also want to change the Input-Form for a external list and change the textfields to other controls (e.g. Checkboxes, dropdowns filled by other lists in sharepoint site, rich-text-editor, ....).

ECT seems to be bit harder to customize. Also you cant use the cross-site-lookup on fields inside the external list or in lists, using a column pointing to the ect....

If custom templates do not work for some reason, as an alternative, you can simply hide Text fields on the form, and then use HTML controls to create dropdowns or other types of input, bind events to them with JavaScript and simply save all the input inside the hidden SharePoint fields. This should definitely work. Hope this helps!

ragesoft wrote: ↑

11 Jun 2018

@davidnarramore: did you find a working solution for this setting? We also want to change the Input-Form for a external list and change the textfields to other controls (e.g. Checkboxes, dropdowns filled by other lists in sharepoint site, rich-text-editor, ....).

ECT seems to be bit harder to customize. Also you cant use the cross-site-lookup on fields inside the external list or in lists, using a column pointing to the ect....

On the form click the field you wish to use. Under the Options heading choose the Template option "Custom" Then you can modify the HTML to something like this for a drop down list.
<asp:HiddenField runat="server" ID="{{FieldName}}Field" Value="{@{{FieldName}}}" __designer:bind="{{DataBinding}}" />
<select name="revadj" id="revadj">
<option value="Write-up">Write-up</option>
<option value="Write-off">Write-off</option>
<option value="None" selected="true">None</option>
</select>

Then under the JavaScript option modify like this:
var hidden = fd.field(fieldName).control()._el().find('>input');
var comtypeopt = document.getElementById('revadj');
var hidtextval = hidden.val();
var selectedval

$('#newcommenttype').change(function(){
hidden.val($(this).val()).change();
});

//sets selected index on dropdown
function selectItemByValue(elmnt, value){
for(var i=0; i < elmnt.options.length; i++)
{
if(elmnt.options.value == value)
elmnt.selectedIndex = i;
selectedval = elmnt.options.value;
}
}

// sets drop down to comment type
selectItemByValue(comtypeopt,hidtextval);
// The line below is only needed for the New Form
hidden.val(selectedval).change();

I hope it helps.

David