Gantt Chart

[vin]

I am trying to use the Custom example from https://ej2.syncfusion.com/angular/documentation/gantt/task-scheduling/

The chart is not rendering properly

import { GanttModule } from '@syncfusion/ej2-angular-gantt';

import { Gantt } from '@syncfusion/ej2-gantt';

import { ToolbarItem, EditSettingsModel } from '@syncfusion/ej2-angular-gantt';

encapsulation: ViewEncapsulation.None

 <e-tabitem [header]='headerText[1]'>

                    <ng-template #content>

                        <ejs-gantt id="ganttDefault" [dataSource]="data" taskMode= "Custom" [treeColumnIndex]="1" validateManualTasksOnLinking= "true" [taskFields]="taskSettings" [editSettings]="editSettings" [toolbar]="toolbar" [columns]="columns"></ejs-gantt>

                    </ng-template>

                </e-tabitem>

I want to achieve something like this

[Pooja Priya Krishna Moorthy]

Hi Vin, 

From the code snippet shared, we suspect that you are rendering Gantt inside tab element. We have prepared a sample by rendering the Gantt inside tab. We are able to render Gantt without any issue. Please find the below sample link. 

https://stackblitz.com/edit/angular-ajyhqc?file=app.component.ts 

Please share us below details. 

1. Do you set any size for the tab element or override any css?
2. Do you render inside hidden element. If yes, once ensure by refreshing the Gantt when corresponding tab is clicked using selected event of tab control as like below code example.

 

public selected(args) { 

if (args.selectedIndex === 2) { 

    var obj = document.getElementById("TaskMode1").ej2_instances[0]; 

    obj.refresh(); 

} 

} 

It will be very helpful if you modify our provided sample, to check from our end and provide you a proper solution. 

 

Regards, 

Pooja K. 

[vin]

Looks like styles are not loading properly, i moved it out of TABS but still same issue

I think this HTML (Style) is not loading properly for the Gantt chart

<div class="e-split-bar e-split-bar-horizontal e-resizable-split-bar e-last-bar" tabindex="0" role="separator" aria-orientation="horizontal" style="width: 4px; order: 1;"><button tabindex="-1" aria-label="Toggle navigation" type="button" class="e-navigate-arrow e-arrow-left e-icon-hidden"></button><div class="e-resize-handler e-icons" style="width: 4px;"></div><button tabindex="-1" aria-label="Toggle navigation" type="button" class="e-navigate-arrow e-arrow-right e-icon-hidden"></button></div>

[Pooja Priya Krishna Moorthy]

Hi Vin, 

We are able to reproduce the issue, when one of the Gantt’s dependent component ej2-layouts style was not referred. Please refer the below documentation link to know more about this. 

https://ej2.syncfusion.com/angular/documentation/gantt/getting-started/#adding-css-reference 

We can also add the style in index.html as shown below, instead of adding styles for each dependent components as shown in the documentation. 

 

 

<link rel='nofollow' href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> 

 

Sample  - https://stackblitz.com/edit/angular-ojw6cp?file=main.ts 

 

Regards, 

Pooja K. 

[vin]

Thanks!!

[Pooja Priya Krishna Moorthy]

Hi Vin, 

Most welcome. 

Please get back to us if you have any other queries. 

Regards, 

Pooja K.