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