Expanding/Collapsing the ExpansionPanel On Arrow Button Click

Environment

Product

Progress® Kendo UI® for Angular ExpansionPanel

Description

When using the Kendo UI for Angular ExpansionPanel, you might encounter a scenario where you need the component to expand or collapse only when the arrow icon is clicked, instead of triggering this behavior by clicking anywhere on the panel. This adjustment allows for more flexibility in user interaction, especially when you want to include other components or buttons within the title area.

This Knowledge Base article also answers the following questions:

• How can I prevent the ExpansionPanel from expanding or collapsing when the title is clicked?
• How to make the ExpansionPanel expand/collapse exclusively through the arrow button?

Solution

To achieve the desired behavior where the ExpansionPanel only expands or collapses through a click on the arrow icon:

1. Prevent the default expand/collapse behavior by handling the action event and calling the preventDefault() method.

   html

   <kendo-expansionpanel title="Colombia" (action)="onAction($event)">
       ...
   </kendo-expansionpanel>

   ts

   public onAction(e: ExpansionPanelActionEvent): void {
       e.preventDefault();
   }

2. Attach the generic click event to the expand/collapse arrow icon and programmatically update the expanded property of the ExpansionPanel based on the clicked icon.

   html

   <kendo-expansionpanel title="Colombia" [expanded]="expandedStateColombia" ...>
       ...
   </kendo-expansionpanel>

   ts

   public ngAfterViewInit(): void {
       this.addArrowControl();
   }
   
   private addArrowControl(): void {
       const expandCollapseIndicators = document.querySelectorAll(
         '.k-expander-indicator'
       );
       expandCollapseIndicators.forEach((indicator, index) => {
           indicator.addEventListener('click', () => {
               if (index === 0) {
                   this.expandedStateColombia = !this.expandedStateColombia;
               }
               ...
             });
       });
   }

The following example demonstrates the suggested approach in action.

Change Theme

Theme

Loading ...

See Also

• Kendo UI for Angular ExpansionPanel Overview
• ExpansionPanel API Reference
• Interaction Modes of the ExpansionPanel