MVC KendoUI 级联下拉列表，在多个父级上

Question

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

我可以对两列使用 Cascade-from 来实现这一点（即，如果一列发生更改，其他列将根据第一列数据列出结果），但不知道如何为两列或更多列实现相同的结果。

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

代码： 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() };
}     

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

Answer 2

我做到了如下：

查看代码：

<script>
    function filterShippingOptions() {
        return { locationId: $("#LocationViewModel").data("kendoDropDownList").value(), deliveryLocationId: $("#Location2ViewModel").data("kendoDropDownList").value() };
    }

function onCascade(e) {
  $("#ShippingOptionViewModel").data("kendoDropDownList").dataSource.read();
}
</script>

编辑器代码：

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

控制器方法：

public JsonResult GetAvailableShippingOptions(string PickUpLocationId, string DeliveryLocationId)
    {
   //Getting value from database
        return Json(ShippingOptionRepository.GetAvailableShippingOptions(PickUpLocationId, DeliveryLocationId), JsonRequestBehavior.AllowGet);
    }

两个父控件（在我的情况下为下拉列表）应具有以下内容：

.Events(evnt => evnt.Cascade("onCascade")) //Need to add this Event on Parent Drop Downs