Skip to content

Latest commit

 

History

History
59 lines (47 loc) · 1.92 KB

grid-add-new-button-header-inline.md

File metadata and controls

59 lines (47 loc) · 1.92 KB
title description type page_title slug tags ticketid res_type
Insert Button inside a Column Header Template
An example on how to place an Add New Record button in the column header of Grid in Telerik UI for ASP.NET Core.
how-to
Add New Record Button in Column Header | Telerik UI for ASP.NET Core Grid
grid-add-new-button-header-inline
grid, add, new, button, header, inline, template, command, clientheadertemplate
1413640
kb

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