Refresh Telerik Combobox list from another combobox

Question

we are implementing an MVC solution using Telerik controls and we have some problems refreshing the list of a Telerik ComboBox. Pratically we need to refresh the list of available values of a ComboBox every time the value selected in another ComboBox is changed. Below is our scenario:

Main ComboBox has a list of string values and we added an event;
Detail ComboBox has a list of values that depends on what is chosed from Main ComboBox;
When the event on Main ComboBox is fired the javascript calls an action in Controller;
The controller refresh the content of List02 (the datasource binded in ComboBox02)

Actually it runs all correctly but the Detail ComboBox does not refresh. What is wrong or missed?

Many Thanks for help

Main ComboBox:

<%=Html.Kendo().DropDownListFor(ourModel => ourModel.ModelPK)
    .HtmlAttributes(new { @class="textboxDetails" })
    .Name("combo01")
    .BindTo((IEnumerable<ModelObject>)ViewData["List01"])
    .DataTextField("descriptionText")
    .DataValueField("valueID")
    .Value(ourModel.ModelPK.ToString())
    .Events(e =>
                {
                    e.Select("onSelect");
                })
%>

Detail Combobox:

<%=Html.Kendo().DropDownListFor(ourModel => ourModel.secPK)
    .HtmlAttributes(new { @class="textboxDetails" })
    .Name("combo02")
    .BindTo((IEnumerable<ModelObject>)ViewData["List02"])
    .DataTextField("descriptionText")
    .DataValueField("valueID")
    .Value(ourModel.Model02PK.ToString())
%>

Javascript on aspx page:

function onSelect(e) {
    var dataItem = this.dataItem(e.item);
    var itemPK = dataItem.valueID;

    $.ajax({
        type: 'POST',
        url: '/controller01/action01',
        data: "{'sentPK':'" + sentPK + "'}",
        contentType: 'application/json; charset=utf-8',

        success: function (result) {

        },
        error: function (err, result) {
            alert("Error" + err.responseText);
        }

    });

}

Controller action:

[AcceptVerbs(HttpVerbs.Post)]
public void action01(model01 editModel, int sentPK)
{
    //View data loads correctly
}

I think you will have to update/refresh the datasource for second combo box in success of onSelect method. — SBirthare, Jun 24 '15 at 08:49
Have you looked at this: http://demos.telerik.com/kendo-ui/combobox/cascadingcombobox as this appears to be what you are trying to do. If you need an expanded solution I am happy to add an answer for you. — David Shorthose, Jun 24 '15 at 09:29

SBirthare · Answer 1 · 2015-06-24T09:02:01.010

I do not think updating second combobox with ViewData will work in scenario:

.BindTo((IEnumerable)ViewData["List01"])

For the very first time when the page is rendered the value stored in ViewData object is used to fill the combobox but then onSelect all you are doing is, making an AJAX call to server. Server updates the ViewData object but as the combo box is already loaded with initial data, it will not be refreshed with new data.

You will have to refresh the second combobox on selection change event for first combo box. Option 1:

Add following lines in your onSelect() success:

var combobox = $("#combo02").data("kendoComboBox");
combobox.dataSource.data(result);

Option 2:

Bind datasource of second combobox with server:

    @(Html.Kendo().ComboBox()
          .Name("products")
          .HtmlAttributes(new { style = "width:300px" })
          .Placeholder("Select product...")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .Filter(FilterType.Contains)
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeProducts", "ComboBox")
                      .Data("filterProducts");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("categories")
    )

For a working example, refer this link.

@David: Thanks!.. I take a look at the sample but it requires too many modification to our code. — ArDevTeam, Jun 24 '15 at 14:33
@Birthare: The first option sound better.. actually I tried to paste the code but I receive the error "Cannot read property 'dataSource' of undefined".. Field names are correct. — ArDevTeam, Jun 24 '15 at 14:38
Search the error message on kendo website. It's related to, the syntax is not correct for getting kendo control. Kendo has different ways for different controls. — SBirthare, Jun 24 '15 at 15:13

Refresh Telerik Combobox list from another combobox

1 Answers1