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

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base