KendoUI - Cascading Dropdownlist when using MVVM and Remote Data

Question

I have a KendoUI dropdownlist which fetches data from a Web Service, depending on the selected item a 2nd dropdown is populated. I am using MVVM binding.

My code looks like:

<div id="ddlDiv">
    <div data-container-for="MEASURE" required class="k-input k-edit-field">
    <select id="MEASURE"
            name="MEASURE"
            data-role="dropdownlist" 
            data-text-field="FIELD_NAME" 
            data-value-field="FIELD_ID" 
            data-bind="value: summaryDef.MeasureID, source: fieldList"                                 
            ></select>                      
    </div>       

    <div data-container-for="OPERATION" required class="k-input k-edit-field">
    <select id="OPERATION"
            data-cascade-from: "MEASURE"
            data-role="dropdownlist" 
            data-text-field="TYPE" 
            data-value-field="OP_ID" 
            data-source=opListDS
            data-bind="value: summaryDef.OperationID"                 
            ></select>                      
    </div>               

 datasetMetaModel = kendo.observable({
    fieldList: datasetModel.FieldDTOList,
    summaryDef: datasetModel.SummaryDef
    });

kendo.bind($("#ddlDiv"), datasetMetaModel);

var opListDS = BuildOperationFields();
function BuildOperationFields() {
    opListDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: '@Url.Action("GetMeasureOperations", "Wizard")',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                serverFiltering: true,
                type: "GET"
            }
        }

    });

    return opListDS;        
}

Both lists have their data populated correctly initially and are correctly bound to the model. However changing the value of the first dropdown does not cause the 2nd dropdown to have it's data refreshed. The call to the web service is never triggered.

I've seen a similar situation here that uses local data:

MVVM binding for cascading DropDownList

Answer 1

I don't know if this is still an issue for you as it's been a while since the question was asked but I thought I would answer as I had a similar problem myself today and managed to solve it with a workaround.

What I did was to bind a handler to the onChange event of the parent combo box and in that manually call read() on the data source of the child combo box:

e.g.

HTML:

<div id="content-wrapper">
    <div class="editor-row">
         <div class="editor-label"><label>Country:</label></div>
         <div class="editor-field">
            <select id="Country" name="Country" data-role="combobox"
                    data-text-field="CountryName"
                    data-value-field="CountryId"
                    data-filter="contains"
                    data-suggest="false"
                    required
                    data-required-msg="country required"
                    data-placeholder="Select country..."
                    data-bind="source: dataSourceCountries, value: country, events: { change: refreshCounties }">
            </select>
            <span class="field-validation-valid" data-valmsg-for="Country" data-valmsg-replace="true"></span>
         </div>
   </div>
   <div class="editor-row">
        <div class="editor-label"><label>County:</label></div>
        <div class="editor-field">
           <select id="County" name="County" data-role="combobox"
                   data-text-field="CountyName"
                   data-value-field="CountyId"
                   data-filter="contains"
                   data-auto-bind="false"
                   data-suggest="false"
                   data-placeholder="Select county..."
                   data-bind="source: dataSourceCounties, value: county">
           </select>
           <span class="field-validation-valid" data-valmsg-for="County" data-valmsg-replace="true"></span>
         </div>
</div>

then my view model:

$ns.viewModel = kendo.observable({
                dataSourceCountries: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: href('~/Api/GeographicApi/ListCountries'),
                            dataType: 'json'
                        }
                    },
                    schema: {
                        data: function (response) { return response.Data || {}; }
                    }
                }),
                dataSourceCounties: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: function () { var combobox = $('#Country').data('kendoComboBox'), id = combobox !== undefined ? combobox.value() : 0; return href('~/Api/GeographicApi/ListCountiesByCountryId/' + id) },
                            dataType: 'json'
                        }
                    },
                    schema: {
                        data: function (response) { return response.Data || {}; }
                    }
                }),
                refreshCounties: function (e) {
                    var countiesList = $('#County').data('kendoComboBox');
                    e.preventDefault();
                    countiesList.dataSource.read();
                }
});
kendo.bind($('#content-wrapper'), $ns.viewModel);

Hope this helps if you have not already found a solution...