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

Rebind Dropdown list from sever datasource via javascript

1 Answer 587 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Logan
Top achievements
Rank 1
Veteran
Logan asked on 19 Mar 2014, 04:43 PM
I need to change the available options in a dropdownlist based on what i user has entered into a textbox on the same page.  My thought was to attache to the change event on that textbox and rebind/read the kendo dropdown list.

When the page first loads everything works as expected.

When the user changes the MaxSize textbox the rebindRooms function get called and processed completely, but the GetSize function never gets called and the no ajax requests get fired.

How to I force the dropdown to rebind from the server?

.cshtml
textbox
@Html.DisplayFor(m => m.MaxSize)

dropdownlist
@(Html.Kendo().DropDownListFor(m => m.SchedulePreference.DesiredRoomId)
                .DataTextField("Value").DataValueField("Key")
                .DataSource(ds => ds.Read(read => read.Action("RoomDropDown_Read", "Scheduling")
                                    .Data("GetSize"))
                                    .ServerFiltering(true)
                            )
                            )

.js
<script type="text/javascript">
    $(document).ready(function () {
        $('#MaxSize').change(rebindRooms);
    });
</script>

function rebindRooms(e) {
    var el = e.currentTarget.value;
    var ddl = $("#SchedulePreference_DesiredRoomId").data("kendoComboBox");
    if (ddl && ddl.dataSource) {
        ddl.dataSource.read();
    }
}

function GetSize() {
    var el = $('#MaxSize');
    var s = el ? el.val() : 0;
    return {
        size: s
    }
}


.cs
[NoCache]
public ActionResult RoomDropDown_Read(int size=0)
{
    var list = _uow.RoomRepository.GetAll().OrderBy(o => o.DropDownText).Where(w => w.MaxSize >= size).Select(s=>new KeyValuePair<int,string>(s.Id,s.DropDownText)).ToList();
 
    return Json(list, JsonRequestBehavior.AllowGet);
}

Thanks!
-Logan

1 Answer, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 20 Mar 2014, 11:21 AM
Hello Logan,

The code snippets look OK and the chosen approach to re-bind the widget is correct. I tried to simulate this in a Kendo UI Dojo demo, but the data callback was called every time the data source read method was called. I will suggest you verify that there are no JavaScript errors thrown when you call the data source's read method. If I am missing something, I will ask you to modify the demo (if possible) to replicate the problem. Thus I will be able to investigate the erroneous behavior locally.

Regards,
Georgi Krustev
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
Logan
Top achievements
Rank 1
Veteran
Answers by
Georgi Krustev
Telerik team
Share this question
or