Insert Button Inside a Column Header Template

Environment

Product Grid for ProgressĀ® TelerikĀ® UI for ASP.NET Core
Product Version 2019.2.514

Description

What is the best approach to adding a button into a Kendo UI Grid's command column header which will add a new record?

Solution

Utilizing the command column's ClientHeaderTemplate property, a new button can be added into the header.

      .Columns(columns =>
      {
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250).ClientHeaderTemplate("<button id='addNew'>Add New</button>");
      })

Then, taking advantage of Kendo UI for jQuery, initialize the Kendo UI Button and configure its click event. To add a new record to the Kendo UI Grid, use the addRow() method:

      $(document).ready(function () {
          $("#addNew").kendoButton({
              icon: "plus",
              click: function (e) {
                e.preventDefault();
                var grid = $("#grid").data("kendoGrid");
                grid.addRow();
              }
          });

      });

See Also

In this article
Not finding the help you need? Improve this article