Our state of the art Gantt chart


Post by uniyal.aakash »

I have N number of Gantt charts in being rendered multiple times in the same page through a ngFor loop.

Gantt Chart is in a component and that component can get rendered multiple times on a same page.

Weird behavior i noticed was when I expanded a Task in 1 Gantt chart, it sent that command to all other Gantt charts too which were rendered in that page and the same row got opened in all other charts too.

I want all Gantt chart instances to behave independently.

What can be done ?


Post by marcio »

Hi uniyal.aakash,

Are the Gantt Charts using the same project model?? If yes, the behavior you described is expected, if you want the charts to behave independently, you need to set up them with different project models.

<bryntum-gantt
    [project]           = "project"
	...other configs
</bryntum-gantt>
<bryntum-gantt
    [project]           = "project2"
	...other configs
</bryntum-gantt>

Best regards,
Márcio


Post by uniyal.aakash »

Yes all components are creating a new Object of the ProjectModel and providing it to its copy of the Gantt Chart.
Everything is localized inside a component and then that component is itself looped multiple times.

      const project = new CustomProjectModel({
        autoLoad: false,
        transport: {
          load: {
            url: appConstants.urls.getReportData + '?programId=' + pId,
            sendAsFormData: true,
            method: 'POST',
            headers: sm
          }
        },

    taskStore: {
      dependencyIdField: 'id',
      readUrl: appConstants.urls.getReportData + '?programId=' + pId,
      useRestfulMethods: true,
      httpMethods: {
        read: 'POST'
      },
      headers: sm,
      params: {
        ReportId: '1301',
        ReportSetReportId: null,
        IsReportConsumption: true,
        Filters: JSON.stringify(this.reportParameters)
      }
    }
  });

  this.ganttConfig.project = project;
<bryntum-gantt
    [project]           = "ganttConfig.project"
.....

Post by marcio »

I see, could you please share a sample project with your structure (with ngFor and the configuration)?? With that will be easier to help you with this issue.

Best regards,
Márcio


Post by uniyal.aakash »

This problem is easily replicable in any of the existing sample projects.

If you would take any Example project in Gantt chart (I took Roll up one for Angular) and take all the code of the app.component level (which is the Gantt chart related code) and make a child-component out of it (app-gantt-chart) and in app.component.html render that child component twice or thrice like

<app-gantt-chart></app-gantt-chart>
<app-gantt-chart></app-gantt-chart>

Then you would have more than 1 Gantt chart on screen, if you close/open or do any operation on 1 Gantt chart, the other would imitate the first one without manual intervention.


Post by marcio »

I used the Bryntum's inline-data Angular demo, and set up as you suggested.

<!-- BryntumDemoHeader component is used for Bryntum example styling only and can be removed -->
<bryntum-demo-header></bryntum-demo-header>

<app-gantt-chart></app-gantt-chart>
<app-gantt-chart></app-gantt-chart>
<app-gantt-chart></app-gantt-chart>

And just moved the component code to a child one (no changes). And that worked just fine, each Gantt worked independently, without affecting the others.

I'm checking in the latest version, FYI. So the example will be needed to provide better assistance.

Best regards,
Márcio


Post Reply