Post
Ask Question

Add Button Separator In Kendo Grid's Tool Bar

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,
  1. .toolbarSeparater {  
  2.         background-color: transparent;  
  3.         border: none;  
  4.         cursor: default;  
  5.         padding-right: 5px;  
  6.         padding-left: 5px;  
  7.     } 
We hid the button background and added some padding, and then in the Kendo Grid element, add the below to the toolbar section:
  1. .ToolBar(toolbar =>    
  2.  {    
  3.    toolbar.Create();           toolbar.Custom().Text("|").HtmlAttributes(new { onclick = "return false;", @class = "toolbarSeparater" });    
  4.    toolbar.Save();    
  5.  })   
We make the button unclickable by adding return false.
 
So your Kendo Grid should look like below:
  1. <div class="col-sm-12">  
  2.         @{ Html.Kendo().Grid<Models.ABCViewModel>()  
  3.                         .Name("gridAbc")  
  4.                         .Columns(columns =>  
  5.                         {  
  6.                             columns.Bound(c => c.ID);  
  7.                         })  
  8.                         .Resizable(r => r.Columns(true))  
  9.                         .Pageable(pager => pager.Refresh(true))  
  10.                         .ToolBar(toolbar =>  
  11.                         {  
  12.                             toolbar.Create();  
  13.                             toolbar.Custom().Text("|").HtmlAttributes(new { onclick = "return false;", @class = "toolbarSeparater" });  
  14.                             toolbar.Save();  
  15.                         })  
  16.                         .Filterable()  
  17.                         .Sortable()                         
  18.                         .Render();  
  19.         }  
  20.     </div> 
Example of how the grid toobar will look:
 
Buttons
 
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