如何将模板添加到 Kendo 网格工具栏答案

【问题标题】：How to add a template to a Kendo grid toolbar如何将模板添加到 Kendo 网格工具栏
【发布时间】：2014-07-19 20:36:11
【问题描述】：

我正在尝试将自定义模板添加到 Kendo MVC 网格。我的模板应该包含两件事

创建按钮以将新记录添加到网格中
自动完成框过滤网格中的数据。

我正在尝试以下代码：

.ToolBar(toolbar =>
{
    toolbar.Template(@<text>
                <div class="toolbar">
                    <label class="category-label" for="category">Filter by name:</label>
                    @(Html.Kendo().AutoComplete()
                            .Name("employees")
                            .DataTextField("empName")
                                      .Filter("contains")
          .MinLength(3)
          .Events(e => e.Change("nameChange"))
                            .DataSource(ds =>
                            {
                                ds.Read("FilteringList", "Employee");
                            })

                        )
                </div>
                </text>);
    toolbar.Create().Text("New Record");

})

但这不起作用。我只能看到自动完成框。

有什么想法可以满足我的要求吗？

【问题讨论】：

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

【解决方案1】：

尼廷商城的答案可以通过替换来简化

<a class="k-button k-button-icontext k-grid-add"   
href="/YourControllerName/YouCreateActionResultJsonName?grdSearch-mode=insert">
New Record</a>

与

<a class='k-button k-button-icontext k-grid-add' 
href='#'><span class='k-icon k-add'></span>Add new record</a>

这是因为网格使用 jquery 委托来附加网格的单击事件处理程序，该处理程序调用 AddRow 方法到具有类“k-grid-add”的项目

【讨论】：

【解决方案2】：

删除下面一行

toolbar.Create().Text("New Record");

从工具栏部分并在模板内添加按钮。请看以下代码：

.ToolBar(toolbar =>
{
toolbar.Template(@<text>
            <div class="toolbar">
                <a class="k-button k-button-icontext k-grid-add" href="/YourControllerName/YouCreateActionResultJsonName?grdSearch-mode=insert">New Record</a>
                <label class="category-label" for="category">Filter by name:</label>
                @(Html.Kendo().AutoComplete()
                        .Name("employees")
                        .DataTextField("empName")
                                  .Filter("contains")
      .MinLength(3)
      .Events(e => e.Change("nameChange"))
                        .DataSource(ds =>
                        {
                            ds.Read("FilteringList", "Employee");
                        })

                    )
            </div>
            </text>);
})

【讨论】：