剑道UI电网与层叠的DropDownList(Kendo UI Grid with Cascadin

我有我的剃须刀布局一个剑道UI电网从控制器读取数据。

在这个网格我希望有一组3个DropDownLists它们是：

ProductGroups ， Products ， Services

我希望实现的行为是，当我添加一行到网格，我选择ProductGroups第一，且Products下拉与由过滤产品列表更新GroupId （值）。然后选择Product和喜欢的第一个，更新的Services与过滤服务下拉productId （值）。

我不太知道如何做到这一点，任何人都可以帮我吗？

感谢大家的帮助。

最好的祝福。

Answer 1:

最简单的方法是使用级联dropdownlists： http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html的则每列的编辑模板内。

如果您正在使用弹出编辑你可能会考虑在这里定制喜欢的弹出式菜单： http://www.kendoui.com/code-library/mvc/grid/custom-popup-editor.aspx

如果您正在使用内联编辑，你应该用这种方式来定制这个编辑器模板： http://docs.kendoui.com/documentation/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates

如果您正在使用盒内 - 让刚刚说其不可能的。

Answer 2:

以下是我为GridEditMode.InCell完成。我有客户端和基金，每个客户都有基金自己的列表，因此，当用户选择客户端我需要只显示特定于该客户资金

查看：剑道格UI设置

    c.ForeignKey(p => p.ClientId, Model.Clients, "Id", "ClientName")
      .Title("Client")
      .Width(100);
    c.ForeignKey(p => p.FundId, Model.Funds, "Id", "Description")
      .EditorViewData(new {funds = Model.Funds})
      .EditorTemplateName("FundForeignKeyEditor")
      .Title("Fund")
      .Width(100);
   })
   .Editable(x => x.Mode(GridEditMode.InCell))
   .Events(e => e.Edit("gridEdit"))

现在，当上基金用户点击你需要的资金进行数据源的筛选，你做它使用JavaScript“gridEdit”事件。你把在同一视图/文件将该代码作为你的代码以上

<script type="text/javascript">
    function gridEdit(e) {
        var fundDropDown = e.container.find("#FundId").data("kendoDropDownList");

        if (fundDropDown) {
            fundDropDown.dataSource.filter({ field: "ClientId", operator: "eq", value: e.model.ClientId });

</script>

基金有“FundForeighKeyEditor”编辑模板，你必须在添加到浏览\共享\文件夹EditorTemplate。你可以使用任何名字，只是使文件模板确保名称匹配的EditorTemplateName的名称。在我来说，我用“FundForeignKeyEditor”作为EditorTemplate和FundForeighKeyEditor.cshtml文件

FundForeighKeyEditor.cshtml

@model FundViewModel

@(
        Html.Kendo().DropDownListFor(m => m)
            .BindTo((System.Collections.IEnumerable)ViewData["funds"])
            .DataTextField("Description")
            .DataValueField("Id")
)

下面是一个FundViewModel，它包含客户端Id这样我就可以对它进行过滤

public class FundViewModel
{
    public string Id { get; set; }
    public string ClientId { get; set; }
    public string Description { get; set; }
}

Answer 3:

这适用于内联编辑模式。我还没有尝试过任何人呢。

扎入第一降的变化情况下，找到目标下拉，并改变它的数据源。 data-selector-type是一个属性我添加到每个下拉在级联链以使选择容易。

function clientDropDownEditor(container, options) {           
  var clientCombo = $('<input  id="client' + options.uid + '"  data-selector-type="client" data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
      .appendTo(container)
      .kendoComboBox({
          dataTextField: "Name",
          dataValueField: "Name",
          dataSource: {
              transport: {
                  read: "json/data/getClients"
              }
          },
          change: function (e) {
              // Find the element with the required selector type in the same TR
              var kendoComboSites = e.sender.element.closest("tr").find("[data-selector-type=site]").data("kendoComboBox");

              kendoComboSites.dataSource.transport.options.read.url = "json/data/GetClientSites/" + e.sender.element.val() + "/" + $("#Id").val();
              kendoComboSites.dataSource.read();
              kendoComboSites.refresh();

          }
      }).data("kendoAutoComplete");
}

文章来源: Kendo UI Grid with Cascading DropDownList