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;
}