Kendo MVC 如何在子网格中绑定自定义工具栏操作答案

【问题标题】：Kendo MVC how to bind custom toolbar action in child gridsKendo MVC 如何在子网格中绑定自定义工具栏操作
【发布时间】：2018-08-13 21:19:33
【问题描述】：

目标：绑定详细网格的自定义工具栏操作，将父行的 id 传递给客户端脚本。

主从网格

每个主行都有 0-many 详细信息，在展开行时显示。详细信息是使用 kendo 的客户端模板绑定到父行的另一个网格。

主网格

     @(Html.Kendo().Grid<ConfigurationRuleViewModel>()
          .Name("configurationRuleGrid")
          .Columns(columns =>
          ...)
          // detail grid
          .ClientDetailTemplateId("configRuleDetailTemplate")
        )

详细视图模型

ConfigurationId是每行需要绑定并传递给子网格的添加按钮onclick事件的属性。

  public class RuleViewModel
  {
    public long Id { get; set; }
    [Required]
    public int ConfigurationId { get; set; }
    ...
  }

细节网格（剑道客户端模板）

   <script id="configRuleDetailTemplate" type="text/kendo-template">
       @(Html.Kendo().Grid<RuleViewModel>()
           .Name("grid_#=Id#")
           .Columns(columns =>
            ...
           )//
           .ToolBar(commands =>
                    commands.Template("<a class='btnNewRule k-button k-button-icontext' onclick='loadNewRule(\\#=ConfigurationId \\#)' title='Add new rule'></span>Add</a>"))
           ...
           .DataSource(dataSource => dataSource
           ...
           )
          .ToClientTemplate())
  </script>

我尝试了什么

单独使用 document.ready 事件绑定到按钮

//尝试1（尝试了许多不同的选择器，结果相同） var addBtns = $("a.btnNewRule");

// 找不到按钮 if($.isArray(addBtns)) { $(addBtns).each(函数(_, btn){ btn.on("点击",function () { 加载新规则（这个）； }); }); }

//尝试2 // 从网格上下文中查找，工具栏 // 仍然找不到按钮 ruleGrid.find(".k-grid-toolbar").on("click", ".btnNewRule", function (e) { 加载新规则（e）； });

在开发控制台中测试选择器显示元素当时不可用，因此唯一的选项似乎是使用自定义工具栏绑定在详细信息网格中 - 呈现竞争条件。

当前实现：尝试使用 viewmodel 属性 ConfigurationId 绑定点击事件

onclick='loadNewRule(\#=ConfigurationId \#)'

但是，语法是假的，会产生一个[预期的]错误：

  Uncaught SyntaxError: Invalid or unexpected token

在客户端模板中绑定属性的正确方法是什么。

注意：客户端模板使用内联编辑，但添加将使用带有自定义编辑器的弹出窗口，因此需要绑定为尝试。

对实现目标的不同方式持开放态度。

【问题讨论】：

标签： asp.net-mvc telerik kendo-grid

【解决方案1】：

这似乎是贫民区的做法，但它确实有效。任何人有更好，更多的剑道方式请张贴。一种解决方案是将按钮引用this 传递给加载函数，该函数使用按钮定位包含父元素（包含所需属性）的行。

自定义工具栏，`onlick` 定义

  //detail grid command definitions
  ...
   commands.Template("<a class='btnNewRule k-button k-button-icontext' onclick='loadNewRule(this)' title='Add new rule'></span>Add</a>"))
  ...

js辅助函数查找父id

在剑道中查找相关项目的常用模式

   function getCurrentParentConfigurationId(source) {
        const row = $(source).closest("tr");
        const grid = $("#configurationRuleGrid").data("kendoGrid");
        const dataItem = grid.dataItem(row);

        return dataItem.Id;
   }

【讨论】：