Our pure JavaScript Scheduler component


Post by jmeire »

Hi

If I execute the following code on a resource store (in tree mode), the item with expanded: true has an arrow in the correct state but the children are not visible (see image below). Same goes for resourcestore.rootNode.appendChild.

this.resourceStore.add([
  {
    id: '745b7453-4a01-4ccc-94a0-15925895f369',
    name: 'r1',
    expanded: false,
    children: [
      {
        id: 'child1',
        name: 'Child 1',
      },
    ],
  },
  {
    id: 'a20f77cb-506c-4d54-a42d-230a88c49e74',
    name: 'r2',
    expanded: true,
    children: [
      {
        id: 'child2',
        name: 'Child 2',
      },
    ],
  },
] as any);
expanded.PNG
expanded.PNG (1.72 KiB) Viewed 862 times

What should I do to also see the children when I add/append tree data with expanded flags?

Kind regards
jmeire


Post by mats »

What version are you on? I could not reproduce this here: https://bryntum.com/examples/grid/tree/

grid.store.rootNode.appendChild([
  {
    id: '745b7453-4a01-4ccc-94a0-15925895f369',
    name: 'r1',
    expanded: false,
    children: [
      {
        id: 'child1',
        name: 'Child 1',
      },
    ],
  },
  {
    id: 'a20f77cb-506c-4d54-a42d-230a88c49e74',
    name: 'r2',
    expanded: true,
    children: [
      {
        id: 'child2',
        name: 'Child 2',
      },
    ],
  },
]);
Attachments
Screenshot 2021-04-15 at 22.05.34.png
Screenshot 2021-04-15 at 22.05.34.png (20.97 KiB) Viewed 858 times

Post by jmeire »

Version 4.1.0
It is in the scheduler component.
Tree is set to true in the resource store configuration and the type of the column is also tree.


Post by mats »

How can I reproduce this? still works well here: https://bryntum.com/examples/scheduler/tree/

scheduler.resourceStore.rootNode.appendChild([
  {
    id: '745b7453-4a01-4ccc-94a0-15925895f369',
    name: 'r1',
    expanded: false,
    children: [
      {
        id: 'child1',
        name: 'Child 1',
      },
    ],
  },
  {
    id: 'a20f77cb-506c-4d54-a42d-230a88c49e74',
    name: 'r2',
    expanded: true,
    children: [
      {
        id: 'child2',
        name: 'Child 2',
      },
    ],
  },
]);

Post by jmeire »

Hi

I provided an example that actually worked, my bad!
You can reproduce it by using the following data:

    this.resourceStore.rootNode.appendChild([
      {
        id: '44b3b610-b455-48b5-a738-6370cec57cd1',
        name: 'r1',
        children: false,
      },
      {
        id: '745b7453-4a01-4ccc-94a0-15925895f369',
        name: 'r2',
        children: [
          {
            id: 'child1',
            name: 'Child 1',
          },
        ],
      },
      {
        id: 'a20f77cb-506c-4d54-a42d-230a88c49e74',
        name: 'r3',
        expanded: true,
        children: [
          {
            id: 'child2',
            name: 'Child 2',
          },
          {
            id: 'child3',
            name: 'Child 3',
          },
        ],
      },
    ] as any);

The first item has set children to false. I think this causes the children of r3 not to be displayed. But strange enough if I move the first item to the second position, then the children of r3 are actually visible. This seems strange behavior.

Kind regards
jmeire


Post by pmiklashevich »

Please try the code online: https://bryntum.com/examples/scheduler/tree/

scheduler.resourceStore.removeAll()
scheduler.resourceStore.rootNode.appendChild([
      {
        id: '44b3b610-b455-48b5-a738-6370cec57cd1',
        name: 'r1',
        children: false,
      },
      {
        id: '745b7453-4a01-4ccc-94a0-15925895f369',
        name: 'r2',
        children: [
          {
            id: 'child1',
            name: 'Child 1',
          },
        ],
      },
      {
        id: 'a20f77cb-506c-4d54-a42d-230a88c49e74',
        name: 'r3',
        expanded: true,
        children: [
          {
            id: 'child2',
            name: 'Child 2',
          },
          {
            id: 'child3',
            name: 'Child 3',
          },
        ],
      },
    ]);

Please see the video, looks good:

Запись активности на экране 2021-04-16 в 14.26.47.gif
Запись активности на экране 2021-04-16 в 14.26.47.gif (3.55 MiB) Viewed 843 times

Pavlo Miklashevych
Sr. Frontend Developer


Post by jmeire »

Hmm strange, I added a project as an example. Probably a wrong configuration on my side but I don't know what.

bryntum-tree-data.zip
(106.79 KiB) Downloaded 66 times

Post by pmiklashevich »

Thanks for the report! Ticket is here: https://github.com/bryntum/support/issues/2705

Please add Tree feature to the Scheduler:

<bryntum-scheduler
  [treeFeature]="true"

children : false is not a supported value, but children : true should work. This means the children are going to be loaded on demand. Alternative way to achieve the same result is to specify children as an empty array. There is a special config to tell the Scheduler if you want to convert nodes with empty children to a leaf node or not: https://www.bryntum.com/docs/scheduler/#Core/data/mixin/TreeNode#property-convertEmptyParentToLeaf-static

For example:

        ResourceModel.convertEmptyParentToLeaf = {
            onLoad   : false,
            onRemove : true
        };

    this.resourceStore = new ResourceStore({
        modelClass : ResourceModel,
        tree       : true,
        readUrl    : `test`,
        headers    : {}
    });
    this.resourceStore.rootNode.appendChild([
        {
            id       : '44b3b610-b455-48b5-a738-6370cec57cd1',
            name     : 'r1',
            children : []
        },

Pavlo Miklashevych
Sr. Frontend Developer


Post by jmeire »

Okay, thanks!


Post Reply