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

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    39 posts
    Member since:
    Dec 2010

    Posted 14 Nov 2018 Link to this post

    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

     

     

     

  2.
  3. Dimitar
    Admin
    Dimitar avatar
    812 posts

    Posted 16 Nov 2018 Link to this post

    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.
Back to Top