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
-
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>"); })
-
Initialize the Kendo UI Button and configure its
click
event. To add a new record to the Grid, use theaddRow()
method.$(document).ready(function () { $("#addNew").kendoButton({ icon: "plus", click: function (e) { e.preventDefault(); var grid = $("#grid").data("kendoGrid"); grid.addRow(); } }); });