Add a Custom Button in Grid ToolBar

Environment

Product Version 2020.1.406
Product ProgressĀ® Kendo UIĀ® Grid for ASP.NET MVC

Description

Is there a way to create one button in the toolbar right aligned from the other buttons that opens a Kendo UI Window in the Kendo UI Grid?

Solution

One way you can add a custom button is to include a custom command button in the toolbar.

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

Next, on the click event of the button, add the logic to open the Kendo UI Window:

    $("#grid").on("click", "#customButton", function (e) {
        e.preventDefault();  //prevents postback

        var window = $("#window").data("kendoWindow");
        window.open();
    });

Finally, add some style to right align the Kendo UI Button.

    .floatRight {
        float: right;
    }

See Also

In this article
Not finding the help you need? Improve this article