CODEWITHSUNDEEP
kendo-ui
user763460
user763460

Reputation: 221

Add Title to Kendo UI Grid Toolbar

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

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

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

Upvotes: 4

Views: 20715

Answers (2)

dperish
dperish

Reputation: 1571

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

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

This works fine until you start getting crazy and attempt to use the Create/Custom buttons builders with the toolbar lambda.

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

Upvotes: 4

OnaBai
OnaBai

Reputation: 40887

The class that identifies the Kendo Grid toolbar is k-grid-toolbar. So for styling it, you might use:

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

For adding 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 if you want to add the HTML inside the div containing the buttons before or after it.

And grid is the id of the div containing the grid.

Upvotes: 12

Related Questions