Clever Geek Handbook

Add Title to Kendo UI Toolbar Toolbar

I want to add a title to the Kendo UI grid toolbar and align it to the left. Is there a way to add h2 or h3 to this area?

Also, in order to style this toolbar, can I access the style property? (I want to put a darker color / gradient on the top and bottom (where there is pagination))

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


source to share


2 answers


The class, which identifies the Grid toolbar Kendo, k-grid-toolbar

. So to style it you can use:

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

To add some content to the toolbar, you can use:

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


or

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

depending on whether you want to add HTML inside div

that contains buttons before or after it.

And grid

is id

div

containing grid

.

+9


source


In Kendo-MVC language, the solution is quite simple:

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


This works great until you go crazy and try to use Create / Custom button creators using the lambda toolbar.

In this case, the buttons are never displayed. The solution is to use one of the other approaches defined in this thread: http://www.telerik.com/forums/custom-command-button-in-toolbars

+3


source






More articles:


All Articles