Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 19 Oct 2026 11:15 by ADMIN
Andrew
Created on: 18 Nov 2018 23:31
Category: Kendo UI for jQuery
Type: Bug Report
0
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. https://dojo.telerik.com/EwAsaKAf/3

I also posted a forum message here: https://www.telerik.com/forums/expand-collapse-arrow-fails-to-appear-if-a-class-matching-a-certain-pattern-appears-anywhere-in-the-header   

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

Attached Files:
2 comments
ADMIN
Vasko
Posted on: 19 Oct 2026 11:15

Hello,

We reviewed this issue with the latest version 2026.3.1015 of the product, and it no longer reproduces. We are closing this item as Completed. If you still encounter the problem, please share updated details and we will investigate it again.

Regards,
Vasko
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Dimitar
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:
<li>
  <span>
    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>
  </span>
  <div>You will find the arrow is not there, or disappeared</div>
</li>

2) Subscribe to the expand and collapse events of the PanelBar and toggle the icon class:
$("#theList").kendoPanelBar({
  expand: function(e) {
    $(e.item).find(".k-panelbar-expand").removeClass("k-i-arrow-60-down").addClass("k-i-arrow-60-up");
  },
  collapse: function(e) {
    $(e.item).find(".k-panelbar-expand").removeClass("k-i-arrow-60-down").addClass("k-i-arrow-60-down");
  }
});


Regards,
Dimitar
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.
Create an account Log In
View
Type
Status
Category