Gantt persistence scoping

[JACQUES MICHEL HACHE]

Hello,

When using enablePersistence=TRUE, the gantt saves its state in local storage. We have multiple instances of the gantt, each with their own states. How to save the state of multiple gantts? Is there a way to set and ID on the local storage key?

[Ajithkumar Gopalakrishnan]

Hi Jacques,

Greetings from Syncfusion Support,

To achieve your requirement, you can scope the persistence of multiple Gantt charts in an Angular application by customizing the local storage key. By default, when enablePersistence is set to true, Syncfusion's Gantt Chart stores its state using a generic key in localStorage. To differentiate multiple instances, you can override the persistence storage key with a unique ID or name.

// First Gantt chart

<button (click)="saveState('gantt1')">Save State</button>

<button (click)="loadState('gantt1')">Load State</button>

<ejs-gantt #gantt1 id="Gantt_1"  height="430px"

        [enablePersistence]="true">

        ...

</ejs-gantt>

// Second Gantt chart

<button (click)="saveState('gantt2')">Save State</button>

<button (click)="loadState('gantt2')">Load State</button>

<ejs-gantt #gantt2 id="Gantt_2" 

    [enablePersistence]="true">

    ...

</ejs-gantt>

@ViewChild('gantt1', { static: false }) gantt1!: GanttComponent;

@ViewChild('gantt2', { static: false }) gantt2!: GanttComponent;

ngAfterViewInit() {

    this.loadState('gantt1');

    this.loadState('gantt2');

}

saveState(ganttId: string) {

    const ganttObj = ganttId === 'gantt1' ? this.gantt1 : this.gantt2;

    const state = ganttObj.getPersistData();

    localStorage.setItem(`gantt_state_${ganttId}`, state);

}

   

loadState(ganttId: string) {

    const ganttObj = ganttId === 'gantt1' ? this.gantt1 : this.gantt2;

    const state = localStorage.getItem(`gantt_state_${ganttId}`);

    if (state) {

      ganttObj.setProperties(JSON.parse(state));

    }

}

You can find a working example on StackBlitz.  

For more information, you may refer to the following link:

https://ej2.syncfusion.com/angular/documentation/gantt/state-persistence

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G

[JACQUES MICHEL HACHE]

There seem to a be alot of logic to handle this simple use case. Is there a way to have the component handle all of this by itself? 


In the example, saving and loading are done manually, will [enablePersistence]="true"  cause a conflict?

Thanks for the quick response

[Sridharan Jayabalan]

Jacques,

 

Sorry for the confusion. Ignore the previously suggested approach. Instead, assign different IDs to your Gantt components (e.g., Gantt_1, Gantt_2, etc.). This way, the local storage will automatically store them separately. Refer to the attached screenshot for reference.

 

Note: Previously, we manually stored values in localStorage. Now, the values are automatically stored based on the assigned Gantt chart IDs. As a result, there are no conflicts when using the enablePersistence property.

 

Steps to verify:

1. Run the sample.
2. Open the console and execute localStorage—you won’t see any Gantt data initially.
3. Resize the splitter for Gantt_1, then refresh the Gantt chart.
4. Run localStorage again—you will now see entries for both Gantt charts.
5. To check the splitter position values, run: localStorage.getItem('ganttGantt_1') & localStorage.getItem('ganttGantt_2')
6. This will show how the persistence data is stored separately for each Gantt chart.

Code-Snippet:   

app.component.html:-

 

<ejs-gantt #gantt1 id="Gantt_1" >

</ejs-gantt>

 

 

 <ejs-gantt #gantt2 id="Gantt_2" >

</ejs-gantt>

 

 

 

 

 

 

Regards,

Sridharan