reactdatagrid icon indicating copy to clipboard operation
reactdatagrid copied to clipboard

Feature request: Provide a way to load more child nodes without depending on the parent node

Open nstoertz opened this issue 4 years ago • 1 comments

https://reactdatagrid.io/docs/changelog#4.0.26 added support for a loadNodeAsync property available on the parent node in the TreeGrid.

In our UI, we are attempting to display a load more button as a child row in the tree grid rather than in the parent row. Because we don't have access to lodeNodeAsync from a child row, we are using a workaround of storing the value passed to the parent row in context and using it from the child row. However, when using livePagination without stickyTreeNodes, the parent row may not be mounted in the render tree, and loadNodeAsync may not be available to all.

At the very least, we'd like a way to load more nodes from a child row. More generally, it would be very helpful to have an API for loading additional nodes that didn't rely on the nodes at all. Given a reference to the grid, we'd like to always be able to load more nodes for a given parent node id.

nstoertz avatar Jul 27 '21 17:07 nstoertz

Here's my latest workaround:

  const handleLoadMore = useCallback(
    async (groupingData: GroupingGridData) => {
      await new Promise((resolve) => {
        // If the grid unmounts, this is a no-op.
        if (!gridRef?.current) {
          return resolve(undefined);
        }

        const itemIndex = gridRef.current.getItemIndexById(groupingData.id);
        const node = gridRef.current.getItemAt(itemIndex);

        // This uses an undocumented property on the grid which properly updates the tree's cache:
        // https://github.com/inovua/reactdatagrid/blob/0d2ef4a2da776692bc586517abe32ea93b508c02/enterprise-edition/plugins/tree/useTreeColumn/index.tsx#L61
        // TODO: Change this if Inovua fixes https://github.com/inovua/reactdatagrid/issues/168

        // @ts-ignore
        gridRef.current.loadNodeAsync?.(node, resolve);
      });

      // Poll until the node is no longer loading, according to the grid
      await new Promise((resolve) => {
        const waitForLoaded = () => {
          if (!gridRef?.current?.computedLoadingNodes?.[groupingData.id]) {
            return resolve(undefined);
          }

          setTimeout(waitForLoaded, 500);
        };

        waitForLoaded();
      });
    },
    [gridRef]
  );

Some take-aways:

  • As per the bug title, we really need a supported way to load more nodes from the grid ref itself
  • When loading more nodes, we'd like a way to wait for the nodes to finish loading, so that we can show a spinner
  • This looks like it would be easy to implement, given the reference to the code above

nstoertz avatar Sep 10 '21 15:09 nstoertz