将标题添加到 Kendo UI 网格工具栏答案

【问题标题】：Add Title to Kendo UI Grid Toolbar将标题添加到 Kendo UI 网格工具栏
【发布时间】：2013-02-12 14:48:52
【问题描述】：

我希望为 Kendo UI 网格工具栏添加一个标题并将其左对齐。有什么方法可以在这个区域添加 h2 或 h3 吗？

我还可以访问样式属性吗？（我想在顶部和底部（分页所在）放置较深的颜色/渐变）

toolbar   : [
        {"name": "create", template: "<img class='k-grid-add' src='add.png'/>"},
        {"name": "save", template: "<img class='k-grid-save-changes' src='save.png'/>"},
        {"name": "cancel", template: "<img class='k-grid-cancel-changes' src='cancel.png'/>"}
    ],

【问题讨论】：

标签： kendo-ui

【解决方案1】：

标识 Kendo Grid 工具栏的类是 k-grid-toolbar。因此，对于它的样式，您可以使用：

#grid .k-grid-toolbar { 
    background: red;
}

要向工具栏添加一些内容，您可以使用：

$(".k-grid-toolbar", "#grid").prepend("<h1>hello</h1>");

或

$(".k-grid-toolbar", "#grid").before("<h1>hello</h1>");
$(".k-grid-toolbar", "#grid").after("<h1>hello</h1>");

取决于您是否要在包含按钮 before 或 after 的 div 内添加 HTML。

而grid 是包含grid 的div 的id。

【讨论】：

太好了，很高兴你能帮助 OnaBai！
我知道这是 OnaBai 的一篇旧帖子，但我无法享受代码的平静。我正在做你说的。
我只是不明白我的代码有什么问题，我的项目中有一个 div，其中包含剑道打开列表视图所需的 div。因此，就像您的示例中的母 div 和 #grid 内部一样，然后我使用您向我们展示的代码调用它。我的母亲 div 与里面的列表视图一起淡入淡出，我的工具栏显示了我的创建按钮，但是工具栏的其余部分是空的。你能帮帮我吗？
@Japa，在 Stack Overflow 中提交一个新问题，并包含一个重现您在 JSFiddle/JSBin/KendoUI Dojo/... 中看到的代码的代码，我会看看它
@Mike，你当然可以。有多种方法可以实现这一点：可以通过添加属性display: none 隐藏您使用prepend 添加的HTML 元素，或者您可以使用remove() 实际删除它。

【解决方案2】：

用 Kendo-MVC 的说法，解决方案非常简单：

@(Html.Kendo().Grid<MyGridsViewModel>()
    .Name("MyGridsName")
    .ToolBar(toolbar => toolbar.Template("<h4>My Grid's Title</h4>"))
    .DataSource(datasource => ...

在您开始发疯并尝试将“创建/自定义”按钮构建器与工具栏 lambda 一起使用之前，这一切正常。

在这种情况下，按钮永远不会被渲染。解决方案是使用此线程中确定的其他方法之一：http://www.telerik.com/forums/custom-command-button-in-toolbars

【讨论】：