[REACT] AjaxStore Update

[tjmeal]

Dear all,

Please find attached the see the set up i have for AjaxStore Crud operation.

Left is my AjaxStore config and right is the method that is triggered when saving an object from my Popup component.

1) The api is triggered but i am update and the request send is a POST is that by default ? Can i make it a PUT?
2) All the variables of the object that send to the server has null values?
3) I did not found an update method on the grid, hence i am using grid.add(object) to update a record (which seems to work) but is this the correct way of doing it ?

[ghulam.ghous]

Hi,

1) By default, the AjaxStore uses POST for updates. You can change this to PUT by configuring the httpMethods property in your store setup. Here's an example:

const store = new AjaxStore({
    updateUrl: 'backend/update.php',
    httpMethods: {
        update: 'PUT'
    }
});

2) If the variables are being sent as null, ensure that the object you are passing has the correct values set. You might want to check the object before sending it to ensure all fields are populated correctly.

3) Using grid.add(object) is not the correct way to update a record. Instead, you should modify the record directly and then call store.commit() to send the changes to the server. Here's how you can update a record:

const record = store.getById(recordId); // Get the record by its ID
record.set('fieldName', newValue); // Update the field
store.commit(); // Commit the changes

https://bryntum.com/products/grid/docs/api/Core/data/Model#function-set

If you need more help, please provide more details or code snippets.

Regards,

[tjmeal]

1) Are you sure that what you send me works on nextJs ? Because i set it up and still the PostMethod is triggered ? (see video attached)

2) Is it possible to modify the data object that AjaxStore uses (and restructure it) to send the request on server when i am calling commit() ?

3) Thanks

[marcio]

Hi,

1) The httpMethods configuration should work across different frameworks, including Next.js. If it's still sending a POST request, please ensure that the configuration is correctly applied to your AjaxStore. Double-check the setup and make sure there are no overrides elsewhere in your code.

2) Yes, you can modify the data object before sending it to the server by using the transformModificationData config in your AjaxStore. This allows you to restructure the data before it is sent during a commit operation. Here's an example:

const store = new AjaxStore({
    updateUrl: 'backend/update.php',
    transformModificationData: payload => {
        // Modify the payload as needed
        payload.data.forEach(record => {
            // Example modification
            record.modifiedField = record.originalField;
        });
        return payload;
    }
});

Documentation reference: https://bryntum.com/products/gantt/docs/api/Core/data/AjaxStore#config-httpMethods
https://bryntum.com/products/gantt/docs/api/Core/data/AjaxStore#config-transformModificationData

[tjmeal]

Dear Sir,

Thanks you a lot for your reply

As you will on the video > when editing one (single record) everything works perfectly. >
If i update 2 or more records > while the server process and response the data correctly > the showDirty icon is not removed ( as it happens when i am updating only 1 record).

Batch save button call the following code :

  const batchSave = () => {
    gridRef.current.gridInstance.store.commit()
  };

Do you have any idea why is this happening ?

[ghulam.ghous]

What is the output of the grid.store.changes when you are still able to see the dirty icon after committing?

[tjmeal]

Please see video attached >

It still has data after commit when i update more than one record.

[ghulam.ghous]

Something is wrong definitely somewhere as I am not able to reproduce it using the exact same steps. Please provide us a minimal test case so we can debug it and assist you accordingly.

[tjmeal]

Please find attached:

a) Video with what is the problem
b) attached project to reproduce the issue

• On initial fetch you will get an error video is attached

1) First follow that link https://certain-corgi-merely.ngrok-free.app
2) Click Okay. (in order ngrok to allow you visit the server)
3) Dont use incognito browser
4) refresh the page to load the data

[alex.l]

Hi,

In docs here https://bryntum.com/products/grid/docs/#Core/data/AjaxStore#config-httpMethods

The HTTP methods to use for CRUD requests when useRestfulMethods is enabled.

So when I add

const store = new AjaxStore({
    headers: {
        Authorization: `${headers}`,
    },
    useRestfulMethods : true,
    httpMethods: {
        update: 'PUT'
    },

It worked as expected.