How to set default value of an <index data-role="dropdownlist"/>?

[Sayer]

I have my html input element designated as a dropdownlist in code below. I have my list of items specified in 'data-source=' where my list of items is an array of string options, which is added to based on what the users picklist values are (dynamically filled picklist). However, I can't seem to get the default value to work. Specifying 'data-option-select' works, and sets the default, however, when I specify that the picklist is required, it doesn't recognize the 'data-option-select' as an actual selection and thinks I still need to select something. If the picklist is not required, it picks up the 'data-option-select' just fine as an option and saves that without me having to go select anything. 

 

How can I specify this dropdownlist as required and set the default value? (I can't really do it in javascript as these picklists are dynamically created. I have no idea how many there are or necessarily what their names will be, so looking for a way to specify selected default in the html markup).

 

Also, I have tried 'data-select' but I get unexpected identifier (the value was a string with multiple words and white spaces). I tried setting data-select to an integer, but that got some 'charAt(0) is not a function' error. I even tried it with setting data-primitive-value="true" but that didn't do anything.

 

'<input id="'+fieldMap[i].fieldName+'Input" data-role="dropdownlist" data-bind="value:'+fieldMap[i].fieldName.toLowerCase()+'" data-option-label="'+fieldMap[i].defaultPicklist+'" data-option-select="'+fieldMap[i].defaultPicklist+'" required data-required-msg="Please Select Valid '+fieldMap[i].fieldLabel+'" data-source="[\'None\'';

[Joana]

Hello Sayer,

I am not able to fully understand the scenario you have described.  You have bound the value of the , so I think the best approach is to assign a default value to it. Here is a dummy sample: DOJO where I create dynamically 3 dropdowns and then set the corresponding values. Note that in the sample the default values are hard-coded but you should be able to combine fieldMap[i].fieldName and fieldMap[i].defaultPickelist and use it the same way.

I am looking forward to your reply if this did the trick. If not, you could update the dojo sample and send it back to me to review the case.

Regards,
Joana
Telerik by Progress

[Sayer]

Thank you for the reply. Ultimately, that is what I am trying to do is what you have in your dojo. I have tried:

if(fieldMap[i].fieldType == 'PICKLIST' || fieldMap[i].fieldType == 'TEXTAREA' || fieldMap[i].fieldType == 'STRING' || fieldMap[i].fieldType == 'PHONE'){
    $('#editor_template').append(extraString);
   var fldName = fieldMap[i].fieldName+'Input';
   var dfltPicklist = fieldMap[i].defaultPicklist;
   if(fieldMap[i].fieldTpe == 'PICKLIST'){
       kendo.bind($('#'+fieldMap[i].fieldName+'Container'), {fldName: dfltPicklist});
   }
}

 

which is where I am appending the <input> that is the dropdownlist to the editor template. There is no wrapper really (other than a data-container for each individual component), but they are appended to a template. The above is not working though. I tried doing kendo.bind() on the container and the 'editor_template' without luck. 

[Joana]

Hello Sayer,

The only thing I could suggest at this point is to make sure fieldMap[i].fieldName+'Input' actually mapped to the value.  You could try binding to the document.body. However, I'll need a sample in order to investigate the issue further. You could send it in a separate support thread if you don't like it to be public.

You might find useful these articles:

• explaining the source binding - http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/source
• custom binding - http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom

Regards,
Joana
Telerik by Progress