How to change the “text”on the kendo grid button?

Question

On my kendo grid there is a button, by default it's add new record . I want to change it. I used the following tag but does not work :

#turbinegrid .k-icon.k-add::after {
    content: "ADD";
}

Answer 1

You can set template for the button like below,

$("#myGrid").kendoGrid({
toolbar: [{
      template: '<div><div style="float:left;"><h2>Tech Documents</h2></div><div style="float:right;margin: 2% 1% 1% 1%;"><a title="add new" class="k-button k-button-icontext k-grid-add" href="\\#"><span class="k-icon k-i-plus-outline"></span>**Create One**</a></div></div>'
     }]
});

Use Your Text for the button in place of Create One .

Answer 2

When using MVC you can set the text like this:

@(Html.Kendo().Grid<GridViewModel>()
    .ToolBar(tools =>
    {
        tools.Create().Text("ADD");
    })
)

When using jQuery use this:

$("#grid").kendoGrid({
    toolbar: [{ name: "create", text: "ADD" }]
});

Answer 3

#turbinegrid .k-icon.k-add {
    font-size: 0px !important;
}
#turbinegrid .k-icon.k-add::after {
    content: "New Text" !important;
    font-size: 18px !important;
}