How do you set the value of a dropdownlist after reading external data?

[Todd]

 $("#PrimaryDisabilityList").kendoDropDownList({
                index: 0,
                dataTextField: "Text",
                dataValueField: "Id",
                change: PrimaryDisabilityListChange,
                dataSource: {
                    type: "json",                 
                    severFiltering: false,
                    serverPaging: false,
                    change:PrimaryDisabilityListLoaded,
                    transport: {
                        read: "@Url.Content("~/FormData/DisabilityCategories")"
                    }
                }
            });  
 
            
            /*set the values that were loaded*/
            function PrimaryDisabilityListLoaded(){
            var dropdownlist = $("#PrimaryDisabilityList").data("kendoDropDownList");
            var hiddenField = $("#PrimaryDisabilityId");
            var value = hiddenField.val();
            dropdownlist.value(value);
            //Why is this not working? It works when I call if from an event on the page, but not the change event.
            //If I can't use this on the change event for the data source, how should I set the value?
            };

[Georgi Krustev]

Hello Todd,

 
It is possible to change the value of the dropdownlist when change event is raised. Check this jsFiddle demo. Modify it if I am missing something.

Kind regards,
Georgi Krustev
the Telerik team

[Todd]

Thanks for the response. I was trying to modify the value after the data has been loaded, not after the change event.

[Gary]

The approach used in the jsFiddle prevents the user from being able to choose a different dropdown value.

I have the same problem. as the initial poster. I need to set the initial value. It seems that calling the value method does not work if that dataSource hasn't had time to bind yet. I also tried setting the value in the dataSource.change event handler with no success.

[Gary]

Hi -- I just wanted to follow up on this to make sure it has been seen. I wasn't sure since I'm replying to a post that already has a response marked as answered. If I don't hear anything, I'll write it up in a new post.

Thanks,
Gary

[Todd]

Gary, I never got an answer to this. I ended up loading the select items during the page response. Then I set the default value in the document.ready. I was never able to load the items via ajax and then set a value.

[Georgi Krustev]

Hi,

 
You can set the intial value to the input element. Check this jsFiddle demo.

Kind regards,
Georgi Krustev
the Telerik team

[Gary]

Ahh... so simple and elegant. Thank you, Georgi. This is the correct answer to the question.

[Brian Roth]

I'm having trouble doing this with autoBind: false on my DropDownList.  I have the dropdown on a hidden window and want to bind it when the window is open.  The on-demand binding works fine, but I can't set the initial value on the DropDownList with the methods suggested in this thread.  Any ideas what I might be doing wrong?  I can get it to work if I set autoBind: true, but my preference is to only load the data when the user needs it.

[Georgi Krustev]

Hello Brian,

 
I was not able to replicate the depicted issue. Check the updated jsFiddle demo.

All the best,
Georgi Krustev
the Telerik team

[Brian Roth]

Hi Georgi,

Thanks for getting back to me.  I think my example is a little different than the demo you posted.  I'm firing off a call to bind the dropdown list to the datasource when the button to activate my KendoUI window is activated.  In this situation, it doesn't set the current value for me - it ends up just showing the option label.  I'm guessing there's something wrong with my process, but was hoping to get some help.  Here is the javascript code I have that sets up the window and dropdownlist:

$(document).ready(function () {

        var window = $('#instanceWindow');

        var dropdown = $('#instances'),

                instance = $('#instance')

                        .bind('click', function () {

                            dropdown.data('kendoDropDownList').dataSource.read();

                            window.data('kendoWindow').center();

                            window.data('kendoWindow').open();

                        });

  

        if (!window.data('kendoWindow')) {

            window.kendoWindow({

                visible: false,

                modal: true,

                title: 'My Title',

                width: '415px',

                draggable: true

            });

        }

  

        dropdown.val('MyValue').kendoDropDownList({

            autoBind: false,

            dataTextField: 'Text',

            dataValueField: 'Value',

            optionLabel: 'Select a Value',

            dataSource: {

                transport: {

                    read: {

                        url: '@Url.Action('LookupValues', 'Values', new { area = "" })',

                        dataType: 'json',

                        type: 'POST'

                    }

                }

            },

            close: function (e) {

                // Run some logic here

            }

        });

    });

Thanks for your help,
Brian

[Georgi Krustev]

Hello Brian,

 
I was not able to replicate the issue locally. Here is the updated jsFiddle demo. I will ask to send us a simple test project which replicates the problem in order to review it locally and advice you further.

All the best,
Georgi Krustev
the Telerik team

[Brian Roth]

Hi Georgi,

Thanks for the example.  I took a look and figured out what was different between what you did and what I'm trying to do.  I'm making a call to dataSource.read() on the DropDownList when the window is opened to populate the values.  I wanted to do this proactively rather than waiting for the user to click to open the dropdown.  It gets the list of data fine, it just doesn't seem to display the current value once the data has been retrieved.  Here's how I would modify your jsFiddle project to replicate what I'm seeing - it's just a line at the end to call read():

$(document).ready(function() {

    $("#window").kendoWindow({

        visible: false,

        modal: true,

        title: 'My Title',

        width: '415px',

        draggable: true

    });

 

    $("#window").data("kendoWindow").open();  

 

    $("#titles").val("ApOCQ").kendoDropDownList({

        dataTextField: "Name",

        dataValueField: "Id",

        autoBind: false,

        dataSource: {

            type: "odata",

            serverFiltering: true,

            filter: [{

                field: "Name",

                operator: "contains",

                value: "Star Wars"

            },{

                field: "BoxArt.SmallUrl",

                operator: "neq",

                value: null

            }],

            transport: {

                read: "http://odata.netflix.com/Catalog/Titles"

            }

        }

    });

     

    $("#titles").data('kendoDropDownList').dataSource.read();

});

Thanks again for helping with this.  I'm guessing there's something wrong with the way I'm making the call to bind the dropdown.

Regards,
Brian

[Georgi Krustev]

Hi,

You will need to use the value method in order to initiate data binding of the DropDownList and select the correct item:

$("#titles").data('kendoDropDownList').value("ApOCQ");

Check the updated jsFiddle demo.
  All the best,
Georgi Krustev
the Telerik team

[Prashant]

How can we set the value of the dropdownlist where we have the text and not the value.

Something like below:
$("#titles").data('kendoDropDownList').text("Star Wars"); 

[Surabhi]

I tried this and doesn't work:

 var url = "/lookup/GetDropDownListECFType";      
       $("#ECOType").kendoDropDownList({       
          dataTextField: "LookupText",          
       dataValueField: "LookupValue",   
                dataSource: {             
            transport: {          
               read: {               
              url: url,            
                 dataType: "json",     
                        severFiltering: false      
                   }                     }                 }             });

 $("#ECOType").data("kendoDropDownList").value(4); 

[David]

Someone correct me if I'm wrong, but it looks to me like it didn't work because you didn't put autobind: false. Without the autobind: false, it fires off the bind asynchronously and then your .value(4) is hit before the data is bound. Add the autobind: false and then when you call .value(4) THEN it will bind and set the value accordingly.

[Georgi Krustev]

Hello,

The DropDownList widget with autoBind: false will perform Ajax request when the one call value() method. Check the latest official release of Kendo UI. 

Kind regards,
Georgi Krustev
the Telerik team

[Jeff]

How can we select a value by index after reading from the external datasource?  I forked the demo here:

http://jsfiddle.net/xAwYf/2/ 

It is completely broken - what am I doing wrong?

[Georgi Krustev]

Hello Jeff,

 
The demo works fine on my end and if you need to select 4-th item (index: 3) after the DropDownList is bound then you need to use the index option. Check the updated jsFiddle demo. Also if you need to show text before binding you can use the text option.

Greetings,
Georgi Krustev
the Telerik team

[Jeff]

Well, this doesn't really work because it only selects by index once you expand the drop down.

I have some linked drop down boxes.  When the value of A changes, I want to refresh the datasource for B and automatically pick the second value in B.  I've got the datasource refresh working, but I cannot get the pick part working.  I've tried select(1), index = 1, etc.  nothing seems to work.  What's the secret?

[Robert]

Does any of these methods work if the drop down list is in a grid popup editor. No matter what I try I cannot get the default value to return unless I first change it.

[Klas]

I have the same issue.

My dilemma is this. I need to change the default values of my foreign key columns each time a user adds a new value so that next time he gets the last values as default values. Is there a smoother way of doing this otherwise? (I use MVC extensions btw).

[Jeff]

Never mind - figured it out.  I need to wait until the ajax call completes before setting the selected item.

[Grahame]

This may not work or be the correct solution for every issue here, but my issue was solved by using the DataBind event in the Kendo Dropdown control.

<script type="text/javascript">
   //Set the value using Javascript, ext...
    function selectDDDataBound() {
        this.value(getCookie('weekBatchSM'));
    }
</script>

@* I use Razor but this can be done without *@
@(Html.Kendo().DropDownList()
                      .Name("selectDDWeek")
                      .DataTextField("Name")
                      .DataValueField("Code")
                      .DataSource(source => {
                          source.Read(read =>
                          {
                              read.Action("GetDDWeeks", "ControlerNameHere");
                          });
                      })
                      .Events(ev => ev.DataBound("selectDDDataBound"))
                )

[Peggy]

Thanks Grahame, your databound solution worked for my issue!

[Grahame]

Good to hear! :)