tree not showing up in scheduler

Our pure JavaScript Scheduler component
Post Reply
User avatar
why
Posts: 19
Joined: Wed Aug 07, 2019 10:55 pm

tree not showing up in scheduler

Post by why » Sun Sep 15, 2019 3:37 am

if i configure the scheduler like this

Code: Select all

<BryntumScheduler
          ref={(s) => this._scheduler = s}

          startDate={new Date(2017, 1, 6, 8)}
          endDate={new Date(2017, 1, 9, 8)}

          treeFeature={this.store}
        />
and my store like this, it does not work

Code: Select all

private store = {
      tree: true,
      data: [
        {
          name: 'ABBA',
          iconCls: 'b-icon b-fa-users',
          children: [
            { name: 'Anni-Frid', iconCls: 'b-icon b-fa-user' },
            { name: 'Bjorn', iconCls: 'b-icon b-fa-user' },
            { name: 'Benny', iconCls: 'b-icon b-fa-user' },
            { name: 'Agnetha', iconCls: 'b-icon b-fa-user' }
          ]
        },
        {
          name: 'Roxette',
          iconCls: 'b-icon b-fa-users',
          children: [
            { name: 'Per', iconCls: 'b-icon b-fa-user' },
            { name: 'Marie', iconCls: 'b-icon b-fa-user' }
          ]
        }
      ]
    };
  
    columns: [
      { type: 'tree', field: 'name', text: 'Name', flex: 1 }
    ]

User avatar
saki
Core Developer
Core Developer
Posts: 158
Joined: Thu Mar 30, 2017 9:32 am

Re: tree not showing up in scheduler

Post by saki » Mon Sep 16, 2019 11:17 am

treeFeature takes boolean true as the value so in your app you should configure it as

Code: Select all

treeFeature={true}
The store above should actually be the resourceStore of the Scheduler.

User avatar
why
Posts: 19
Joined: Wed Aug 07, 2019 10:55 pm

Re: tree not showing up in scheduler

Post by why » Mon Sep 16, 2019 11:12 pm

the following still not working.

Code: Select all

<BryntumScheduler
          ref={(s) => this._scheduler = s}

          startDate={new Date(2017, 1, 6, 8)}
          endDate={new Date(2017, 1, 9, 8)}

          treeFeature={true}
          resourceStore = {this.rstore}

        />


private rstore = {
        tree: true,
          data: [
        {
          name: 'ABBA',
          iconCls: 'b-icon b-fa-users',
          children: [
            { name: 'Anni-Frid', iconCls: 'b-icon b-fa-user' },
            { name: 'Bjorn', iconCls: 'b-icon b-fa-user' },
            { name: 'Benny', iconCls: 'b-icon b-fa-user' },
            { name: 'Agnetha', iconCls: 'b-icon b-fa-user' }
          ]
        },
        {
          name: 'Roxette',
          iconCls: 'b-icon b-fa-users',
          children: [
            { name: 'Per', iconCls: 'b-icon b-fa-user' },
            { name: 'Marie', iconCls: 'b-icon b-fa-user' }
          ]
        }
      ]
    };

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2301
Joined: Fri Apr 01, 2016 11:08 am

Re: tree not showing up in scheduler

Post by pmiklashevich » Tue Sep 17, 2019 9:20 am

Hello @why,

According to the docs of resourceStore, it expects value to be an instance of Scheduler.data.ResourceStore
. So either create a new resource store manually based on your "rstore" config and pass it to the scheduler.resourceStore, or use scheduler.resources config to pass inline data (resource store will be created automatically).

Basically there are 3 things which are required to be able to show a tree:
1. Add "tree" feature.
2. Configure at least one column with { type : 'tree' }
3. Provide data in tree structure.
For example:

Code: Select all

let resources = [
        {
            name     : 'ABBA',
            iconCls  : 'b-icon b-fa-users',
            children : [
                { name : 'Anni-Frid', iconCls : 'b-icon b-fa-user' },
                { name : 'Bjorn', iconCls : 'b-icon b-fa-user' },
                { name : 'Benny', iconCls : 'b-icon b-fa-user' },
                { name : 'Agnetha', iconCls : 'b-icon b-fa-user' }
            ]
        },
        {
            name     : 'Roxette',
            iconCls  : 'b-icon b-fa-users',
            children : [
                { name : 'Per', iconCls : 'b-icon b-fa-user' },
                { name : 'Marie', iconCls : 'b-icon b-fa-user' }
            ]
        }
    ],
    events    = [];

let scheduler = new Scheduler({
    features  : {
        tree : true
    },
    resources : resources,
    events    : events,
    columns   : [
        { type : 'tree', text : 'Name', field : 'name', width : 130 }
    ],
    ....
Cheers,
Pavel

P.S. Please always use CODE tag when posting a codesnippet (see </> button at the top of the editor)
Pavel Miklashevich - Core Developer

Post Reply