将 Kendo 级联下拉列表绑定到列表中的 List 属性
本文关键字:List 属性 列表 Kendo 级联 下拉列表 绑定 | 更新日期: 2023-09-27 18:35:15
我有两个类:
class Enterprise
{
string EnterpriseCode {get; set;}
string LocationCode {get; set;}
List<FinYear> FinYears {get; set;}
}
class FinYear
{
string FinancialYear {get; set;}
}
从我的控制器中,我传递了数据类型列表<企业的强类型视图>企业的强类型视图>
我在视图的 HTML 部分中有两个剑道下拉列表:
@model List<Enterprise>
@(Html.Kendo.DropDownList()
.Name("EnterpriseDDL)
.BindTo(Model)
.DataTextField("EnterpriseCode")
.DataValueField("Enterprise")
和
(Html.Kendo.DropDownList()
.Name("YearsDDL")
.cascadeFrom("EnterpriseDDL")
.BindTo(Model) //!!! not sure about this
.DataTextField("") //!!!
.DataValueField("") //!!!
这三个字段应该是什么,以便 DDL 包含关联的鳍年列表 使用企业(如上一个下拉列表中选择的那样)
你不能从这个级联,因为没有Parent <-> Child
关系。这意味着FinYear
没有ParentID
。您需要手动更改第二个组合框的数据源或实现连接。
ComboBox.cascadeFrom
- 子组合框将侦听父项值的任何更改。
- 如果父项没有值,则将禁用子项。
级联组合框组合框/级联组合框演示
这是一个演示: - 它JavaScript
但我认为您也可以轻松地为扩展修改它。
HTML:
<div class="demo-section k-header">
<p>
<label for="categories">Enterprises:</label><input id="categories" style="width: 270px" />
</p>
<p>
<label for="products">FinYear:</label><input id="products" style="width: 270px" />
</p>
</div>
JavaScript:
var enterpriseArray = [{
EnterpriseCode: "abc",
LocationCode: "123",
FinYears: [ "2014", "2015" ]
},
{
EnterpriseCode: "def",
LocationCode: "456",
FinYears: [ "2012", "2013" ]
}];
$(document).ready(function() {
var categories = $("#categories").kendoComboBox({
placeholder: "Select Enterprise Code...",
dataTextField: "EnterpriseCode",
dataValueField: "EnterpriseCode",
dataSource: enterpriseArray,
change: function(e) {
//debugger;
products.dataSource.data(e.sender.dataItem().FinYears);
}
}).data("kendoComboBox");
var products = $("#products").kendoComboBox({
placeholder: "Select FinYear...",
//dataTextField: "",
//dataValueField: "",
}).data("kendoComboBox");
});