grid-add-a-custom-button-in-toolbar.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Adding a Custom Button in the Grid's ToolBar	Learn how to configure the {{ site.product }} Grid toolbar to have a custom button along with the original buttons without creating a template.	how-to	Include a Separate Button in the Grid's Toolbar	grid-add-a-custom-button-in-toolbar		grid, button, toolbar	1461293	kb

Environment

Product Version	2020.1.406
Product	{{ site.product }} Grid

Description

Is there a way to create one button in the toolbar right aligned from the other buttons that opens a {{ site.product }} Window in the Grid for {{ site.framework }}?

Solution

To add a custom button:

1. Include a custom command button in the toolbar.

       // Toolbar in the Grid
       .ToolBar(e => {
           e.Pdf();
           e.Excel();
           e.Custom().Text("Instructions").HtmlAttributes(new { id = "customButton", @class="floatRight" });
       })

2. On the click event of the button, add the logic to open the {{ site.product }} Window.

       $("#grid").on("click", "#customButton", function (e) {
           e.preventDefault();  //prevents postback
   
           var window = $("#window").data("kendoWindow");
           window.open();
       });

3. Finally, add some style to right align the {{ site.product }} Button.

       .floatRight {
           float: right;
       }

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)