Our pure JavaScript Scheduler component


Post by jmeire »

Hi

I'm jmeire from FleetMaster and we are currently looking into the Bryntum scheduler as a potential planning board component for our application.
We created a setup of the trial version in Angular 8 but we ran into an issue for which we did not find a solution yet.

We based us on this example:
https://bryntum.com/examples/grid/treeloadondemand/

A store was set up for the resources, it should be a lazy loaded tree.
We tried to override the load and the loadChildren method of the store.
But the resolved resources are not displaying in the UI.
We wondered what we are doing wrong and how we can resolve this.
fm-bryntum.rar
(9.47 MiB) Downloaded 170 times
Thank you in advance!

Kind regards,
jmeire

Post by mats »

Did you setup your server to handle requests coming for the expanding tree nodes? If you open the console you'll see what is actually going on.
Attachments
Screenshot 2020-01-28 at 15.28.01.png
Screenshot 2020-01-28 at 15.28.01.png (325.05 KiB) Viewed 2960 times

Post by jmeire »

The setup of a server is not needed for this example.
We want to have full control of the load and loadChildren function.
So instead of a call we returned a promise with a data resolve in the load function override to test our case.
This should return the data after the timeout has passed but it does not.

part of the example zip:
load: (params: any) => new Promise(resolve => {
        setTimeout(() => {
          resolve({
            success: true,
            data: [{
              id: 1,
              name: 'Vehicle group 1',
              children: true
            }]
          });
        }, 1000);
      })

Post by Maxim Gorkovsky »

Hello.
load method call starts internal process of preparing, sending request and processing response. Overriding load method like this you change load behavior completely, no events are fired, store doesn't know the data was loaded, caches not updated.
If you want to emulate server response, you need to override only request sending part.
class AjaxHelperOverride {
    static get target() {
        return {
            class : AjaxHelper
        };
    }

    static fetch(url, params) {
        if (/storeloadurl/.test(url)) { // use this condition to map JSON responses to requests
            return new Promise(resolve => {
                const result = {
                    success : true,
                    data    : [{
                        id       : 1,
                        name     : 'Vehicle group 1',
                        children : true
                    }]
                };
                
                resolve({
                    status     : 200,
                    ok         : true,
                    headers    : new Headers(),
                    statusText : 'OK',
                    url        : url,
                    parsedJson : result,
                    text       : () => new Promise((resolve) => {
                        resolve(JSON.stringify(result));
                    }),
                    json : () => new Promise((resolve) => {
                        resolve(result);
                    })
                });
            });
        }
        else {
            return this._overridden.fetch(url, params);
        }
    }
}
Override.apply(AjaxHelperOverride);

Post by jmeire »

Ok, thanks for the info!

We have updated our example with the request sending override.
But the data is still not visible in the UI.
fm-bryntum-v2.rar
(9.47 MiB) Downloaded 155 times
What can we do to achieve this?

Post by Maxim Gorkovsky »

Resource store is supposed to be instance of ResourceStore class, not AjaxStore:
import { AjaxStore, AjaxHelper, Override, ResourceStore } from 'bryntum-scheduler/scheduler.umd.js';
...
private setResourceStore(): void {
    this.resourceStore = new ResourceStore({
      tree: true,
      fields: ['name'],
      autoLoad: true,
      readUrl: '/storeloadurl/',
    });
  }
  

Post by jmeire »

Ok thank you, that did the trick!

Now we have one remaining issue.
When expanding a resource, the fetch of the children happens but the children are not displayed initially.
Only when collapsing the resource and expanding it again, the children become visible.

How can we resolve this?

Updated example:
fm-bryntum-v3.rar
(9.47 MiB) Downloaded 187 times

Post by Maxim Gorkovsky »

Reproduced, ticket opened here https://github.com/bryntum/support/issues/243 Thank you for report.

While we are working on this, you can try this workaround:
scheduler.on('expandNode', () => scheduler.refreshRows())

Post by mats »

Fixed in our sources now

Post by jmeire »

As follow up on this topic I have the following question:
When using the AjaxHelperOverride, the code in the fetch function is not executed when the idField of the ResourceModel is set.
How can I resolve this?
    ResourceModel.idField = 'guid';
    this.resourceStore = new ResourceStore({
      tree: true,
      fields: [{ name: 'guid', type: 'string' }, { name: 'url', type: 'string' }],
      autoLoad: true,
      readUrl: 'init',
    });
Full example:
fm-bryntum-v4.zip
(10.65 MiB) Downloaded 149 times

Post Reply