Efficient approach for moving tree nodes (up/down) with children in slickgrid-universal

[hwlv]

Looking for an efficient way to implement up/down movement of nodes in a tree grid where moving a parent node should also move all its children while maintaining the hierarchy.
Current Challenge:
When clicking up/down buttons to move nodes:

Parent node movement should include all children
Keep hierarchy intact
Handle proper node reordering
Maintain correct indentation levels

Current approach:

class TreeGridMovement {
  moveNode(direction: 'up' | 'down') {
    const selectedNode = this.getSelectedNode();
    const allNodes = this.grid.getData();
    const currentIndex = allNodes.indexOf(selectedNode);
    
    // Get all children nodes
    const subtree = this.getAllDescendants(selectedNode);
    const subtreeSize = subtree.length;
    
    // Calculate target index
    const targetIndex = direction === 'up' 
      ? Math.max(0, currentIndex - 1)
      : Math.min(allNodes.length - subtreeSize, currentIndex + 1);
      
    // Move entire subtree
    const nodesToMove = subtree;
    nodesToMove.forEach((node, i) => {
      const idx = allNodes.indexOf(node);
      allNodes.splice(idx, 1);
      allNodes.splice(targetIndex + i, 0, node);
    });
    
    this.updateLevels(allNodes);
    this.grid.invalidate();
  }
}
    ```
Questions:

What's the most efficient way to handle batch node movement?
Are there better approaches to maintain tree structure during moves?
Any suggestions for optimizing level recalculation?

Looking forward to your insights on improving this implementation.

[ghiscoding]

The approach is already shown in the Example 5, you need to update your row detail and parentId and then reassign to the datasetHierarchical (or reassign to the regular dataset, that should also trigger an update).

slickgrid-universal/examples/vite-demo-vanilla-bundle/src/examples/example06.ts

Lines 281 to 298 in 8efae0e

	addNewFile() {
	const newId = this.sgb.dataView!.getItemCount() + 50;
	// find first parent object and add the new item as a child
	const popFolderItem = findItemInTreeStructure(this.datasetHierarchical, x => x.file === 'pop', 'files');
	if (popFolderItem && Array.isArray(popFolderItem.files)) {
	popFolderItem.files.push({
	id: newId,
	file: `pop-${newId}.mp3`,
	dateModified: new Date(),
	size: newId + 3,
	});
	this.lastInsertedPopSongId = newId;
	this.isRemoveLastInsertedPopSongDisabled = false;
	// overwrite hierarchical dataset which will also trigger a grid sort and rendering
	this.sgb.datasetHierarchical = this.datasetHierarchical;

A reminder again that SlickGrid by default doesn't support Tree Data natively, what I did to make it work is to keep 2 data arrays in sync, the 2 arrays are the flat dataset and the tree dataset, when one changes then the other one needs to be resync. When you change one of the array, the other should resync automatically. On a very large dataset, this might not be the most efficient, but it is really the only way to get it working in SlickGrid