[REACT] Redux-like example with project model

[eluce2]

I've seen the great redux example for the grid component here, but how would this same technique work with the project model, since I have to have keep all the stores in sync, not just a singe store?

Here's my ultimate goals:

• Sync data from my database without the CRUD manager (because our data requires heavy transformations and we need to improve client-side caching)
• load as little data as possible to improve performance. Any combination of lazyLoading, remoteSorting, remoteFiltering etc may apply, just not sure which options should be enabled to make the most of this.
• be able to maintain 2 sets of project model data for various modes in the app (same data from database can cause a different set of events records for the scheduler, depending on other application state)
• handle realtime updates

So far the hardest thing seems to be that the requestData function doesn't provide all the information we need to provide the proper slice. For example, if I only want to load the events for the resources shown, but the events and resources are loaded separately, there's not a good way to properly limit the data.

[alex.l]

Hi,

We have a guide here https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/integration/react/data-binding

For a test case, please check https://bryntum.com/products/gantt/examples/frameworks/react/javascript/gantt-redux/build/
It's for Gantt, but they use same approach. We do not have good demo for that for SchedulerPro I am afraid.

load as little data as possible to improve performance.

There is pagination https://bryntum.com/products/schedulerpro/examples-scheduler/paged/
and infinite scroll https://bryntum.com/products/gantt/examples/infinite-scroll/

be able to maintain 2 sets of project model data for various modes in the app (same data from database can cause a different set of events records for the scheduler, depending on other application state)

You can change ProjectModel at runtime

[eluce2]

The Gantt example is much closer, but I don't see any events (listeners) or the requestData function in there. So how would I implement that example with paginating and/or infinite scroll?

[eluce2]

It would be great to see an example of how the project model can be swapped at runtime. Should we just conditionally render one of 2 different <BryntumProjectModel /> components? Or are you talking about something else?

[marcio]

Hey eluce2,

To implement pagination or infinite scroll with the project model, you would typically need to handle data fetching manually. You can use the requestData function to fetch data based on the current view or scroll position. Unfortunately, we don't have a direct example for SchedulerPro, but you can adapt the approach used in the Gantt example by listening to scroll or view change events and then fetching the necessary data slices. Please see this documentation regarding requestData to see an example on how to implement it https://bryntum.com/products/schedulerpro/docs/api/Core/data/Store#function-requestData.

Regarding swapping the project model at runtime, you can indeed conditionally render different <BryntumProjectModel /> components based on your application state. This allows you to maintain separate sets of data for different modes. Alternatively, you can update the data within a single project model instance by using methods like loadInlineData() to replace the current data.

If you need more detailed guidance or code examples, please let us know!

[eluce2]

The gantt example is close enough to Scheduler Pro that I'm not concerned about a scheduler-specific example. But the core thing I'm still not sure of is how to target the specific cross section of data that it needed when the requestData function is fired for each store individually. Please correct me if I'm misunderstanding something...

We have over 500 resources/people to be loaded (vertical axis) and a theoretical infinite time range (horizontal axis). I need to limit my database query to only load the events applicable to the currently visible people, but the requestData function of the EventStore only provides me with the start/end dates.

[tasnim]

to limit my database query to only load the events applicable to the currently visible people

Could you please elaborate on what you mean by "applicable to currently visible people"?

[eluce2]

Let’s say I have lazy load enabled for the resource store, with chunk size of only 25. I also have remote filters on. I only want to query my database for events that pertain to those 25 resources.

This is what we’re currently doing with the CRUD manager since everything goes to a single API call, but I don’t have a way to get the same data from a local client-side cache since each store has its own requestData function

[joakim.l]

Would this be a solution for you https://github.com/bryntum/support/issues/11342
It's about adding the possibility to implement your own requestData function on the CrudManager.

[eluce2]

Yes that sounds great but how soon would I be able to use it? We may need a solution sooner for our current app