Telerik Product and Version
|
Kendo UI Complete version 2016.3 1118
|
|
Supported Browsers and Platforms
|
Google Chrome, Windows 10 64 bit
|
|
Components/Widgets used (JS frameworks, etc.)
|
Kendo Grid |
PROJECT DESCRIPTION
In a standalone Kendo Toolbar, using Razor, is easy to create a ButtonGroup and a Separator as items, but in a Kendo Grid toolbar, creating toggle buttons and separators is a different story.
The difference between implementations of toggle buttons in Kendo native Toolbar and Kendo Grid toolbar is that in second one you must handle the click event for each button and you need to take care with active state for all buttons from a group.
You can see also how to create a separator in a Kendo Grid toolbar, in following markup section.
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<div class='k-toolbar' style="display:inline-block;" data-overflow="auto">
<label class="category-label" for="category">Toggle buttons</label>
</div>
<div class='k-toolbar' style="display:inline-block;" data-overflow="auto">
<div class='k-separator'> </div>
</div>
<div class='k-toolbar' style="display:inline-block;" data-overflow="auto">
<div data-overflow="auto" class="k-button-group" style="visibility: visible;">
<a href tabindex="0" class="k-toggle-button k-button k-group-start" data-group="toggleGroup" id="toggleOdd" data-overflow="auto" style="margin: 0 0 0 -5px;">Odd</a>
<a href tabindex="0" class="k-toggle-button k-button" data-group="toggleGroup" id="toggleEven" data-overflow="auto" style="margin: 0 0 0 -5px;">Even</a>
<a href tabindex="0" class="k-toggle-button k-state-active k-button k-group-end" data-group="toggleGroup" id="toggleAll" data-overflow="auto" style="margin: 0 0 0 -5px;">All</a>
</div>
</div>
</div>
</script>
In the beginning of the click event function is need to prevent default action to be triggered, next to set current button to active state and the other buttons to no active state, then add the action itself for button.
$("#toggleOdd").on("click", function (ev) {
ev.preventDefault();
$("#toggleOdd").removeClass("k-state-active").addClass("k-state-active");
$("#toggleEven").removeClass("k-state-active");
$("#toggleAll").removeClass("k-state-active");
...
});
...
DEMO:
http://dojo.telerik.com/UyaHo