3

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

我也可以只为这个工具栏设置样式，我可以访问 style 属性吗？（我想在顶部和底部（分页所在的位置）放置较深的颜色/渐变）

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'/>"}
    ],
4

2 回答 2

11

标识 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的。divgrid

于 2013-02-12T23:57:10.950 回答
4

用 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

于 2016-02-15T17:17:57.313 回答