asp.net-mvc - MVC KendoUI 级联下拉列表，在多个父级上

Question

我在 kendoui 网格中有三列，分别为“送货地点”、“提货地点”和“可用的送货选项”。当任一位置列发生更改(“送货位置”或“取货位置”)时，“可用送货选项”列应相应更改。

我可以使用两列的级联来实现此目的(即，如果一列发生更改，其他列将根据第一列数据列出结果)，但不知道如何对两列或更多列实现相同的效果。

如何实现两列或更多列的级联？

代码:JS函数:

    function filterShippingOptions() {
   return { pickUpLocationId: $("#PickUpLocationId").data("kendoDropDownList").value(),        deliveryLocationId: $("#deliveryLocationId").data("kendoDropDownList").value() };
}

AvailableShippingOptions 编辑器:

@(Html.Kendo().DropDownListFor(m => m)
.DataValueField("ShippingOptionId")
.DataTextField("ShippingOptionName")
.OptionLabel("Select...")
.AutoBind(false)
.DataSource(dataSource =>
              {
                  dataSource.Read(read =>
                  {
                      read.Action("GetAvailableShippingOptions", "ProductionZone").Type(HttpVerbs.Post)
                          .Data("filterShippingOptions");
                  }).ServerFiltering(true);
              })
              //.CascadeFrom("RMSupplierLocationViewModel")
              .CascadeFrom("DeliveryLocationViewModel")
)
    @Html.ValidationMessageFor(m => m)

Answer 1

有两种选择可以实现您的需求:

选项 1:您可以使用级联 + 服务器过滤
选项2:您可以使用级联+客户端过滤

首先，您需要在两个位置下拉菜单(“送货位置”或“取货位置”)上定义事件，如下所示:

@(Html.Kendo().DropDownListFor(m => m)
.Name("PickUpLocationId")
.DataValueField("ShippingOptionId")
....
....
.Events(evnt=>evnt.Cascade("onCascade")) //Need to add this Event on Parent Drop Downs
)

对另一个位置下拉列表重复相同的操作。您的级联事件应如下所示:

服务器端过滤

@(Html.Kendo().DropDownListFor(m => m)
.Name("ShipingOption")
.DataValueField("ShippingOptionId")
.DataTextField("ShippingOptionName")
.OptionLabel("Select...")
.AutoBind(false)
.DataSource(dataSource =>
              {
                  dataSource.Read(read =>
                  {
                      read.Action("GetAvailableShippingOptions", "ProductionZone").Type(HttpVerbs.Post)
                          .Data("filterShippingOptions");
                  }).ServerFiltering(true);
              })
)

JS函数

  function onCascade(e){
        ("#ShipingOption").data("kendoDropDownList").dataSource.read(); 
    }

function filterShippingOptions() {
   return { pickUpLocationId: $("#PickUpLocationId").data("kendoDropDownList").value(),        deliveryLocationId: $("#deliveryLocationId").data("kendoDropDownList").value() };
}     

客户端过滤
对于第二个选项，您需要检索“运输”选项的所有记录，将服务器过滤禁用为 false，并在 onCascade JS 函数中应用过滤。