Space/Separator in PanelBar

2 posts, 0 answers
  1. Joel
    Joel avatar
    132 posts
    Member since:
    Jun 2018

    Posted 06 Aug 2019 Link to this post

    How do I put a spacer or a separator between entries in the PanelBar?  The Items in my PanelBar have some grouping that I'd like to show visually.  Old-school Menus used to let the developer put a dash (-) in the entry in order to visually show a separator.
  2. Veselin Tsvetanov
    Veselin Tsvetanov avatar
    1124 posts

    Posted 09 Aug 2019 Link to this post

    Hi Joel,

    The PanelBar does not offer support for separator elements out-of-the-box. Nevertheless, you could inject them manually at the required places. Lets say that you use a class named insert-separator-after which would signify elements after which a separator should be inserted:
      <li class="insert-separator-after">Monday</li>
      <li class="insert-separator-after">Thursday</li>

    Then after the PanelBar widget has been loaded you could insert the separator elements:
    kendo.syncReady(function () {
        $('.insert-separator-after').after('<li class="k-item k-separator">');

    Here you will find a sample Dojo implementing the above suggestion.

    Veselin Tsvetanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top