Add Button Separator In Kendo Grid's Tool Bar

This article will show you how to add separators between buttons.

Kendo Grid has a toolbar in which you can add buttons to the top of the grid. The grid's toolbar by default does not have any functionality to add a separator. Since is it not available by default, we will have to use the below hack to implement it.

 

Add the below css class to your css file,

.toolbarSeparater {
        background-color: transparent;
        border: none;
        cursor: default;
        padding-right: 5px;
        padding-left: 5px;
    }

We hid the button background and added some padding, and then in the Kendo Grid element, add the below to the toolbar section:

.ToolBar(toolbar =>
 {
   toolbar.Create();           toolbar.Custom().Text("|").HtmlAttributes(new { onclick = "return false;", @class = "toolbarSeparater" });
   toolbar.Save();
 })

We make the button unclickable by adding return false.

 

So your Kendo Grid should look like below:

<div class="col-sm-12">
        @{ Html.Kendo().Grid<Models.ABCViewModel>()
                        .Name("gridAbc")
                        .Columns(columns =>
                        {
                            columns.Bound(c => c.ID);
                        })
                        .Resizable(r => r.Columns(true))
                        .Pageable(pager => pager.Refresh(true))
                        .ToolBar(toolbar =>
                        {
                            toolbar.Create();
                            toolbar.Custom().Text("|").HtmlAttributes(new { onclick = "return false;", @class = "toolbarSeparater" });
                            toolbar.Save();
                        })
                        .Filterable()
                        .Sortable()
                        .Render();
        }
    </div>

Example of how the grid toobar will look:

 

 

This can also be achieved using Toolbar template,

 

https://demos.telerik.com/aspnet-mvc/grid/toolbar-template 

 

References

 

https://demos.telerik.com/aspnet-mvc/grid