Hi Team,
In Bryntum Scheduler Pro v6.0.0 is it possible to configure lazy loading loadUrl to use restful methods in the project level? I know that it's possible to configure in the eventStore and the resourceStore seperately but it doesn't seem to work on the ProjectModelConfig level.
Example: https://bryntum.com/products/schedulerpro/examples/infinite-scroll-crudmanager/
I want to configure the scheduler as in the above example but use a post request to load the data using a single API call.
Hey sachin_corzent,
Thanks for reaching out.
Instead of ProjectModel, please use CrudManager, please check this guide for a deeper explanation https://bryntum.com/products/scheduler/docs/guide/Scheduler/data/lazyloading#using-crudmanager.
Best regards,
Márcio
How to ask for help? Please read our Support Policy
Hi Team,
In the same example, https://bryntum.com/products/schedulerpro/examples/infinite-scroll-crudmanager/
When I replace project with CRUD Manger it runs into an error.
Cannot read properties of undefined (reading '_isLoading')
{
appendTo : 'container',
viewPreset : 'dayAndMonth',
// To center the view on a certain date
visibleDate : new Date(2024, 1, 6),
// Enables endless timeline scrolling
infiniteScroll : true,
// The infiniteScroll gets a better UX if a larger bufferCoef is used. When using lazyLoading, this only means that
// the timeline "shifts" more seldom. Only events inside or close to the visible date range is requested from the
// backend
bufferCoef : 20,
// Affects when the timespan shifts upon horizontal scroll
bufferThreshold : 0.01,
// Current backend easily runs out of memory, this prevents the requested date ranges from being too long
minZoomLevel : 11,
tickSize : 30,
crudManager: {
loadUrl: 'php/read.php',
// This will activate the lazy load functionality
lazyLoad: true,
// This will initiate the first load upon creation
autoLoad: true,
},
features : {
// Grouping is not supported when using a lazyLoad store
group : false,
filter : false
},
columns : [
{
text : 'Resource',
field : 'name',
width : 200,
sortable : false,
filterable : false
}
],
tbar : [
{
type : 'viewpresetcombo'
},
'->',
{
type : 'button',
text : 'Reset data',
icon : 'b-fa b-fa-refresh',
ref : 'resetButton',
onClick({ source }) {
// In addition to clearing all records, this will also remove any lazy loading cache on these stores
scheduler.eventStore.data = [];
scheduler.assignmentStore.data = [];
scheduler.resourceStore.data = [];
fetch('php/reset.php').then(() => {
scheduler.project.load();
});
}
}
]
}
Hey,
That looks like a bug. Thanks for reporting. Please follow the ticket to track the fix progress.
Best regards,
Márcio
How to ask for help? Please read our Support Policy
Hey sachin_corzent,
After some discussions with the team, the ticket was closed and we don't use crudManager with SchedulerPro, instead, we use https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/model/ProjectModel.
To achieve the behavior you're asked, you can configure https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/model/ProjectModel#config-transport at projectModel level to load all the data using only one API call.
transport : {
load : {
url : 'http://mycool-server.com/load.php',
// HTTP request parameter used to pass serialized "load"-requests
paramName : 'data',
// pass extra HTTP request parameter
params : {
foo : 'bar'
}
},
sync : {
url : 'http://mycool-server.com/sync.php',
// specify Content-Type for requests
headers : {
'Content-Type' : 'application/json'
}
}
}Best regards,
Márcio
How to ask for help? Please read our Support Policy
Hey Sachin,
You just need to set the lazyLoad on the project config only. See this: https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/model/ProjectModel#config-lazyLoad
project : {
autoLoad : true,
autoSync : true,
lazyLoad : true,
transport : {
load : {
url : 'http://mycool-server.com/load.php',
// HTTP request parameter used to pass serialized "load"-requests
paramName : 'data',
// pass extra HTTP request parameter
params : {
foo : 'bar'
}
},
sync : {
url : 'http://mycool-server.com/sync.php',
// specify Content-Type for requests
headers : {
'Content-Type' : 'application/json'
}
}
}Hope this helps!
Hi Team,
In this example, https://bryntum.com/products/schedulerpro/examples/infinite-scroll-crudmanager/
when I add the filterBar feature to true and set filerable to true in the column and search a name, the api call does not contain the search parameters. The console runs into errors as well.
{
appendTo : 'container',
viewPreset : 'dayAndMonth',
// To center the view on a certain date
visibleDate : new Date(2024, 1, 6),
// Enables endless timeline scrolling
infiniteScroll : true,
// The infiniteScroll gets a better UX if a larger bufferCoef is used. When using lazyLoading, this only means that
// the timeline "shifts" more seldom. Only events inside or close to the visible date range is requested from the
// backend
bufferCoef : 20,
// Affects when the timespan shifts upon horizontal scroll
bufferThreshold : 0.01,
// Current backend easily runs out of memory, this prevents the requested date ranges from being too long
minZoomLevel : 11,
tickSize : 30,
project : {
autoLoad : true,
autoSync : true,
lazyLoad : true,
loadUrl : 'php/read.php',
syncUrl : 'php/sync.php',
phantomIdField : 'phantomId',
assignmentStore : {
syncDataOnLoad : false
},
resourceStore : {
syncDataOnLoad : false,
fields : [
{ name : 'calendar', persist : false },
{ name : 'maxUnit', persist : false },
{ name : 'parentId', persist : false }
]
},
eventStore : {
syncDataOnLoad : false,
fields : [
{ name : 'duration', persist : false },
{ name : 'effort', persist : false },
{ name : 'constraintDate', persist : false }
]
}
},
features : {
// Grouping is not supported when using a lazyLoad store
group : false,
filterBar : true
},
columns : [
{
text : 'Resource',
field : 'name',
width : 200,
sortable : false,
filterable : true
}
],
tbar : [
{
type : 'viewpresetcombo'
},
'->',
{
type : 'button',
text : 'Reset data',
icon : 'b-fa b-fa-refresh',
ref : 'resetButton',
onClick({ source }) {
// In addition to clearing all records, this will also remove any lazy loading cache on these stores
scheduler.eventStore.data = [];
scheduler.assignmentStore.data = [];
scheduler.resourceStore.data = [];
fetch('php/reset.php').then(() => {
scheduler.project.load();
});
}
}
]
}
It works fine in this example: https://bryntum.com/products/schedulerpro/examples-scheduler/infinite-scroll/
{
appendTo: 'container',
viewPreset: 'dayAndMonth',
// To center the view on a certain date
visibleDate: new Date(2024, 1, 6),
// Enables endless timeline scrolling
infiniteScroll: true,
// The infiniteScroll gets a better UX if a larger bufferCoef is used. When using lazyLoading, this only means that
// the timeline "shifts" more seldom. Only events inside or close to the visible date range is requested from the
// backend
bufferCoef: 20,
// Affects when the timespan shifts upon horizontal scroll
bufferThreshold: 0.01,
// Current backend easily runs out of memory, this prevents the requested date ranges from being too long
minZoomLevel: 11,
tickSize: 30,
selectionMode: { rowNumber: true },
features: {
// Grouping is not supported when using a lazyLoad store
group: false,
filterBar: true,
resourceTimeRanges: true
},
columns: [
{
text : 'Name',
field : 'name',
width : 200,
editor : {
type : 'textfield',
required : true
}
},
],
resourceStore: {
lazyLoad: true,
// Uncomment these and comment out below to use the express.js backend
// readUrl : 'http://lh:3000/read-resources',
// createUrl : 'http://lh:3000/create-resources',
// deleteUrl : 'http://lh:3000/delete-resources',
// updateUrl : 'http://lh:3000/update-resources',
// Comment out these and uncomment above to use the express.js backend
readUrl: './php/resource/read.php',
createUrl: './php/resource/create.php',
deleteUrl: './php/resource/delete.php',
updateUrl: './php/resource/update.php',
autoLoad: true,
autoCommit: true,
sortParamName: 'sort',
filterParamName: 'filter'
},
eventStore: {
lazyLoad: true,
// Uncomment these and comment out below to use the express.js backend
// readUrl : 'http://localhost:3000/read-events',
// createUrl : 'http://localhost:3000/create-events',
// deleteUrl : 'http://localhost:3000/delete-events',
// updateUrl : 'http://localhost:3000/update-events',
// Comment out these and uncomment above to use the express.js backend
readUrl: './php/event/read.php',
createUrl: './php/event/create.php',
deleteUrl: './php/event/delete.php',
updateUrl: './php/event/update.php',
autoCommit: true,
fields: [{ name: 'duration', persist: false }]
},
resourceTimeRangeStore: {
lazyLoad: true,
// Uncomment this line and comment out below to use the express.js backend
// readUrl : 'http://lh:3000/read-resourcetimeranges'
readUrl: './php/resourcetimerange/read.php'
},
tbar: [
{
type: 'viewpresetcombo'
},
'->',
{
type: 'button',
text: 'Reset data',
icon: 'b-fa b-fa-refresh',
ref: 'resetButton',
onClick() {
// In addition to clearing all records, this will also remove any lazy loading cache on these stores
scheduler.resourceStore.data = null;
scheduler.eventStore.data = null;
scheduler.resourceTimeRangeStore.data = null;
// As the SchedulerResourceStore is an AjaxStore, calling load with a params object will include these parameters
// in the lazy load server request.
scheduler.resourceStore.load({ reset: true });
}
}
]
}
This is a bug on our end. Opened a ticket here to investigate this issue: https://github.com/bryntum/support/issues/10585. We already have a ticket which is pretty similar to this: https://github.com/bryntum/support/issues/10537. Please keep an eye both of these tickets.