New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Adding a Custom Button in the Grid's ToolBar

Environment

Product Version 2020.1.406
Product Telerik UI for ASP.NET MVC 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 MVC Window in the Grid for ASP.NET MVC?

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 MVC 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 MVC Button.

        .floatRight {
            float: right;
        }
    

More ASP.NET MVC Grid Resources

See Also

In this article