Question

我在kendoui grid中有三列作为＆＃34; Delivery Location＆＃34;，＆＃34; PickUp location＆＃34;和＆＃34;可用的运输选项＆＃34;。当任一位置列发生更改（＆＃34;交货地点＆＃34;或＆＃34;取货地点＆＃34;）时，＆＃34;可用的运输选项＆＃34;列应相应更改。

我可以使用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：您可以使用级联+客户端过滤

首先，您需要在两个地点的下拉菜单（＆＃34;交货地点＆＃34;或＆＃34;取货地点＆＃34;）中定义事件，如下所示：

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

对另一个位置DropDown重复相同的操作。您的级联赛事应如下所示：

服务器端过滤

@(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);
    }

父控件（在我的情况下为Dropdownlists）应该具有以下内容：

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

多个父母的MVC KendoUI级联下拉列表

2 个答案: