Our pure JavaScript Scheduler component


Post by Aniket »

Team,

I am using crudManager to handle data saving/rendering as per the docs, While I have successfully used crudManager to handle data saving but have few questions on which I need clarification

  1. Post Sync operation, is the entire sync response rendered? or only the changes.

To be specific, How is data re rendered after a succesffull sync request?


Post by Aniket »

Any thoughts?


Post by pmiklashevich »

Data is refreshed on the store change. If you return no new data on sync (just confirm saving by returning success true), the store is not changed, so view is not refreshed. But you can update something on sync, then it will be re-rendered.

What are you trying to solve? What is the problem?

Pavlo Miklashevych
Sr. Frontend Developer


Post by Aniket »

It will be awkward to explain the scenario I am facing since the library is completely integrated in app But I ll try to explain.

I have enabled he rowReorderFeature to allow user to shuffle the resources, and user should be able to save the shuffling order.

Now there is some calculation at the backend for the order in which the resources will be displayed and I receive the order in sync's response of the crudManager.

But somehow I see that entire response from sync of crudManager is not rendered on the UI.


Post by pmiklashevich »

So for example you have 3 resources: "a", "b", "c". You drag "c" to the second position, so you have "a", "c", "b". Save it. In response you return all 3 records in a different order, for example "c", "a", "b". Did I get you right?

You can try to set data to the "data" property of the resource store to kind of "replace" the data with new dataset. resourceStore.data Though scroll position might be lost in this case. The position is based on the index in the store. You can see resourceStore.move function for example. Or check record position using resourceStore.indexOf function.

Another option is to introduce your custom order field and sort by this field by default. Then update the field on gridRowDrop and update it on the server and return updated data from the server.

Pavlo Miklashevych
Sr. Frontend Developer


Post by Aniket »

Pavel,
I think you got the point may be.
Below is the code I use to reOrder the resources

AssemblyOrder is the field that takes cares of order of resources for me on the backend side.

But what I inspected from console.log(response) of sync, it is not getting applied.

this.rowReorderFeature = {
      listeners: {
        gridRowDrop: ({ context }) => {
          if (context.record.assemblyOrder < context.insertBefore.assemblyOrder) {
            context.record.assemblyOrder = context.insertBefore ? context.insertBefore.assemblyOrder - 1 : 'last';
          } else {
            context.record.assemblyOrder = context.insertBefore ? context.insertBefore.assemblyOrder : 'last';
          }
        }
      },
    };

Post by Aniket »

Ay thoughts?


Post by pmiklashevich »

Please try out this approach:

    crudManager : {
        resourceStore : {
            fields    : ['order'],
            sorters   : [{ field : 'order', ascending : true }],
            listeners : {
                change({ source : store, action, index, oldIndex }) {
                    // When you drag a resource
                    if (action === 'add' && index != null && oldIndex != null) {
                        console.log('Save order');
                        // Map position in the store to the order field
                        scheduler.resourceStore.forEach((record, index) => record.order = index);
                    }
                }
            }
        },
        listeners : {
            sync() {
                console.log('Synced!');
                // Need to reapply sorting because row reordering resets sorting
                scheduler.resourceStore.sort({ field : 'order', ascending : true });
            }
        },

'order' is assemblyOrder in your case and I listen to store "change" event to deal with order on data level. But the same should work if you apply the map function in gridRowDrop listener.

Cheers!

Pavlo Miklashevych
Sr. Frontend Developer


Post by Aniket »

thanks Pavel


Post Reply