Create toggle buttons in kendo grid toolbar

Thread is closed for posting
1 posts, 0 answers
  1. Mugurel
    Mugurel avatar
    2 posts
    Member since:
    Jan 2010

    Posted 12 Jan 2017 Link to this post

    Requirements

    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");
     
        ...

        });

       ...  
    DEMOhttp://dojo.telerik.com/UyaHo
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.