KendoUI-使用MVVM和远程数据时的级联下拉列表
我有一个KendoUI下拉列表,它从Web服务获取数据,根据所选项目填充第二个下拉列表。我正在使用MVVM绑定 我的代码如下所示:KendoUI-使用MVVM和远程数据时的级联下拉列表,mvvm,kendo-ui,cascadingdropdown,Mvvm,Kendo Ui,Cascadingdropdown,我有一个KendoUI下拉列表,它从Web服务获取数据,根据所选项目填充第二个下拉列表。我正在使用MVVM绑定 我的代码如下所示: <div id="ddlDiv"> <div data-container-for="MEASURE" required class="k-input k-edit-field"> <select id="MEASURE" name="MEASURE" data-role=
<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>
两个列表的数据最初都已正确填充,并且已正确绑定到模型。但是,更改第一个下拉列表的值不会导致第二个下拉列表刷新其数据。从未触发对web服务的调用
我在这里看到了类似的情况,使用本地数据:
我不知道这是否仍然是您的问题,因为问题提出已经有一段时间了,但我想我会回答,因为我今天自己也遇到了类似的问题,并设法解决了这个问题 我所做的是将处理程序绑定到父组合框的onChange事件,并在子组合框的数据源上手动调用read() e、 g HTML: 如果您还没有找到解决方案,希望这对您有所帮助
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;
}
<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>
$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);