Collapsable icon not showing

[vin]

WHy i am NOT seeing collapse/expand icon next to Portfolio 1 and program 1 , both have child item to them?

Also can we make the chart readOnly/not editable?

 <ejs-gantt id="TaskMode1" height="100%" [dataSource]="data" [taskFields]="taskSettings"

                            [columns]="columns" [treeColumnIndex]="1" [splitterSettings]="splitterSettings"

                            [labelSettings]="labelSettings" [editSettings]="editSettings" [allowSelection]="true"

                            [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate"

                            [highlightWeekends]="true" [toolbar]="toolbar" taskMode="Custom">

Something like this

[Gopinath Muniraj]

Hi Vin, 

Thanks for contacting Syncfusion support. 

Please find the below response. 

S. No	Query	Syncfusion Comments
	Expand/Collapse icon not visible	Please ensure that you are mapping the correct column index in the treeColumnIndex property i.e., the TaskName column has the columnIndex 1. We suspect that, you are wrongly mapping that treeColumn index.    For example, in the below code snippet TaskName column is in the columnIndex 1, so that the expand or collapse icon is showing in correct position. Please refer the code snippet    [app.component.ts]  //....  this.columns =  [              { field: 'TaskID', visible: false },//columnIndex=0              { field: 'TaskName', headerText: 'Task Name'},// columnIndex=1              { field: 'isManual', headerText: 'Task Mode' }// columnIndex=2    ];  //...    We have prepared a sample for you reference. Please refer the sample link below.  Sample: https://stackblitz.com/edit/treecolumnindex?file=app.component.ts
	Non-editable/read-only Gantt	Yes. We can make the Gantt as readOnly or non-editable using the readOnly. If the property readOnly set as true, the Gantt can’t be editable. For better understanding, please refer this documentation link below.  Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/managing-tasks/#read-only-gantt

 

Please let us know if you need any further assistance on this. 

Thanks, 

Gopinath M 

[vin]

I copied your sample exactly, still the collapsable icon NOT showing

Did i miss some style or any dependancey?

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

import {  SelectionService, ResizeService,  ReorderService,   DayMarkersService  } from '@syncfusion/ej2-angular-gantt';

 this.data = [

      {

        'TaskID': 1,

        'TaskName': 'Portfolio 1',

        'StartDate': new Date('02/27/2017'),

        'EndDate': new Date('03/03/2017'),

        'Progress': '40',

        'isManual': false,

        'Children': [

          {

            'TaskID': 2, 'TaskName': 'Program 1', 'StartDate': new Date('02/27/2017'),

            'EndDate': new Date('03/03/2017'), 'Progress': '40',

            'Children':[{

              'TaskID': 1, 'TaskName': 'Project 1', 'StartDate': new Date('03/13/2017'),

              'EndDate': new Date('03/17/2017'), 'Progress': '40',

            },

            {

              'TaskID': 1, 'TaskName': 'Project 2', 'StartDate': new Date('03/13/2017'),

              'EndDate': new Date('03/17/2017'), 'Progress': '40',

            },{

              'TaskID': 1, 'TaskName': 'Project 3', 'StartDate': new Date('03/13/2017'),

              'EndDate': new Date('03/17/2017'), 'Progress': '40',

            }]

          },

          {

            'TaskID': 3, 'TaskName': 'Project X', 'StartDate': new Date('02/26/2017'),

            'EndDate': new Date('03/03/2017'), 'Progress': '40', 'isManual': false

          },

          {

            'TaskID': 4, 'TaskName': 'Program 3', 'StartDate': new Date('02/27/2017'),

            'EndDate': new Date('03/03/2017'), 'Duration': 5, 'Progress': '40',

            'Children':[{

              'TaskID': 1, 'TaskName': 'Project 1', 'StartDate': new Date('03/13/2017'),

              'EndDate': new Date('03/17/2017'), 'Progress': '40',

            }]

          }

        ]

      },

      {

        'TaskID': 5,

        'TaskName': 'Portfolio 2',

        'StartDate': new Date('03/05/2017'),

        'EndDate': new Date('03/09/2017'),

        'Progress': '40',

        'isManual': false,

        'Children': [

          {

            'TaskID': 6, 'TaskName': 'Program 1', 'StartDate': new Date('03/06/2017'),

            'EndDate': new Date('03/09/2017'), 'Progress': '40'

          },

          {

            'TaskID': 7, 'TaskName': 'Program 2', 'StartDate': new Date('03/06/2017'),

            'EndDate': new Date('03/09/2017'), 'Progress': '40',

          },

          {

            'TaskID': 8, 'TaskName': 'Program 3', 'StartDate': new Date('02/28/2017'),

            'EndDate': new Date('03/05/2017'), 'Progress': '40', 'isManual': false

          },

          {

            'TaskID': 9, 'TaskName': 'Program 4', 'StartDate': new Date('03/04/2017'),

            'EndDate': new Date('03/09/2017'), 'Progress': '40', 'isManual': false

          }

        ]

      },

      {

        'TaskID': 10,

        'TaskName': 'Portfolio 3',

        'StartDate': new Date('03/13/2017'),

        'EndDate': new Date('03/17/2017'),

        'Progress': '40',

        'Children': [

          {

            'TaskID': 11, 'TaskName': 'Program 1', 'StartDate': new Date('03/13/2017'),

            'EndDate': new Date('03/17/2017'), 'Progress': '40',

            'Children':[{

              'TaskID': 1, 'TaskName': 'Project 1', 'StartDate': new Date('03/13/2017'),

              'EndDate': new Date('03/17/2017'), 'Progress': '40',

            }]

          },

          {

            'TaskID': 12, 'TaskName': 'Program 2', 'StartDate': new Date('03/13/2017'),

            'EndDate': new Date('03/17/2017'), 'Progress': '40',

          },

          {

            'TaskID': 13, 'TaskName': 'Program 3', 'StartDate': new Date('03/13/2017'),

            'EndDate': new Date('03/17/2017'), 'Progress': '40',

          },

          {

            'TaskID': 14, 'TaskName': 'Program 4', 'StartDate': new Date('03/12/2017'),

            'EndDate': new Date('03/17/2017'), 'Progress': '40', 'isManual': false

          },

          {

            'TaskID': 15, 'TaskName': 'Program 5', 'StartDate': new Date('03/13/2017'),

            'EndDate': new Date('03/17/2017'), 'Progress': '40'

          }

        ]

      }

    ];

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css';

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';

@import '../node_modules/@syncfusion/ej2-gantt/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-diagrams/styles/material.css';

@import '../node_modules/@syncfusion/ej2-diagrams/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-gantt/styles/material.css';

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

[Punniyamoorthi Elangovan]

Hi Vin, 

We have analyzed your provide code snippet. The issue occurred due to dependent component CSS files are not referred properly in your application. Please refer the below code snippet 

Styles.css 

 

@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-gantt/styles/material.css'; 

 

You can find more information about this from below documentation. 

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

We have prepared sample for your reference, you can find the sample from below link 

Sample Link: https://www.syncfusion.com/downloads/support/forum/158192/ze/gantt175661843 

 

Regards, 

Punniyamoorthi

[vin]

Thanks

Have one more Q

Why is my chart showing dates from Jan when my dates are actually starting from 10/12/2020  to 11/13/2020?

Because of that chart lines are hiding!!

Can we add colors for different lines in graph?

And also dates are showing wrong!!

{
   "portfolioData":{
      "portfolioDetails":{
         "id":1,
         "notes":"Portfolio Root",
         "portfolioDetailId":10012,
         "programDetailId":0,
         "projectDetailId":0,
         "name":"testing new portfolio",
         "startDate":"2020-01-01T06:00:00+00:00",
         "endDate":"2020-12-31T06:00:00+00:00",
         "progress":20
      },
      "programs":[
         {
            "programDetails":{
               "id":2,
               "notes":"Program Under Portfolio",
               "portfolioDetailId":10012,
               "programDetailId":10012,
               "projectDetailId":0,
               "name":"testing new program",
               "startDate":"2020-10-08T05:00:00+00:00",
               "endDate":"2020-12-30T06:00:00+00:00",
               "progress":30
            },
            "projects":[
               {
                  "id":3,
                  "notes":"Project Under Program",
                  "portfolioDetailId":10012,
                  "programDetailId":10012,
                  "projectDetailId":10013,
                  "name":"testing new project",
                  "startDate":"2020-10-10T05:00:00+00:00",
                  "endDate":"2020-11-14T06:00:00+00:00",
                  "progress":41
               }
            ]
         }
      ]
   },
   "projectsUnderPortfolioList":[
     
   ]
}

[Gopinath Muniraj]

Hi Vin, 

Please find the below response. 

S. No	Query	Syncfusion Comments
	Why is my chart showing dates from Jan?	This is because you are mapped as start date for first task as ["startDate":"2020-01-01T06:00:00+00:00"].   If the project start date and project end date are not mapped in the Gantt, the project start date and end date will automatically calculate as minimum start date of task and maximum end date of the tasks respectively.   We suspect that you are not mapped the Project start date. So that the project start date is calculated from JAN 1, because this is the minimum start date mapped.  If you need to render the project from 10/12/2020 to 11/13/2020, Please set the project these dates as project start date and end date. Please find the code snippet below,  [app.component.ts]  this.projectStartDate= new Date('10/01/2020');  this.projectEndDate= new Date('11/20/2020');
	And also, dates are showing wrong!!	Did you mean the, parent task dates are not rendered as mapped in datasource? If yes, we would like to inform that, the start date and date of the parent tasks will be rendered based on its child tasks. For better understanding, start date of a parent task will be minimum start date of its child task and end date of the parent task will be maximum end date of the child task.
	Can we add colors for different lines in graph?	Please let us know did you mean to change the color of gridLines or changing the color of the taskbar. If you need to change the gridline color means we can change all gridlines as common color by overriding the existing class, else you mean the taskbar color change, we can change that based on our conditions. Please let us know your detail requirement on this. This information will be helpful for us to provide you the better solution as soon as possible.

 

Please let us know if you need any further assistance on this. 

Thanks, 

Gopinath M 

[vin]

I mean the chart dates do not match with JSONdates

1st one is

 "startDate":"2020-01-01T06:00:00+00:00",
  "endDate":"2020-12-31T06:00:00+00:00",

2ns one is 

"name":"testing new program",
  "startDate":"2020-10-08T05:00:00+00:00",
  "endDate":"2020-12-30T06:00:00+00:00",

3rd one is

 "startDate":"2020-10-10T05:00:00+00:00",
  "endDate":"2020-11-14T06:00:00+00:00",

Creating JSOn like this. for UTC dates dow need to assign differently to chart?

{

                'TaskID': proj.id,

                'TaskName': proj.name,

                'StartDate': new Date(proj.startDate),

                'EndDate': new Date(proj.endDate),

                'Progress': proj.progress,

                'isManual': false,

                "Predecessor": progO.TaskID

              

{

                'TaskID': p.id,

                'TaskName': p.name,

                'StartDate': new Date(p.startDate),

                'EndDate': new Date(p.endDate),

                'Progress': p.progress,

                'isManual': false,

                "Predecessor": portObj.TaskID

              

[vin]

Can i get answer for my Q pls?

[Punniyamoorthi Elangovan]

Hi Vin, 

We have analyzed your reported issue and screenshot. In your application you have assigned start date of the third task is (10/10/2020) Saturday, in Gantt if the task start date lies on the weekend then it will considered to week start date so the task rendered on (10/12/2020) Monday and the parent tasks start, end dates will be calculated based on the minimum start and maximum end date of it’s child records. This is default behavior of Gantt control, we can overcome this behavior by setting includeWeekend property as true. We have prepared the sample for your reference, you can find the sample from below link 

Link: https://stackblitz.com/edit/treecolumnindex-gmybfz?file=app.component.html 

Regards, 

Punniyamoorthi 

[vin]

For 1st item My end date is  "endDate":"2020-12-31T06:00:00+00:00"  , Why it is showing 11/13/2020?

For my 2nd item the end date is "endDate":"2020-12-30T06:00:00+00:00",  but still showing 11/13/2020?

for my 3rd item the end date is  "endDate":"2020-11-14T06:00:00+00:00", but it is showing 11/13/2020 !!!!

My Q is why it is NOT displaying the dates i am putting in?

Any updates pls

[Punniyamoorthi Elangovan]

Hi Vin, 

We have analyzed your screenshot.  In Gantt the default working time was 8 AM to 5 PM and if the end date("11/14/2020 06:00:00 AM") of the task lies before the default start time then it will considered to previous date(“11/13/2020 05:00:00 PM")  and this is the default behavior of the Gantt. The parent tasks start, end dates will be calculated based on the minimum start and maximum end date of it’s child records so the parent tasks end date also considered as (“11/13/2020 05:00:00 PM"). You can find the sample from below link 

Sample Link: https://stackblitz.com/edit/treecolumnindex-nylarb?file=data.ts 

Regards, 

Punniyamoorthi 

[vin]

Is there a way to show the dates as is without getting manipulated by chart?

[Punniyamoorthi Elangovan]

Hi Vin, 

We have achieved your requirement by setting day working time range as 0 to 23 using dayWorkingTime property. In the Gantt control, working hours in a day for a project can be defined by using the dayWorkingTime property. Based on the working hours, automatic date scheduling and duration validations for a task are performed. Please refer the below code snippet 

[HTML] 

<ejs-gantt [taskFields]="taskSettings [includeWeekend]="true" 

     [dayWorkingTime]="dayWorkingTime" > 

</ejs-gantt> 

 

[TS] 

 

export class AppComponent { 

public ngOnInit(): void { 

   //.. 

  this.dayWorkingTime = [ 

            {from: 0, 

            to: 23 } 

       ]; 

} 

} 

You can find the sample for this from below link 

Sample Link: https://stackblitz.com/edit/treecolumnindex-wzsvhn?file=app.component.ts 

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

Regards, 

Punniyamoorthi

[vin]

Thanks!!

[Punniyamoorthi Elangovan]

Hi Vin,  

We are glad to know that your requirement can be achieved with the solution we have provided.  

Please let us know if you require further assistance on this.  

Regards,  

Punniyamoorthi