Insert Button Inside a Column Header Template


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


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


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 () {
              icon: "plus",
              click: function (e) {
                var grid = $("#grid").data("kendoGrid");


See Also

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