Use Custom Button Templates instead of Default Commands for Inline Edit and Delete Functionalities

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	All
Browser	All

Description

How can I trigger the default Edit and Delete functionalities in a Grid with enabled inline edit mode by using my own custom buttons instead of the default command buttons?

Solution

Use the addRow and removeRow methods of the Grid.

1. Use the columns.template property to add a custom button to the column.

   js

   { template: "<button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base customEdit'><span class='k-button-text'>My Edit</span></button>", title:"Custom Edit"}

2. Apply the editRow method by passing the row for which the button was clicked as an argument.

   <div id="grid"></div>
   
       <script>
         $("#grid").on("click", ".customEdit", function(){
           var row = $(this).closest("tr");
           $("#grid").data("kendoGrid").editRow(row);
         });
   
         $("#grid").on("click", ".customDelete", function(){
           var row = $(this).closest("tr");
           $("#grid").data("kendoGrid").removeRow(row);
         });
   
         $(document).ready(function () {
          var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
               dataSource = new kendo.data.DataSource({
                   transport: {
                       read:  {
                           url: crudServiceBaseUrl + "/Products"
                       },
                       update: {
                           url: crudServiceBaseUrl + "/Products/Update",
                           type: "POST",
                   		contentType: "application/json"
                       },
                       destroy: {
                           url: crudServiceBaseUrl + "/Products/Destroy",
                           type: "POST",
                   		contentType: "application/json"
                       },
                       create: {
                           url: crudServiceBaseUrl + "/Products/Create",
                           type: "POST",
                   		contentType: "application/json"
                       },
                   parameterMap: function(options, operation) {
                     if (operation !== "read" && options.models) {
                       return kendo.stringify(options.models);
                     }
                   }
                 },
                 batch: true,
                 pageSize: 20,
                 schema: {
                   model: {
                     id: "ProductID",
                     fields: {
                       ProductID: { editable: false, nullable: true },
                       ProductName: { validation: { required: true } },
                       UnitPrice: { type: "number", validation: { required: true, min: 1} },
                       Discontinued: { type: "boolean" },
                       UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                     }
                   }
                 }
               });
   
           $("#grid").kendoGrid({
             dataSource: dataSource,
             pageable: true,
             height: 550,
             toolbar: ["create"],
             editable: "inline",
             columns: [
               "ProductName",
               { field: "UnitPrice", title: "Unit Price", format: "{0:c}"},
               { field: "UnitsInStock", title:"Units In Stock"},
               { template: "<button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base customEdit'><span class='k-button-text'>My Edit</span></button>", title:"Custom Edit"},
               { template: "<button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base customDelete'><span class='k-button-text'>My Delete</span></button>", title:"Custom Delete"},
               { field: "Discontinued", width: "120px" },
               { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }]
           });
         });
       </script>

See Also

• API Reference of the editRow Method.
• API Reference of the removeRow Method.
• API Reference of the columns.template Property.
• Working with Templates in Kendo UI