Change the Icons of Update and Cancel Buttons

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

I can 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-save-command .k-icon:before{
  content: "\e143";
}

 .k-grid-cancel-command .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-save-command .k-icon:before{
        content: "\e143";
      }

      .k-grid-cancel-command .k-icon:before{
        content: "\e400";
      }
    </style>