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

4 posts, 0 answers
  1. Sayer
    Sayer avatar
    16 posts
    Member since:
    May 2016

    Posted 28 Apr 2017 Link to this post

    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\'';     
  2. Joana
    Admin
    Joana avatar
    205 posts

    Posted 02 May 2017 Link to this post

    Hello Sayer,

    I am not able to fully understand the scenario you have described.  You have bound the value of the dropwdownlist, 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.
  3. Sayer
    Sayer avatar
    16 posts
    Member since:
    May 2016

    Posted 02 May 2017 in reply to Joana Link to this post

    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. 

  4. Joana
    Admin
    Joana avatar
    205 posts

    Posted 04 May 2017 Link to this post

    Hello Sayer,

    The only thing I could suggest at this point is to make sure that fieldMap[i].fieldName+'Input'is 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.
Back to Top