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.
Thank you in advance!
Kind regards,
jmeire
Support Forum
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:
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);
})
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.
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);
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/',
});
}
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:
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:
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:
While we are working on this, you can try this workaround:
scheduler.on('expandNode', () => scheduler.refreshRows())
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?
Full example:
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',
});