将 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 包含关联的鳍年列表 使用企业（如上一个下拉列表中选择的那样）

将 Kendo 级联下拉列表绑定到列表中的 List 属性

你不能从这个级联，因为没有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");
});
相关文章：