Pending Review
Last Updated: 23 Nov 2018 15:54 by ADMIN
Created on: 18 Nov 2018 23:31
Category: Kendo UI for jQuery
Type: Bug Report
kendoPanelBar: Expand-Collapse icon fails to render if header content contains any element with class matching pattern k-i-arrow*

This is an error that took us an hour to figure out.

We are using the right-arrow icon as part of the content within a collapsible header to represent a state transition. (See image)

We found that the expand/collapse icon did not appear.


Further investigation reveals that if the header content contains a span with a class matching the regular expression k-i-arrow.* then the expand/collapse icon doesn't work. It could contain anything else, it was just that one class pattern that threw it.

See this example.

I also posted a forum message here:   

This is clearly a bug, and one that I suspect can be fixed easily.

1 comment
Posted on: 23 Nov 2018 15:54
Hello Andrew,

The PanelBar uses the .k-icon class internally to build the markup for the items and transforms it further. Modifying this would require also changing the rendering of the widget and introducing a new templates feature that allows to easily customize both the header and content of each item. Thus, this is rather considered a limitation of the current implementation rather than a bug. 

There is a feature request for providing templates functionality for the PanelBar. If you believe that such a feature is a must-have for the widget, I would suggest to upvote the item. Based on the gathered feedback and demand for this feature, it could be scheduled for future implementation.

As a workaround for using the Kendo UI Web Font icons, you could use the approach described in the linked forum thread:

1) When adding custom icons to an item include the expand icon:
    This header has the arrow right icon.
    <span class="k-icon k-i-arrow-right"></span>
    <span class="k-icon k-panelbar-expand k-i-arrow-60-down"></span>
  <div>You will find the arrow is not there, or disappeared</div>

2) Subscribe to the expand and collapse events of the PanelBar and toggle the icon class:
  expand: function(e) {
  collapse: function(e) {

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.