No toolbar on new gantt chart

[Andrew Tarr]

Hello,

I am following the example for and new gantt chart with resources from here:https://stackblitz.com/run?file=app%2Fapp.module.ts

When i am done, i have the same table, but no toolbar, or header icons. Not sure what i could be missing, i am using the latest NPM packages.

Here is the code:

import{Component,OnInit,AfterContentInit}from'@angular/core';

import{resourceData,resourceResources}from'./data';

import{RowDataBoundEventArgs,TaskFieldsModel,ResourceFieldsModel,EditSettingsModel}from'@syncfusion/ej2-angular-gantt';

declarevar$:any;

@Component({

selector:'analyze-roadmap-chart',

templateUrl:'./roadmap-chart.component.html',

styleUrls:['./roadmap-chart.component.sass']

})

exportclassRoadmapChartComponentimplementsOnInit{

publiccolumns:object[];

publicdata:object[];

publiceditSettings:EditSettingsModel;

publiclabelSettings:object;

publicprojectEndDate:Date;

publicprojectStartDate:Date;

publicresourceFields:ResourceFieldsModel;

publicresources:object[];

publicsplitterSettings:object;

publictaskbarTemplate:any;

publictaskSettings:TaskFieldsModel;

publictimelineSettings:object;

publictoolbar:string[];

publicngOnInit():void{

this.data=resourceData;

this.resources=resourceResources;

this.taskSettings={

id:'TaskID',

name:'TaskName',

startDate:'StartDate',

duration:'Duration',

progress:'Progress',

child:'subtasks',

work:'work',

resourceInfo:'resources'

};

this.resourceFields={

id:'resourceId',

name:'resourceName',

unit:'unit'

};

//this.columns=[

//{field:'TaskID',visible:false},

//{field:'TaskName',headerText:'Name',width:'180'},

//{field:'resources',headerText:'Links',width:'160'},

//{field:'work',headerText:'Details',width:'300'},

//{field:'Duration',headerText:'StartDate',width:'100'},

//{field:'taskType',headerText:'AnticipatedReleaseDate',width:'140'}

//];

this.editSettings={

allowAdding:true,

allowEditing:true,

allowDeleting:true,

allowTaskbarEditing:true,

showDeleteConfirmDialog:true,

};

this.toolbar=['Add','Edit','Update','Delete','Cancel','ExpandAll','CollapseAll'];

this.splitterSettings={

columnIndex:5.1

};

this.labelSettings={

rightLabel:'resources'

};

this.projectStartDate=newDate('03/28/2019');

this.projectEndDate=newDate('07/28/2019');

this.timelineSettings={

showTooltip:true,

timelineUnitSize:80,

updateTimescaleView:true,

weekStartDay:1,//SUNDAY==0

weekendBackground:'red',

topTier:{

format:'MMMyyy',

unit:'Month',

count:1,

},

bottomTier:{

format:'MMMdd',

unit:'Week',

}

};

}

}

<divclass="control-section">

<ejs-ganttid="resources"height="430px"[dataSource]="data"[taskFields]="taskSettings"[columns]="columns"[treeColumnIndex]="0"

[splitterSettings]="splitterSettings"[labelSettings]="labelSettings"[editSettings]="editSettings"[enableContextMenu]='true'

height="450px"[allowSelection]="true"[projectStartDate]="projectStartDate"[projectEndDate]="projectEndDate"[highlightWeekends]="true"

[toolbar]="toolbar"[resourceFields]="resourceFields"(rowDataBound)="rowDataBound($event)"(dataBound)="actionComplete($event)"

[timelineSettings]="timelineSettings"

[resources]="resources"workUnit="Hour">

ejs-gantt>

div>

We are also using the auto-generated materials.scss file from your generator, i validated that some of the icon classes exists in our file.

Toolbar in Sample:

Toolbar (none) in local version:

[Pooja Priya Krishna Moorthy]

Hi Andrew, 

We have prepared the sample with the code snippet shared by you. We are not able to reproduce the reported issue. Please find the below sample link. 

https://stackblitz.com/edit/angular-mw2nz3?file=app.component.html 

Also ensure that you have injected ToolbarService in the provider section of the AppModule. Please refer the below documentation link for more reference. 

https://ej2.syncfusion.com/angular/documentation/gantt/toolbar/ 

If the issue still persists, please share more details on this. We note that, you have referred roadmap-chart.component.sass file and also from the screenshot, we note that task name column is rendered with different style. Do you over-ride any CSS for Gantt component? 

Else please share us the issue reproduceable sample, so that we will check and provide you a solution.  

Regards, 

Pooja K. 

[Andrew Tarr]

Thanks!

I was missing the ToolbarService provider in the app.module.ts file. 

[Pooja Priya Krishna Moorthy]

Hi Andrew, 

Thanks for the update. 

We are happy that you are issue has been resolved. 

Please get back to us if you would require further assistance on this. 

Regards, 

Pooja K.