代码之家  ›  专栏  ›  技术社区  ›  Will Lopez

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

  •  0
  • Will Lopez  · 技术社区  · 7 年前

    :绑定细节网格的自定义工具栏操作,将父行的id传递给客户端脚本。

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

    grids

    主网格

         @(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; }
        ...
      }       
    

    详细网格(剑道客户端模板)

       <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事件

      var addBtns=$(“a.btnNewRule”);

      //找不到按钮 { btn.on(“点击”,函数(){ loadNewRule(本); }); }

      //从网格上下文、工具栏中查找 //仍然找不到按钮 ruleGrid.find(“.k-grid-toolbar”).on(“click”,“.btnNewRule”,函数(e) loadNewRule(e); });

    • 当前实现:尝试使用viewmodel属性绑定click事件 配置

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

    但是 ,语法错误,并生成[预期]错误:

      Uncaught SyntaxError: Invalid or unexpected token
    

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

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

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

    1 回复  |  直到 7 年前
        1
  •  0
  •   Will Lopez    7 年前

    这看起来像是犹太人区的做法,但确实有效。任何人有更好,更多剑道的方式请张贴。解决方案是传递按钮引用 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>"))
      ...
    

    剑道中寻找相关物品的常见模式

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