具有级联DropDownList的Kendo UI网格

Question

我的Razor Layout上有一个Kendo UI Grid,它从控制器中获取数据.

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

ProductGroups,Products,Services

我希望实现的行为是,当我向网格添加一行时,我ProductGroups先选择,然后Products使用按GroupId(值)过滤的产品列表更新DropDown .然后选择Product并喜欢第一个,Services使用过滤的productId(value)服务更新DropDown .

我不太清楚怎么做到这一点,有人可以帮帮我吗？

感谢大家的帮助.

最好的祝福.

Answer 1

这是我为GridEditMode.InCell所做的.我有客户和基金,每个客户都有自己的基金清单,所以当用户选择客户时,我只需要显示特定于此客户的基金

查看:Kendo Grid 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"))

现在,当用户点击Fund时,你需要对资金的数据源进行过滤,你可以使用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>

Fund拥有"FundForeighKeyEditor"编辑器模板,您必须将其添加到Views\Shares\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,它包含ClientId,所以我可以对它进行过滤

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

Answer 2

最简单的方法是 在每个列的编辑器模板内使用级联下拉列表： http://demos.kendoui.c​​om /web/dropdownlist/cascadingdropdownlist.html。

如果您使用弹出编辑，您可能会考虑自定义弹出菜单，如下所示： http://www.kendoui.c​​om /code-library/mvc/grid/custom-popup-editor.aspx

如果您使用内联编辑，则应使用此方法来自定义编辑器模板： http://docs.kendoui.c ​​om/documentation/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates

如果您使用 InCell - 我们只能说这是不可能的。