New to Kendo UI for jQueryStart a free 30-day trial

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

Environment

ProductProgress® Kendo UI® Grid for jQuery
Operating SystemAll
BrowserAll

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/kendo-ui/service",
                dataSource = new kendo.data.DataSource({
                  transport: {
                    read:  {
                      url: crudServiceBaseUrl + "/Products",
                      dataType: "jsonp"
                    },
                    update: {
                      url: crudServiceBaseUrl + "/Products/Update",
                      ataType: "jsonp"
                    },
                    destroy: {
                      url: crudServiceBaseUrl + "/Products/Destroy",
                      dataType: "jsonp"
                    },
                    create: {
                      url: crudServiceBaseUrl + "/Products/Create",
                      dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                      if (operation !== "read" && options.models) {
                        return {models: 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