Edit this page

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

Environment

Product Progress Kendo UI Grid
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.

    { template: "<button class='customEdit'>My Edit</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='customEdit'>My Edit</button>", title:"Custom Edit"},
                { template: "<button class='customDelete'>My Delete</button>", title:"Custom Delete"},
                { field: "Discontinued", width: "120px", editor: customBoolEditor },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }]
            });
          });
    
          function customBoolEditor(container, options) {
            $('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
            $('<label class="k-checkbox-label">‚Äč</label>').appendTo(container);
          }
        </script>
    

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy