Space/Separator in PanelBar

2 posts, 0 answers
  1. Joel
    Joel avatar
    94 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
    Admin
    Veselin Tsvetanov avatar
    1080 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:
    <ul>
      <li class="insert-separator-after">Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
      <li class="insert-separator-after">Thursday</li>
      <li>Friday</li>
    </ul>

    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.

    Regards,
    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