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

title	description	type	page_title	slug	tags	ticketid	res_type
Inserting a Button inside a Column Header Template	An example on how to place an Add New Record button in the column header of the Grid in {{ site.product }}.	how-to	Adding New Record Button in Column Header	grid-add-new-button-header-inline	grid, add, new, button, header, inline, template, command, clientheadertemplate	1413640	kb

Environment

Product	{{ site.product }} 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 {{ site.framework }} Grid Resources

• [{{ site.framework }} Grid Documentation]({%slug htmlhelpers_grid_aspnetcore_overview%})

• [{{ site.framework }} Grid Demos](https://demos.telerik.com/{{ site.platform }}/grid/index)

{% if site.core %}

• {{ site.framework }} DataGrid Product Page

• [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})

• Telerik UI for {{ site.framework }} Forums

{% else %}

• {{ site.framework }} Grid Product Page

• [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})

• Telerik UI for {{ site.framework }} Forums {% endif %}

See Also

• Client-Side API Reference of the Grid for {{ site.framework }}
• [Server-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/grid)
• [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
• [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)