Adding a Custom Button in the Grid's ToolBar

Environment

Product Version	2020.1.406
Product	Telerik UI for ASP.NET Core Grid

Description

Is there a way to create one button in the toolbar right aligned from the other buttons that opens a Telerik UI for ASP.NET Core Window in the Grid for ASP.NET Core?

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 Telerik UI for ASP.NET Core 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 Telerik UI for ASP.NET Core Button.

       .floatRight {
           float: right;
       }
   

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base