I am trying to setup a AjaxStore in my Laravel / Vue3 application.
Currently I have the code below as my store. This initially loads the data into the grid, but i dont trigger any requests when changing the data. (fx. delete or copy records)
const store = new AjaxStore({
readUrl: 'diagnoses/index-data',
createUrl: 'diagnoses/submit',
updateUrl : 'diagnoses/update',
deleteURL: 'diagnoses/delete',
autoLoad: true,
fields : [
{ type : 'date', name : 'updated_at', format : DATE_FORMAT, serialize : serializeDate },
{ type : 'date', name : 'created_at', format : DATE_FORMAT, serialize : serializeDate }
]
});
Can you point me in the direction of a example where AjaxStore is used to retreive and sync data?
I use Vue Dev tools and would expect to see all the events triggered here.
events.png (25.03 KiB) Viewed 952 times
The autoCommit now triggered a request when copy and paste and delete. With that said, i'll properply have to handle events manually, as I use axios for request to server.
I can see that the grid has multiple events like: onBeforeCopy onBeforeDestroy onDataChange onDestroy
Found in: \node_modules\@bryntum\grid-vue-3\src
I haven't been able to catch any of these events and run my custom methods. Can you show me how this works?
I tried to listen for the events like shown below. But as far as I can see no events is triggered.
Be aware, if you listen to destroy event on grid level, it will be destroy event for the grid itself, not for some record in the store, or what you expect to track by that. datachange event will be triggered for all data changes you'll be needed to track, that should be enough to track.
Docs: https://bryntum.com/docs/grid/api/Grid/view/GridBase#event-dataChange
I am still very confused with this grid and how its used with Vue.
I would like to catch events before they happen. Fx. on delete. I would like to wait for a response from the server before removing the record from the grid.
Where do i place listeners on the grid. I would like to listen for any changes to selected records. (Trigger event when any item is selected)