capture-the-add-event-of-the-grid.md

title	page_title	description	type	slug	previous_url	tags	ticketid	res_type	component
Capture the Event for Adding New Rows	Capture the add Event - Kendo UI for jQuery Data Grid	Learn how to capture the add event of the Kendo UI Grid.	how-to	how-to-capture-the-add-event-of-the-grid	/knowledge-base/how-to-capture-the-add-event-of-the-grid	add, event, grid	1097353	kb	grid

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	Windows 10 64bit
Browser	Google Chrome
Browser Version	56
Product Version	2020.3.1021

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').unbind("click");

              $('.k-grid-add').bind("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 },
              { command: "destroy", title: "&nbsp;", width: 150 }],
            editable: true
          });
        });
      </script>
    </div>