8

我的 Razor 布局上有一个 Kendo UI Grid，它从控制器中获取数据。

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

ProductGroups, Products,Services

我希望实现的行为是，当我在网格中添加一行时，我ProductGroups首先选择，然后使用按（值）Products过滤的产品列表更新 DropDown 。GroupId然后选择Product并像第一个一样，使用按（值）Services过滤的服务更新 DropDown 。productId

我不太清楚如何实现这一点，有人可以帮助我吗？

谢谢大家的帮助。

此致。

4

3 回答 3

5

这是我为 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; }
}
于 2012-12-27T21:34:19.660 回答
4

最简单的方法是在 每个列的编辑器模板中使用级联下拉列表： 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 - 可以说这是不可能的。

于 2012-09-22T10:47:48.977 回答
2

这适用于内联编辑模式。我还没有尝试过其他的。

绑定第一个下拉列表的更改事件，找到目标下拉列表，并更改其数据源。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");
}
于 2013-01-02T06:30:31.130 回答