Edit this page

Change the Icons of Update and Cancel Buttons

Environment

Product Progress Kendo UI Grid

Description

I am able to edit the text and styles of the commands—such as command.Edit().Text(" ").HtmlAttributes(new { @class = "k-icon k-i-pencil" });—but I have not found a way to reach the buttons which show up in the new-item line.

How can I change the text and images of the Update and Cancel buttons which show up in the line while editing and while adding a new item?

Solution

To change the text of the update and cancel commands, pass the desired text to the edit command. To add a new record, use the same template—it will change the update and cancel commands during both update and create operations.

The following example demonstrates how to implement the approach in ASP.NET MVC.

columns.Command(command => {
 command.Edit()
     .Text("")
     .UpdateText("Custom Update")
     .CancelText("Custom Cancel");
 })

The following example demonstrates how to implement the approach in JavaScript.

{
  command: [{
  name: "edit",
  iconClass:"k-icon k-i-copy",
  text: {
     edit: "Custom edit",
     cancel: "Custom cancel",
     update: "Custom update"
  }
 }]
}

However, the option to change the icons is scheduled for the next major Kendo UI release at the beginning of next year. Meanwhile, you can achieve the same with CSS rules, as demonstrated in the following example.

.k-grid-update .k-icon:before{
  content: "\e143";
}

 .k-grid-cancel .k-icon:before{
  content: "\e400";
}
    <div id="grid"></div>
    <script>
      $("#grid").kendoGrid({
        columns: [
          { field: "name" },
          { field: "age" },
          { command: [{ name: "edit",
                       iconClass:"k-icon k-i-copy",
                       text: { edit: "Custom edit", cancel: "Custom cancel", update: "Custom update" } }] }
        ],
        dataSource: {
          data: [
            { id: 1, name: "Jane Doe", age: 30 },
            { id: 2, name: "John Doe", age: 33 }
          ],
          schema: {
            model: { id: "id" }
          }
        },
        editable: {
          mode: "inline"
        }
      });
    </script>
    <style>
      .k-grid-update .k-icon:before{
        content: "\e143";
      }

      .k-grid-cancel .k-icon:before{
        content: "\e400";
      }
    </style>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy