Our blazing fast Grid component built with pure JavaScript

Post by Yamo1993 »


When using the RowReorder feature in a TreeGrid, how do I get the source index of a reordered row?

Say that I have a list of records: [3,4,5]

And I am moving the record 3 to be the last record: [4,5,3]

The source index is 0 and the target index is 2.

Is there any value in the context object provided by the gridRowDrop listener which gives me the source index (in this case 0)?

The backend is expecting an integer which indicates how many positions a record should move. To compute that integer, I need to know the source index and the target index.

Post by mats »

No way currently, but seems like a reasonable request. We will investigate! https://github.com/bryntum/support/issues/3810

Post by Yamo1993 »


Post by Animal »

Post by Yamo1993 »

Thanks, I will try that.

Post by Yamo1993 »

I tried to listen for "move", but the event doesn't seem to trigger when rows are reordered. I then tried to listen for "change", and all I see are the events "add", "remove", "removeall" and "update".

I should add that I have implemented a custom data handling for the grid, where I always update the store with a new dataset by running "store.removeAll()" and then "store.add(data)" when the React state changes. This was necessary since the grid doesn't update correctly when the dataset changes.

Could it be that the event is never triggered since the data store is completely updated?

Post by Animal »

The event works here when I move a row in the grid:

Screenshot 2021-11-25 at 13.45.12.png
Screenshot 2021-11-25 at 13.45.12.png (338.34 KiB) Viewed 565 times

Post by Animal »

Update the whole dataset?

That should not be necessary. Records all inform their store when their fields are mutated, and the Store then fires an event.

Post by saki »

The move event should fire as long as you listen to it before you update data. Just to make sure, you have installed the listener on the store, haven't you?

move-event.gif (265.06 KiB) Viewed 565 times

Post by Yamo1993 »

The "move" event is not triggered when using a TreeGrid. It only gets triggered when the tree feature is off.

Example code (in TypeScript):

const Prototyping = (): ReactElement => {
    return (
                { field: 'id', text: 'Id', type: 'tree' },
                { field: 'name', text: 'Name' },
                { id: 1, name: 'User 1' },
                { id: 2, name: 'User 2' },
                { id: 3, name: 'User 3' },
                listeners: {
                    move: (evt: any) => {
                        console.log('move', evt);

Post Reply