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

[Phillipe]

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))

Where:

• 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))

Where:

• 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.

[Daniel]

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" })
    .BindTo(Model.CompanyList)
    .Value(Model.SelectedCompany)
)

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)
    .DataTextField("Name")
    .DataValueField("ID")
    .HtmlAttributes(new { style = "width:325px", id="UserDetailSelectedDealer" })
    .Filter(FilterType.Contains)
    .AutoBind(false)
    .Enable(false)
    .MinLength(3)
    .DataSource(source => source.Read(read => read.Action("GetDealers", "Administration").Data("Administration.GetUserDealerParameters"))
                                .ServerFiltering(true))
    .CascadeFrom("UserDetailSelectedCompany")
)

Regards,
Daniel
Telerik

[Phillipe]

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!

[Daniel]

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)) + ";" +
"}")

Regards,
Daniel
Telerik

[Phillipe]

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!

[Daniel]

Hello,

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.

Regards,
Daniel
Telerik

[Chris]

Hi,

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?

Thanks,

Chris

@(Html.Kendo().DropDownList()
    .Name("Order")
    .DataTextField("Text")
    .DataValueField("Value")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("OrderList", "List")
                .Data("filterOrders");
        })
        .ServerFiltering(true);
    })
    .OptionLabel("Please Select")
    .AutoBind(true)
    .CascadeFrom("Customer")
    .Enable(true)

Script
function filterOrders() {
    return {
        customerID: $("#Customer").val()
    };
}

[Daniel]

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");
        childDropDownList.one("dataBound", function () {
            this.enable();
        });
        childDropDownList.dataSource.read();
    }
}

Regards,
Daniel
Telerik