master detail view

packages/web/src/datagrid/DataGridCore.js

@@ -426,8 +426,10 @@ export default function DataGridCore(props) {
   }, [jslid]);
 
   React.useEffect(() => {
-    if (props.onSelectedRowsChanged) props.onSelectedRowsChanged(getSelectedRowData())
-  }, [selectedCells]);
+    if (props.onRefSourceRowsChanged) {
+      props.onRefSourceRowsChanged(getSelectedRowData());
+    }
+  }, [selectedCells, props.refReloadToken]);
 
   // const handleCloseInplaceEditor = React.useCallback(
   //   mode => {

packages/web/src/datagrid/TableDataGrid.js

@@ -27,10 +27,15 @@ export default function TableDataGrid({
   const [childConfig, setChildConfig] = React.useState(createGridConfig());
   const [myCache, setMyCache] = React.useState(createGridCache());
   const [childCache, setChildCache] = React.useState(createGridCache());
+  const [refReloadToken, setRefReloadToken] = React.useState(0);
 
   const connection = useConnectionInfo({ conid });
   const [reference, setReference] = React.useState(null);
 
+  React.useEffect(() => {
+    setRefReloadToken((v) => v + 1);
+  }, [reference]);
+
   const display = React.useMemo(
     () =>
       connection
@@ -64,27 +69,31 @@ export default function TableDataGrid({
     }
   }, [conid, database, display]);
 
-  const handleSelectedRowsChanged = (selectedRows) => {
-    const filters = {
-      ...(config || myConfig).filters,
-      ..._.fromPairs(
-        reference.columns.map((col) => [
-          col.refName,
-          selectedRows.map((x) => getFilterValueExpression(x[col.baseName])).join(','),
-        ])
-      ),
-    };
-    if (stableStringify(filters) != stableStringify((config || myConfig).filters)) {
-      setChildConfig((cfg) => ({
-        ...cfg,
-        filters,
-      }));
-      setChildCache((ca) => ({
-        ...ca,
-        refreshTime: new Date().getTime(),
-      }));
-    }
-  };
+  const handleRefSourcedRowsChanged = React.useCallback(
+    (selectedRows) => {
+      if (!reference) return;
+      const filters = {
+        ...(config || myConfig).filters,
+        ..._.fromPairs(
+          reference.columns.map((col) => [
+            col.refName,
+            selectedRows.map((x) => getFilterValueExpression(x[col.baseName])).join(','),
+          ])
+        ),
+      };
+      if (stableStringify(filters) != stableStringify((config || childConfig).filters)) {
+        setChildConfig((cfg) => ({
+          ...cfg,
+          filters,
+        }));
+        setChildCache((ca) => ({
+          ...ca,
+          refreshTime: new Date().getTime(),
+        }));
+      }
+    },
+    [config || childConfig, reference]
+  );
 
   if (!display) return null;
 
@@ -101,7 +110,8 @@ export default function TableDataGrid({
         toolbarPortalRef={toolbarPortalRef}
         showReferences
         onReferenceClick={setReference}
-        onSelectedRowsChanged={reference ? handleSelectedRowsChanged : null}
+        onRefSourceRowsChanged={reference ? handleRefSourcedRowsChanged : null}
+        refReloadToken={refReloadToken.toString()}
       />
       {reference && (
         <TableDataGrid

packages/web/src/datagrid/types.ts

@@ -11,5 +11,6 @@ export interface DataGridProps {
   jslid?: string;
   showReferences?: boolean;
   onReferenceClick?: (def: GridReferenceDefinition) => void;
-  onSelectedRowsChanged?: Function;
+  onRefSourceRowsChanged?: Function;
+  refReloadToken?: string;
 }