More than two levels in the Schedule

[Nikita]

Hi,

Trying to work out the scheduler for our needs, but stumble upon a problem. Please advise on how to use hierarchy grouping for multiple levels (more than two).

Please consider example from here: https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource-grouping

Here is what I'm doing:

- moving PROJECT 3 to a separate resource (name: 'SubProjects')

- setting groupId for it to be the child of PROJECT 1

- adding a new resource into the template

- adding 'SubProjects' to the group.resources

As a result events are not displayed:

The code is here: https://stackblitz.com/edit/angular-9wp6gq

Also, in such configuration, it seems that it is not possible to implement a tree like this:

-root

--sub

---leaf

--leaf

In this case last leaf would be displayed as folder, but I guess it shouldn't.

Thanks!

[Karthigeyan Krishnamurthi]

Hi Nikita, 

 

Syncfusion greetings. 

 

In your sample id is not mapped correctly for resources which is the cause. Kindly refer the below code example. 

https://stackblitz.com/edit/angular-9wp6gq-h1hqwv?file=app.component.ts 

 

<e-resources> 

                <e-resource field='ProjectId' title='Choose Project' [dataSource]='projectDataSource' name='Projects' 

                    textField='text' idField='id' colorField='color'> 

                </e-resource> 

                <e-resource field='SubProjectId' title='Choose Sub-Project' [dataSource]='subProjectDataSource' name='SubProjects' 

                    textField='text' idField='id' colorField='color' groupIDField='groupId'> 

                </e-resource> 

                <e-resource field='TaskId' title='Category' [dataSource]='categoryDataSource' name='Categories' 

                    textField='text' idField='id' groupIDField='groupId' colorField='color'> 

                </e-resource> 

            </e-resources> 

 

public projectDataSource: Object[] = [ 

        { text: 'PROJECT 1', id: 1, color: '#cb6bb2' }, 

        { text: 'PROJECT 2', id: 2, color: '#56ca85' } 

    ]; 

    public subProjectDataSource: Object[] = [ 

        { text: 'SUB-PROJECT', id: 3, color: '#df5286', groupId: 1 }, 

        { text: 'SUB-PROJECT', id: 4, color: '#df5286', groupId: 2 }, 

    ]; 

    public categoryDataSource: Object[] = [ 

        { text: 'Nancy', id: 5, groupId: 3, color: '#df5286' }, 

        { text: 'Steven', id: 6, groupId: 3, color: '#7fa900' }, 

        { text: 'Robert', id: 7, groupId: 4, color: '#ea7a57' }, 

        { text: 'Smith', id: 8, groupId: 4, color: '#5978ee' } 

    ]; 

 

 

Regards, 

Karthi 

[Nikita]

Hi Karthi,

Thanks for the reply.

But, in your example - events are still not displayed. But if I remove hierarchy in the group property - events start appear again.

public group: GroupModel = {

resources: ['Categories']

};

Moreover, if I want to move 'NANCY' to be a child of 'PROJECT 1' (groupId: 1 ) - it just disappears.

Thanks,

Nikita

[Karthigeyan Krishnamurthi]

Hi Nikita,  

  

Thanks for the update. 

 

We suspect that resources id is not mapped correctly in your data collection which could be the cause, kindly refer below. 

https://stackblitz.com/edit/angular-9wp6gq-lufflm?file=app.component.ts 

 

dataSource: [{ 

      Id: 1, 

      Subject: 'Explosion of Betelgeuse Star', 

      StartTime: new Date(2018, 3, 4, 9, 0), 

      EndTime: new Date(2018, 3, 4, 10, 0), 

      ProjectId: 1, 

      SubProjectId: 3, 

      TaskId: 6 

    }] 

 

The child resource collection should be defined immediate next to its parent collection. For example, Nancy collection should be defined with in subProjectDataSource like below. 

 

public group: GroupModel = { 

    resources: ['Projects', 'SubProjects', 'Categories'] 

  }; 

  public projectDataSource: Object[] = [ 

    { text: 'PROJECT 1', id: 1, color: '#cb6bb2' }, 

    { text: 'PROJECT 2', id: 2, color: '#56ca85' } 

  ]; 

  public subProjectDataSource: Object[] = [ 

    { text: 'SUB-PROJECT1', id: 3, color: '#df5286', groupId: 1 }, 

    { text: 'SUB-PROJECT2', id: 4, color: '#df5286', groupId: 2 }, 

    { text: 'Nancy', id: 5, groupId: 1, color: '#df5286' } 

  ]; 

  public categoryDataSource: Object[] = [ 

    { text: 'Steven', id: 6, groupId: 3, color: '#7fa900' }, 

    { text: 'Robert', id: 7, groupId: 4, color: '#ea7a57' }, 

    { text: 'Smith', id: 8, groupId: 4, color: '#5978ee' } 

  ]; 

 

Regards, 

Karthi 

[Nikita]

Hi Karthi,

Yes, that is perfect! Thanks!

That leaves me me just a one question. In your example "Nancy" is a folder, but should be a leaf, based on the logic of data. Is it possible to make it leaf instead of folder?

Thanks,

Nikita

[Karthigeyan Krishnamurthi]

Hi Nikita, 

 

We are happy that our solution fulfilled your requirement. 

 

We log the bug report for the reported case and the fix will be included in our upcoming Volume 2, 2019 main release which is excepted to be rollout by the end of June 2019. 

https://www.syncfusion.com/feedback/7042/arrow-icon-is-displaying-for-parent-resource-which-has-no-child 

 

Regards, 

Karthi 

[Nikita]

Perfect!

Thanks,

Nikita

[Karthigeyan Krishnamurthi]

Most welcome Nikita 😊