Expand/Collapse arrow fails to appear if a class matching a certain pattern appears anywhere in the header

[Andrew]

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 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.

See this example. https://dojo.telerik.com/EwAsaKAf/3

 

 

 

[Dimitar]

Hello Andrew,

In general, the current implementation of the PanelBar does not provide a way to customize the header. The recommended way to approach this would be to implement a headerTemplate option for the widget. Thus, I would strongly encourage you to log this as a new feature request in the Kendo UI Feedback Portal. Based on the demand and gathered feedback from the rest of the community, this feature could be implemented in a future release of the suite.

You are also indeed correct that with the current state, adding an inline icon breaks the expand/collapse icon. As a workaround I would suggest the following approach:

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   ")
  }
});

The above is also demonstrated on the following Dojo example.

Regards,
Dimitar
Progress Telerik