This is a migrated thread and some comments may be shown as answers.

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

1 Answer 141 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 15 Nov 2018, 01:13 AM

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

 

 

 

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 16 Nov 2018, 12:18 PM
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
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.
Tags
PanelBar
Asked by
Andrew
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or