cell data view for form view

packages/web/src/celldata/CellDataView.js

@@ -52,15 +52,18 @@ function autodetect(selection, grider, value) {
   return 'textWrap';
 }
 
-export default function CellDataView({ selection, grider }) {
+export default function CellDataView({ selection = undefined, grider = undefined, selectedValue = undefined }) {
   const [selectedFormatType, setSelectedFormatType] = React.useState('autodetect');
   const theme = useTheme();
   let value = null;
-  if (grider && selection.length == 1) {
+  if (grider && selection && selection.length == 1) {
     const rowData = grider.getRowData(selection[0].row);
     const { column } = selection[0];
     if (rowData) value = rowData[column];
   }
+  if (selectedValue) {
+    value = selectedValue;
+  }
   const autodetectFormatType = React.useMemo(() => autodetect(selection, grider, value), [selection, grider, value]);
   const autodetectFormat = formats.find((x) => x.type == autodetectFormatType);
 

packages/web/src/datagrid/DataGrid.js

@@ -25,6 +25,7 @@ export default function DataGrid(props) {
   const theme = useTheme();
   const [managerSize, setManagerSize] = React.useState(0);
   const [selection, setSelection] = React.useState([]);
+  const [formSelection, setFormSelection] = React.useState(null);
   const [grider, setGrider] = React.useState(null);
   // const [formViewData, setFormViewData] = React.useState(null);
   const isFormView = !!(config && config.isFormView);
@@ -43,17 +44,19 @@ export default function DataGrid(props) {
               <ReferenceManager {...props} managerSize={managerSize} />
             </WidgetColumnBarItem>
           )}
-          {!isFormView && (
-            <WidgetColumnBarItem title="Cell data" name="cellData" collapsed={props.isDetailView}>
+          <WidgetColumnBarItem title="Cell data" name="cellData" collapsed={props.isDetailView}>
+            {isFormView ? (
+              <CellDataView selectedValue={formSelection} />
+            ) : (
               <CellDataView selection={selection} grider={grider} />
-            </WidgetColumnBarItem>
-          )}
+            )}
+          </WidgetColumnBarItem>
         </WidgetColumnBar>
       </LeftContainer>
 
       <DataGridContainer>
         {isFormView ? (
-          <FormView {...props} />
+          <FormView {...props} onSelectionChanged={setFormSelection} />
         ) : (
           <GridCore
             {...props}

packages/web/src/formview/FormView.js

@@ -65,7 +65,9 @@ const TableBodyCell = styled.td`
   padding: 2px;
   white-space: nowrap;
   position: relative;
+  max-width: 500px;
   overflow: hidden;
+  text-overflow: ellipsis;
 
   ${(props) =>
     props.isSelected &&
@@ -119,6 +121,7 @@ export default function FormView(props) {
     onReconnect,
     allRowCount,
     rowCountBefore,
+    onSelectionChanged,
   } = props;
   /** @type {import('dbgate-datalib').FormViewDisplay} */
   const formDisplay = props.formDisplay;
@@ -162,6 +165,13 @@ export default function FormView(props) {
     }
   }, [tabVisible, focusFieldRef.current]);
 
+  React.useEffect(() => {
+    if (!onSelectionChanged || !rowData) return;
+    const col = getCellColumn(currentCell);
+    if (!col) return;
+    onSelectionChanged(rowData[col.uniqueName]);
+  }, [onSelectionChanged, currentCell, rowData]);
+
   const checkMoveCursorBounds = (row, col) => {
     if (row < 0) row = 0;
     if (col < 0) col = 0;