Question

我希望为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'/>"}
    ],

Answer 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>");

取决于您是否要在之前包含按钮的div内或之后的中添加HTML。

而grid是包含id的{{1}}的{{1}}。

Answer 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

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

2 个答案: