This is a migrated thread and some comments may be shown as answers.

Space/Separator in PanelBar

1 Answer 111 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 2
Iron
Iron
Iron
Joel asked on 06 Aug 2019, 07:09 PM
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.

1 Answer, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 09 Aug 2019, 09:01 AM
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.
Tags
PanelBar
Asked by
Joel
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or