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

Question

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

主细节网格

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

​

​

主栅格

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

细节视图模型

ConfigurationId是为每一行绑定并传递给子网格的add按钮的onclick事件所需的属性。

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

详细网格(kendo客户端模板)

   <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事件 // many 1(尝试了许多不同的选择器，结果相同) var addBtns = $("a.btnNewRule")； //找不到按钮if($.isArray(addBtns)) { $(addBtns).each( function (_，btn)){btn.on(“单击”，function () { loadNewRule(this)；})；}；} //尝试2 //从网格上下文中查找，工具栏//仍然找不到按钮ruleGrid.find(“.k-网格-工具栏”).on(“单击”，".btnNewRule"，函数(e) { loadNewRule(e)；})；

对dev控制台中的选择器进行测试表明，元素在当时不可用，因此唯一的选项似乎是使用自定义工具栏呈现争用条件在details网格中绑定。

• 当前实现:尝试使用viewmodel属性ConfigurationId绑定单击事件 onclick='loadNewRule(#=ConfigurationId #)‘

但是，语法是假的，并生成一个预期的错误：

  Uncaught SyntaxError: Invalid or unexpected token

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

注意:客户端模板使用内联编辑，但是add将使用带有自定义编辑器的弹出窗口，因此需要在尝试时绑定。

以不同的方式实现目标。

Answer 1

这似乎是一种贫民区的做法，但效果很好。任何人有一个更好，更剑道的方式，请张贴。解决方案之一是将按钮引用this传递给load函数，该函数使用按钮定位包含父元素(包含所需属性)的行。

自定义工具栏，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>"))
  ...

查找父id的js助手函数

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

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

        return dataItem.Id;
   }