Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 02 Mar 2021 15:37 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:
1 comment
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