New to Telerik UI for ASP.NET Core? Download free 30-day trial

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 for adding a button in the Grid to the command column header which will add a new record?


  1. Utilize the ClientHeaderTemplate property of the command column.

          .Columns(columns =>
              columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250).ClientHeaderTemplate("<button id='addNew'>Add New</button>");
  2. Initialize the Kendo UI Button and configure its click event. To add a new record to the Grid, use the addRow() method.

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

See Also

In this article