Adding custom buttons to Kendo grid toolbar in ASP.NET Core


I am using Kendo tools for my ASP.NET Core application. I have a grid and I want to add custom buttons to the grid tool bar. I can easily add the export to excel button but I'm having a really hard time adding my custom buttons.

Currently I just have my buttons displayed above the grid, here are those buttons:

<a href='#' class='k-button' id='saveState'>Save Grid Settings</a>
<a href='#' class='k-button' id='clearState'>Clear Grid Settings</a>

Here is my grid:

.Columns(columns =>
    columns.Bound(c => c.user_name).ClientTemplate(@"<a href=" + @Url.Content("/Account/UserProfile?caller='UserList'&user_id=#:data.user_id#") + ">#: user_name #</a>").Title("User Name");
    columns.Bound(c => c.full_name).Title("Name");
    columns.Bound(c => c.main_phone).Title("Phone").Width(150);
    columns.Bound(c => c.main_phone_ext).Title("Ext").Width(100);
    columns.Bound(c =>"E-Mail");
    columns.Bound(c => c.admin).ClientTemplate("#= admin ? 'Y' : 'N' #").Title("Admin").Width(100).HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
    columns.Bound(c =>"#= active ? 'Y' : 'N' #").Title("Active").Width(100).HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
    columns.Bound(c => c.last_login).Title("Last Login").Format("{0:MM/dd/yyyy}");
.ToolBar(tools =>
.Pageable(pageable => pageable
    .PageSizes(new int[] { 10, 20, 50 })
.Sortable(sortable => sortable
.Reorderable(reorder => reorder.Columns(true))
.Excel(excel => excel
    .FileName("User List.xlsx")
    .ProxyURL(Url.Action("Excel_Export_Save", "Account"))
.DataSource(dataSource => dataSource
    .Read(read => read.Action("Users_Read", "Account").Data("additionalData"))

Is there a way to add a template of soemthing to the toolbar property, I want the buttons to display next to the export to excel button. I've looked up some tutorials and everything is showing using tools.template in my toolbar property but when I try that it says Template does not exist.


Add a tools.Custom() statement after the tools.Excel(). This example creates a toolbar with the standard create button and a custom button for duplicating a row.

.ToolBar(toolbar =>
        .HtmlAttributes ( new { onclick="master_duplicate(); return false;" } )
        .Name("duplicate")@* creates a button with class k-grid-duplicate *@
        .IconClass("k-icon k-i-copy")

and javascript

var dup_select_id; * used later in databound handler to automatically select the new duplicate;
function master_duplicate() {
    var grid = $('#master').data('kendoGrid');
    var data = grid.dataItem(;
        url: "@Url.Action("Duplicate")",
        type: "POST",
        data: { masterID: }
        .done(function (data, status, jqXHR) {
            if (data.Data && {
                dup_select_id =;

and there is other logic to hide the button when there is no selected row.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at


Login to comment