Edit this page

Capture the Event for Adding New Rows

Environment

Product Progress Kendo UI Grid
Operating System Windows 10 64bit
Browser Google Chrome
Browser Version 56
Made with version 2017.3.913

Description

I have a Kendo UI Grid which displays an Add New Row button in its toolbar.

How can I capture the add event behind the button functionality and be able to insert own values in a field—for example, date and time?

Solution

The Kendo UI Grid does not provide a built-in solution for capturing its add event when the user clicks the button. However, you can work around this issue by using jQuery.

Attach an event handler for the Add New Row button to the dataBound event of the Grid by using its k-grid-add class.

      <div id="example">
      <div id="grid"></div>

       <script>
        $(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",
                    dataType: "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,
            navigatable: true,
            dataBound:function(e){
              $('.k-grid-add').click(function(){
                console.log("Handle the add button click")
              })
            },
            pageable: true,
            height: 550,
            toolbar: ["create", "save", "cancel"],
            columns: [
              "ProductName",
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
              { field: "UnitsInStock", title: "Units In Stock", width: 120 },
              { field: "Discontinued", width: 120, editor: customBoolEditor },
              { command: "destroy", title: "&nbsp;", width: 150 }],
            editable: true
          });
        });

        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>
    </div>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy