Styled Content in Panel Headers

[Ashleigh L]

We want to use a Kendo PanelBar for a section of our page, but we need to be able to put styled content into the header - at minimum a span, but ideally divs and other HTML. 

Using the attached image as an example, we want to place the grade and pass/fail icon into the header, while being able to customize the font size (and for that matter, the icon is an <i> tag itself).

 

[Dimo]

Hi shimmoril,

Custom content can be placed in the PanelBar's headers, however you are limited to using inline elements only (span, a, em, strong, img, etc.). Using block elements such as div and p is theoretically possible, but it would make the HTML markup invalid from web standards point of view.

Here is a simple example. If you apply enough custom classes to the custom HTML tags, you will be able to style them, according to your preferences.

http://dojo.telerik.com/OhIdi

Also note that custom clickable elements inside the header must prevent event bubbling, so that the PanelBar does not trigger item expand/collapse.

Regards,
Dimo
Telerik

 

 

[Ashleigh L]

Thanks Dimo, we'll start from there.