Persisting the State of the ExpansionPanel

Environment

Product

Progress® Kendo UI for Angular ExpansionPanel

Description

How can I persist the expand and collapse state of the Kendo UI for Angular ExpansionPanel?

Solution

To persist the expand and collapse state of the Kendo UI for Angular ExpansionPanel, or load its previously stored state, use the following approach:

1. Render the ExpansionPanel components dynamically with the help of a data array that contains an item for every component instance. Configure the data items to include a field for the current expanded state of each ExpansionPanel and bind it to the expanded property of the component.

   html

   <kendo-expansionpanel
       *ngFor="let item of items; index as i"
       [title]="item.country"
       [subtitle]="item.continent"
       [(expanded)]="item.expanded">
       <div class="content">
           <span class="content-text">{{ item.text }}</span>
       </div>
   </kendo-expansionpanel>

2. Extract the value of the expanded field for each item from the array and use a desired caching mechanism to store the obtained values. This example demonstrates how to store the expansion state in the LocalStorage of the browser.

   ts

   public saveExpansionState(): void {
       const expansionState = this.items.map((item) => item.expanded);
   
       // Save the expansion state to local storage
       localStorage.setItem('expansionState', JSON.stringify(expansionState));
       this.savedStateExists = true;
   }

3. Load the previously stored values (if any) and update the expanded state of the corresponding ExpansionPanel items according to these values.

   ts

   public loadExpansionState(): void {
       const savedState = localStorage.getItem('expansionState');
   
       if (savedState) {
           const expansionState = JSON.parse(savedState);
   
           // Set the expansion state for each item
           this.items.forEach((item, index) => {
               if (expansionState[index] !== undefined) {
                   item.expanded = expansionState[index];
               }
           });
       }
   }

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

See Also

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