Our pure JavaScript Scheduler component


Post by why »

if i configure the scheduler like this
<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
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 }
    ]

Post by saki »

treeFeature takes boolean true as the value so in your app you should configure it as
treeFeature={true}
The store above should actually be the resourceStore of the Scheduler.

Post by why »

the following still not working.

<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' }
          ]
        }
      ]
    };

Post by pmiklashevich »

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:
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)

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply