Our pure JavaScript Scheduler component


Post by Highnoon »

Hi,

i have problems with my reload function. Is it necessary that id in resourceStore is numeric? I am using a GUID like "7ABC9979-B0A2-424D-B50A-24F05F73950D" so id has to be a String.

If i load initially data as inline data it works perfect.

This is my reload called from Menu:
// Relaod aus Menu
function reload() {

    scheduler.eventStore.removeAll();
    scheduler.resourceStore.removeAll(); // erzeugt update's in EventStore

    var teams = P2Service.get("plan").getTreeDataAsJson();
    resources = JSON.parse(teams);

    // Plug it in as inline data
    scheduler.resourceStore.data = resources;

    var rezu = P2Service.get("plan").getDataAsJson();

    var events = JSON.parse(rezu[0]);

    scheduler.eventStore.data = events;

    toast('Data reloaded');

}

If I assign the new resources to resourceStore I got the following exception:

TypeError: Die Eigenschaft "id" eines undefinierten oder Nullverweises kann nicht abgerufen werden.
at splice (scheduler/build/scheduler.umd.js:32021:13)
at onNodeRemoveChild (scheduler/build/scheduler.umd.js:9358:13)
at Anonymous function (scheduler/build/scheduler.umd.js:10173:17)
at clearChildren (/scheduler/build/scheduler.umd.js:10171:13)
at data.set (/scheduler/build/scheduler.umd.js:5461:9)
at reload (Resource/Plantafel/appResourceScheduler.js:692:5)
at onClick (Resource/Plantafel/appResourceScheduler.js:1820:13)
at callback (/scheduler/build/scheduler.umd.js:376:7)
at trigger (/scheduler/build/scheduler.umd.js:30364:15)
at onInternalClick (/scheduler/build/scheduler.umd.js:33891:7)

I am using Scheduler 2.0.2. My code is old so it can be a new bug.

Thanks

Post by mats »

Is it necessary that id in resourceStore is numeric? I am using a GUID like "7ABC9979-B0A2-424D-B50A-24F05F73950D" so id has to be a String.
No it can be any type.

Please always use CODE tags for code/stacktraces. How can we reproduce this?

Post by Highnoon »

Hi,

here is my reproduction. Start BryntumTest.html. Press reload button:
   Collection.js:406 Uncaught TypeError: Cannot read property 'id' of undefined
    at Collection.splice (Collection.js:406)
    at ResourceStore.onNodeRemoveChild (StoreTree.js:185)
    at TreeNode.js:609
    at Array.forEach (<anonymous>)
    at ClassDefEx.clearChildren (TreeNode.js:12)
    at ResourceStore.set (Store.js:796)
    at reload (BryntumTest.html:707)
    at Button.onClick (BryntumTest.html:665)
    at Button.callback (Base.js:224)
    at Button.trigger (Events.js:628)
splice @ Collection.js:406
onNodeRemoveChild @ StoreTree.js:185
(anonymous) @ TreeNode.js:609
clearChildren @ TreeNode.js:12
set @ Store.js:796
reload @ BryntumTest.html:707
onClick @ BryntumTest.html:665
Attachments
BryntumTest.zip
(745.56 KiB) Downloaded 141 times

Post by pmiklashevich »

Hello,

I've just checked your testcase. Looks like a bug. Thanks for the report. Ticket here: https://app.assembla.com/spaces/bryntum/tickets/8498-treestore-doesn--39-t-support-removeall-and-clearchildren-called-one-after-the/details

You should remove
// scheduler.resourceStore.removeAll();
because
scheduler.resourceStore.data = resourcesData;
under the hood calls
scheduler.resourceStore.rootNode.clearChildren();
scheduler.resourceStore.rootNode.appendChild(data);
Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by Animal »

If a store is a tree structured store, a developer cannot add and remove records directly to the store.

The content of the store necessarily reflects the expanded state of the tree. Expanded nodes have their children added into the store. Collapsing a node removes the children from the store. Removing child nodes from a parent node removes those nodes from the store.

It is the tree API that must be used to manipulate the data. appendChild, removeChild etc.

It looks like clearChildren is private, but it probably shouldn't be, as it is useful and is what is required here.

All you need to do is:
rootNode.clearChildren()
As described above, the content of the store reflects the expanded tree structure, so this will remove all the data.

Post by thorthor »

Just stumbled across this error and this forum post. I thought it was something in the custom models, but now after a bit of testing I see I can not replace resources dynamically. Store type is also tree.

Basically, I am doing the following (react):
this.schedulerEngine.resources = this.props.newResources;
The initial run is ok but the replacement breaks it.

I tried calling clearChildren manually, but rootNode is always undefined and it throws an exception.
if (this.schedulerEngine.resourceStore.rootNode) {
  this.schedulerEngine.resourceStore.rootNode.clearChildren();
}
Am I calling this method correctly? It's private so I don't see any information about it in the docs or the typescript definition file and the linked issue is still opened -> https://app.assembla.com/spaces/bryntum/tickets/8498-treestore-doesn--39-t-support-removeall-and-clearchildren-called-one-after-the/details

Post by pmiklashevich »

Hello @thorthor,

Yes, you call it right. It's a method of TreeNode mixin. And yes, it's private for now. It might become public as soon as the ticket is resolved.
but rootNode is always undefined
If rootNode is undefined obviously clearChildren call has no effect. Please make sure your store is a tree store. Check isTree property on the store. It should be `true`.
and it throws an exception
Whenever you see an exception please submit the error message and the callstack here.

Please create a small runnable testcase based on one of our samples that shows your issue and upload here (exclude node_modules). Then we will have a context to look at. Thanks!

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by pmiklashevich »

I'd like to add that scheduler.resource config is supposed to be used once on init. It accepts inline data which will be passed to the ResourceStore. To replace the data later, please use Store API. You can set to resourceStore.data = [...] or use methods to add, remove etc.

Pavlo Miklashevych
Sr. Frontend Developer


Post by thorthor »

Hello Pavel,

thank you for the instructions. I fiddled with these to try to fix my issue.

Actually, surprising to me, my store was not of type tree. Although I set tree attribute to be true in features config, set up columns to be of type tree, store was not automatically transformed in tree type (I was just passing resources to the scheduler, no additional resource store configuration). So I did construct the store manually and explicitly set the store to be of type tree. Of course, resourceStore.rootNode was not an instance of a model and it had clearChildren method that ran without exceptions, but I was still getting an error on resources replacement.
scheduler.umd.js:33702 Uncaught TypeError: Cannot read property 'id' of undefined
    at Collection.splice (scheduler.umd.js:33702)
    at ResourceStore.onNodeRemoveChild (scheduler.umd.js:9743)
    at scheduler.umd.js:10578
I reverted to my original implementation as I began to wonder if it's something in my app that's constructed incorrectly and came to the conclusion that in some cases some of the ids from resource and resource's children (subresource) clash and that was causing the exception. Raw data of these two types of resources are essentially two different models, therefore they can have the same id, but I needed to prefix the id for the resource model so they do not clash.

I've created an example of this in a sample repo within my demo app. I tried modified your examples that would suit this example, but did not find any that had manual construction of ResourceModel and tree view mode. I hope this will be sufficient.

For what I know, the bug happens because I have the id clash in resources, but maybe it's something different. I also noticed if resources are not of tree type and have id clash I get an error with the information that there are multiple resources with the same id in the store. Could this be also set for the tree type resources and their children or is maybe an identical id in the child model a valid option?

Installation steps:

1. clone repository https://github.com/renatoruk/bryntum-scheduler-react-test
2. create vendor folder in the root directory
3. paste scheduler-vanilla-2.1.x+ zip in the vendor directory
4. extract scheduler to that folder and rename to scheduler
5. run npm install in the project's root directory
6. run "npm run start" after installation

Reproduction steps:
1. just click on update events, the error should be present in the console

Cheers,
Renato

Post by pmiklashevich »

For what I know, the bug happens because I have the id clash in resources, but maybe it's something different.
Id MUST be unique.
maybe an identical id in the child model a valid option?
No, it's not valid.

I've created a ticket to make a check that Id is unique in Tree store:
https://app.assembla.com/spaces/bryntum/tickets/8974-id-should-be-unique-in-tree-store/details

Thanks for the report!

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply