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

Inserting a Button inside a Column Header Template

Environment

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

Description

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.

Solution

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

More ASP.NET Core Grid Resources

See Also

In this article