This is a migrated thread and some comments may be shown as answers.

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

3 Answers 662 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Sayer
Top achievements
Rank 1
Sayer asked on 28 Apr 2017, 02:03 PM

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\'';     

3 Answers, 1 is accepted

Sort by
0
Joana
Telerik team
answered on 02 May 2017, 11:40 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sayer
Top achievements
Rank 1
answered on 02 May 2017, 02:09 PM

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. 

0
Joana
Telerik team
answered on 04 May 2017, 05:13 AM

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:

Regards,
Joana
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
Sayer
Top achievements
Rank 1
Answers by
Joana
Telerik team
Sayer
Top achievements
Rank 1
Share this question
or