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

Inserting a Button inside a Column Header Template


Product Telerik UI for ASP.NET Core Grid
Product Version 2019.2.514


What is the best approach for adding a button in the Grid's command column header? The function of the button will be to 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");

More ASP.NET Core Grid Resources

See Also

In this article