Setting initial value in a Kendo UI Cascading Combobox with server filtering

8 posts, 0 answers
  1. Phillipe
    Phillipe avatar
    3 posts
    Member since:
    Aug 2013

    Posted 24 Sep 2013 Link to this post

    I need to make a cascading combobox with server filtering but I'm having trouble setting the initial value.The dropdownlist on which the combobox depends looks like this:

    1.@(Html.Kendo().DropDownListFor(model => model.SelectedCompany)
    2.    .Name("UserDetailSelectedCompany")
    3.    .HtmlAttributes(new { style = "width:115px;" })
    4.    .BindTo(Model.CompanyList)
    5.    .Value(Model.SelectedCompany))
    • model.SelectedCompany is a string
    • Name attribute is set because I need that in the combobox (I've read on the Kendo UI forums I'm not supposed to specify it, but I don't know how to do the cascading combobox without it)
    • Model.CompanyList is a List<string>
    And here's the combobox:

    01.@(Html.Kendo().ComboBoxFor(model => model.SelectedDealer)
    02.    .Name("UserDetailSelectedDealer")
    03.    .DataTextField("Name")
    04.    .DataValueField("ID")
    05.    .HtmlAttributes(new { style = "width:325px" })
    06.    .Filter(FilterType.Contains)
    07.    .AutoBind(false)
    08.    .Enable(false)
    09.    .MinLength(3)
    10.    .DataSource(source => source.Read(read => read.Action("GetDealers", "Administration").Data("Administration.GetUserDealerParameters"))
    11.                                .ServerFiltering(true))
    12.    .CascadeFrom("UserDetailSelectedCompany")
    13.    .SelectedIndex(Model.SelectedDealer.ID))
    • model.SelectedDealer is a Dealer
    • Dealer class contains a Name(string) and an ID (int)
    • MVC action GetDealers return a JSON converted List<Dealer>
    Does anyone have an example that demonstrate how I can get this to work? The Kendo UI doc has example for a cascading combobox, server filtering and setting initial value, but not for the 3 at same time.
  2. Daniel
    Daniel avatar
    2110 posts

    Posted 26 Sep 2013 Link to this post

    Hello Phillipe,

    The name should not be changed because the value will not be correctly bound. You should remove the Name method and either assign the needed ID with the HtmlAttributes method:

    @(Html.Kendo().DropDownListFor(model => model.SelectedCompany)   
        .HtmlAttributes(new { style = "width:115px;", id="UserDetailSelectedCompany" })
    or use the field name for the CascadeFrom value.
     To set initial value from the model you should bind the combobox to the field that is used for which from the code that you provided seems to be SelectedDealer.ID and not SelectedDealer:
    @(Html.Kendo().ComboBoxFor(model => model.SelectedDealer.ID)
        .HtmlAttributes(new { style = "width:325px", id="UserDetailSelectedDealer" })
        .DataSource(source => source.Read(read => read.Action("GetDealers", "Administration").Data("Administration.GetUserDealerParameters"))
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET AJAX banner
  4. Phillipe
    Phillipe avatar
    3 posts
    Member since:
    Aug 2013

    Posted 26 Sep 2013 Link to this post

    Changed the code for that:
    01.@(Html.Kendo().DropDownListFor(model => model.SelectedCompany)
    02.      .HtmlAttributes(new { style = "width:115px;", id = Html.IdFor(model => model.SelectedCompany).ToString() })
    03.      .BindTo(Model.CompanyList)
    04.      .Value(Model.SelectedCompany))
    05.@(Html.Kendo().ComboBoxFor(model => model.SelectedDealer)
    06.      .DataTextField("Name")
    07.      .DataValueField("ID")
    08.      .HtmlAttributes(new { style = "width:325px", id = Html.IdFor(model => model.SelectedDealer).ToString() })
    09.      .Filter(FilterType.Contains)
    10.      .AutoBind(false)
    11.      .Enable(false)
    12.      .MinLength(3)
    13.      .DataSource(source => source.Read(read => read.Action("GetDealers", "Administration")
    14.          .Data(string.Format("UserDetail.GetUserDealerParameters('{0}', '{1}')",
    15.              Html.IdFor(model => model.SelectedCompany),
    16.              Html.IdFor(model => model.SelectedDealer))))
    17.          .ServerFiltering(true))
    18.      .CascadeFrom(Html.IdFor(model => model.SelectedCompany).ToString())
    19.      .SelectedIndex(Model.SelectedDealer.ID))
    Unfortunately, I get a Javascript error when I try to access the ComboBox value. The Javascript function looks like this (note that both ids are correctly received by the function):
    1.GetUserDealerParameters: function (idSelectedCompany, idSelectedDealer) {
    2.    return {
    3.        company: $("#" + idSelectedCompany).val(),
    4.        dealerFilter: $("#" + idSelectedDealer).data("kendoComboBox").input.val()
    5.    };
    Precisely, the following is not defined:
    1.$("#" + idSelectedDealer).data("kendoComboBox")
    So, when I try this, it fails:
    1.$("#" + idSelectedDealer).data("kendoComboBox").input.val()
    Any idea?

    Thanks in advance for your help. It is much appreciated!
  5. Daniel
    Daniel avatar
    2110 posts

    Posted 30 Sep 2013 Link to this post

    Hello again,

    You should pass a function reference instead of executing a function:

    .Data("function(){" +
        "return " + string.Format("UserDetail.GetUserDealerParameters('{0}', '{1}')",
                  Html.IdFor(model => model.SelectedCompany),
                  Html.IdFor(model => model.SelectedDealer)) + ";" + 
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Phillipe
    Phillipe avatar
    3 posts
    Member since:
    Aug 2013

    Posted 10 Oct 2013 Link to this post

    That fixed the javascript error I was getting. Thanks!

    But I'm still not able to make it behave like I would like.

    The only way I am able to set the initial value, is like this (line 12):
    01.@(Html.Kendo().ComboBoxFor(m => m.SelectedItem.ID)
    02.      .DataValueField("ID")
    03.      .DataTextField("Name")
    04.      .HtmlAttributes(new { id = Html.IdFor(m => m.SelectedItem.ID).ToString() })
    05.      .AutoBind(false)
    06.      .Filter(FilterType.Contains)
    07.      .MinLength(3)
    08.      .DataSource(source => source.Read(read => read.Action("GetItemList", "Home")
    09.          .Data("function() { return GetUserData(); }"))
    10.          .ServerFiltering(true))
    11.      .CascadeFrom(Html.IdFor(m => m.SelectedGroup).ToString())
    12.      .Value(Model.SelectedItem.Name))
    This is a bit off a problem, because 2 items could have same name part, but different IDs (lets say {1, apple}, {2, pineapple}

    Secondly, I didn't find a way to make the ComboBox preserve it's selected value on post back. Here's what happens:

    1. First page get, view is generated with initial value, ComboBox value -> "apple", that's OK
    2. Ajax call to get item list, item filter received server side -> "apple" (this is what I'm expecting, but could be a problem as previously mentioned)
    3. Item list returned and is displayed in ComboBox, that's OK
    4. Click on send, model binding work the way it should, view is returned, that's OK
    5. Ajax call to get item list, item filter received server side -> "1" and this is wrong. The server side method expects a string contained in items name
    6. No items returned (no name contains "1", ComboBox gets emptied
    So my questions are:
    • Am I setting the initial value the right way?
    • What do I need to do to preserve the ComboBox value on post back

    I join a zip file containing a solution in which you can debug the behaviour I'm talking about (breakpoint in HomeController, GetItemList method)

    As always, your help is greatly appreciated!

    Thanks in advance!
  7. Daniel
    Daniel avatar
    2110 posts

    Posted 14 Oct 2013 Link to this post


    I posted my reply in the support ticket. For convenience I am pasting it below and I attached the updated project.

    The text should not be set as the combobox value. The value will automatically be populated from the model based on the dataValueField. You should use the text option instead to show the text initially when the initial binding is prevented. Currently, it seems that the text is not set to the input during the initial request when the master widget is using local data so for now, I can suggest to get the text from the combobox options during the initial request. I attached the project with the needed modifications added. We will look into this issue and we will fix it for one of the next internal builds.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Chris
    Chris avatar
    20 posts
    Member since:
    Nov 2013

    Posted 25 Sep 2014 Link to this post


    I'm trying to create a cascading drop down list where the child (Order) is still enabled when the parent (Customer) has not been selected, as non selection means All Customers. i.e. the parent is the filter, so when its set to a particular value, the child shows the Orders that belong to that Customer, but when its not selected, the child should show all Orders.

    I have tried setting AutoBind to true, but that doesn't seem to help.

    Is this possible?



        .DataSource(source =>
            source.Read(read =>
                read.Action("OrderList", "List")
        .OptionLabel("Please Select")

    function filterOrders() {
        return {
            customerID: $("#Customer").val()
  9. Daniel
    Daniel avatar
    2110 posts

    Posted 29 Sep 2014 Link to this post

    Hello Chris,

    This is not supported out of the box but it is possible to implement it by using the parent dropdownlist cascade event e.g.
    function onCascade(e) {               
        if (!this.value()) {
            var childDropDownList = $("#Order").data("kendoDropDownList");
  "dataBound", function () {


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top
UI for ASP.NET AJAX banner