Bryntum Support Forums

Hi,

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.

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

Thanks!

You can listen for this event: https://www.bryntum.com/docs/grid/api/Core/data/Store#event-move

Thanks, I will try that.

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?

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

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.

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?

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 (
        <BryntumGrid
            treeFeature
            rowReorderFeature
            columns={[
                { field: 'id', text: 'Id', type: 'tree' },
                { field: 'name', text: 'Name' },
            ]}
            data={[
                { id: 1, name: 'User 1' },
                { id: 2, name: 'User 2' },
                { id: 3, name: 'User 3' },
            ]}
            height={300}
            autoHeight={false}
            store={{
                listeners: {
                    move: (evt: any) => {
                        console.log('move', evt);
                    },
                },
            }}
        />
    );
};