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

Question

我有两个班级：

class Enterprise
{
    string EnterpriseCode {get; set;}
    string LocationCode {get; set;}
    List<FinYear> FinYears {get; set;}
}

class FinYear
{
    string FinancialYear {get; set;}
}

---

从我的控制器中，我传递了数据类型 List

的强类型视图

我在视图的 HTML 部分中有两个 Kendo 下拉列表：

@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 包含相关联的财政年度列表 与企业合作（在上一个下拉菜单中选择）

Answer 1

您不能从此级联，因为没有Parent <-> Child 关系。这意味着FinYear 没有ParentID。您需要手动更改第二个 ComboBox 的 dataSource 或实现连接。

ComboBox.cascadeFrom

• 子组合框将监听父值的任何变化。
• 如果父级没有值，则子级将被禁用。

Cascading ComboBoxes ComboBox / Cascading ComboBox Demo

这是demo：-它是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");

});