CODEWITHSUNDEEP
javascriptajaxkendo-ui
Ben Jones
Ben Jones

Reputation: 2161

Setting index on kendo ui dropdownlist control after ajax

I am trying to set the index on my kendo-ui dropdownlist after the datasource is returned. I am able to do it with a checkbox (don't want to use) and I can do it on a dropdownlist where the datasource is local json. The last option (the one I want) is to set the selected value based on the datasource that returned from the transport.

So, why doesn't this work?

    $("#products-dropDownList-remote").kendoDropDownList({
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        autoBind: false,
        dataSource: {
            transport: {
                read: {
                    dataType: "jsonp",
                    url: "http://demos.telerik.com/kendo-ui/service/Products"
                }
            },
            requestEnd: function (e) {
                //is this how I set this after the request is successful? why doesn't it set it here?
                $("#products-dropDownList-remote").data('kendoDropDownList').select(1);
            }
        }
    });

    //this doesn't feel like it should work, but does according 
    //to this forum thread 
    //http://www.telerik.com/forums/how-do-you-set-the-value-of-a-dropdownlist-after-reading-external-data
    //it should....but it doesn't.
    $("#products-dropDownList-remote").data('kendoDropDownList').select(1);

Here is a jsFiddle with all 3 options - http://jsfiddle.net/bensjones/H47b3/

Any suggestions?

Upvotes: 0

Views: 3960

Answers (1)

Petur Subev
Petur Subev

Reputation: 20213

You should wait until the request has finished - a.k.a. use the dataBound event and also to perform initial binding you should set the AutoBind option to true.

$("#products-dropDownList-remote").data('kendoDropDownList').one("dataBound", function() { this.select(1) });;

Here is updated Fiddle.

Upvotes: 5

Related Questions