Insert Button inside a Column Header Template

Environment

Product Grid for ProgressĀ® TelerikĀ® UI for ASP.NET Core
Product Version 2019.2.514

Description

What is the best approach for adding a button in the Grid to the command column header which will 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();
                  }
              });
    
          });
    

See Also

In this article
Not finding the help you need? Improve this article