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

BindTo SelectList then AJAX to repopulate

1 Answer 89 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 03 Mar 2014, 03:23 PM
I have the following RAZOR code:

            @(Html.Kendo().DropDownListFor(m => m.AssociatedWithType)
            
                .Events(x => x.Select("AssociatedWithSelected"))
                .Value(ViewBag.AssociatedWithTypesId)                
                .BindTo(ViewBag.AssociatedWithTypesSelectList)
            )

            @(Html.Kendo().DropDownListFor(m => m.AssociatedWithId)
                .BindTo(ViewBag.AssociatedWithIdsSelectList)
            )

and the following jQuery:

        AssociatedWithSelected: function(e) {
            var dataItem = this.dataItem(e.item.index());

            var associatedWithIdsDropDown = $("#todoAddEditDialogForm #AssociatedWithId").data("kendoDropDownList");
            var url = settings.getAssociatedWithIdsUrl + "?associatedWithType=" + dataItem.Text;
            associatedWithIdsDropDown.dataSource.read({
                url: url
            });
        }


What I would like to do is initially bind the 2nd dropdownlist to the SelectList in my ViewBag, then bind it from the server if the first dropdown changes value.

The initial BindTo is working fine, but the jQuery .dataSource.read isn't doing anything.  I suspect I need to attach a dataSource to the dropdown in the jQuery somehow, but I'm not sure how.

How do I accomplish this?

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 05 Mar 2014, 11:44 AM
Hello Scott,

You should set a new dataSource configured for remote binding with the setDataSource method in order to achieve this e.g.
AssociatedWithSelected: function(e) {
    var dataItem = this.dataItem(e.item.index());
 
    var associatedWithIdsDropDown = $("#todoAddEditDialogForm #AssociatedWithId").data("kendoDropDownList");
    var url = settings.getAssociatedWithIdsUrl + "?associatedWithType=" + dataItem.Text;
    var remoteDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: url
            }
        }
    });
    associatedWithIdsDropDown.setDataSource(remoteDataSource);
}



Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
DropDownList
Asked by
Scott
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or