kendo ui - KendoUI - Cascading Dropdownlist when using MVVM and Remote Data -
i have kendoui dropdownlist fetches data web service, depending on selected item 2nd dropdown populated. 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 data populated correctly , correctly bound model. changing value of first dropdown not cause 2nd dropdown have it's data refreshed. call web service never triggered.
i've seen similar situation here uses local data:
i don't know if still issue it's been while since question asked thought answer had similar problem myself today , managed solve workaround.
what did bind handler onchange event of parent combo box , in manually call read() on data source of 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 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 helps if have not found solution...
Comments
Post a Comment