react-graph-grid 0.0.7 → 0.1.1

package/README.md

@@ -6,12 +6,12 @@ For all questions, please contact rmb@mail.ru
 
 Installation
 
-	npm install react-grpah-grid
+    npm install react-grpah-grid
 
 
 Example
 
-	import { GridFE } from '../../node_modules/react-graph-grid/src/GridFE';
+	import { GridCD } from '../../node_modules/react-graph-grid/src/GridCD';
 	import TestData from '../../node_modules/react-graph-grid/src/Tests/TestData';
 
 	...
@@ -56,88 +56,137 @@ Example
 	*
 	*/
 
-	    function loadRows(e) {
-			return new Promise(function (resolve, reject) {
-                const fetchParams = {
-                    mode: 'cors',
-                    method: 'post',
-                    headers: {
-						'Content-Type': 'application/json'
+	function loadRows(e) {
+		return new Promise(function (resolve, reject) {
+            const fetchParams = {
+                mode: 'cors',
+                method: 'post',
+                headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(e.params)
+            };
+
+			fetch(`/awesome-api-url/`, fetchParams).then(
+				(response) => {
+					resolve(response.json());
+				}
+			)
+			.catch(error => {
+				reject(error);
+			});
+		});
+	};
+
+	function loadColumns() {
+		return [
+			{ name: 'Id', sortable: true, filtrable: true },
+			{ name: 'Name', sortable: true, filtrable: true },
+			{ name: 'SecondName', sortable: true, filtrable: true },
+			{ name: 'Date', sortable: true },
+			{ name: 'Comment', sortable: true, filtrable: true },
+			{ name: 'HometownId', visible: false },
+			{
+				name: 'Hometown', 
+				sortable: true, 
+				filtrable: true, 
+				type: 'lookup', 
+				keyField: 'HometownId', 
+				refKeyField: 'Id', 
+				refNameField: 'City', 
+				getRows: (e) => {
+					return new Promise(function (resolve, reject) {
+
+						const rows = new TestData().getCity(e);
+
+						if (rows != null) {
+							resolve(rows);
+						} else {
+							reject(Error("Error getting rows"));
+						}
+					});
+				}
+			},
+		]
+	};
+
+
+	<GridCD 
+		getRows={loadRows} 
+		getColumns={loadColumns} 
+		allowEdit={true}
+	/>
+
+Some grid properties
+
+	uid - grid uid
+	keyField - primary key
+	nameField - name field
+	parentGrids - parent grids uids
+	buttons - buttons array 
+				[
+					{ 
+						id: 1, 
+						name: 'commit', 
+						title: 'Commit changes', 
+						label: 'Commit', 
+						img: Images.commit, 
+						click: (e) => grid.commitChanges(e), 
+						getDisabled: (e) => grid.commitChangesDisabled(e) 
 					},
-					body: JSON.stringify(e.params)
-                };
-
-				fetch(`/awesome-api-url/`, fetchParams).then(
-					(response) => {
-						resolve(response.json());
-					}
-				)
-				.catch(error => {
-					reject(error);
-				});
-		    });
-		};
-
-		function loadColumns() {
-			return [
-				{ name: 'Id', sortable: true, filtrable: true },
-				{ name: 'Name', sortable: true, filtrable: true },
-				{ name: 'SecondName', sortable: true, filtrable: true },
-				{ name: 'Date', sortable: true },
-				{ name: 'Comment', sortable: true, filtrable: true },
-				{ name: 'HometownId', visible: false },
-				{
-					name: 'Hometown', 
-					sortable: true, 
-					filtrable: true, 
-					type: 'lookup', 
-					keyField: 'HometownId', 
-					refKeyField: 'Id', 
-					refNameField: 'City', 
-					getRows: (e) => {
-						return new Promise(function (resolve, reject) {
-
-							const rows = new TestData().getCity(e);
-
-							if (rows != null) {
-								resolve(rows);
-							} else {
-								reject(Error("Error getting rows"));
+					... 
+				]
+	multi - rows multiselect through a pocket
+	renderCell - custom render grid cell
+	pageSize - grid page size
+	applyConnection - Returns the condition applied to the grid when the active record 
+						of the parent grid changes.
+						This condition can be passed to your controller to process 
+						the condition of the relationship of the child table with the parent							  
+
+						For example 
+						applyConnection(e) {
+							if (e.parent) {
+								return `ChildTable.parentID in (${e.parent.selectedValue()})`;
 							}
-						});
-					}
-				},
-			]
-		};
+						}
 
 
-		<GridFE 
-			getRows={loadRows} 
-			getColumns={loadColumns} 
-			allowEditGrid={true}
-		/>
+For more examples see DebugApp.jsx
 
-Some grid properties
+	Your App.jsx should look like this
 
-			uid - grid uid
-			parentGrids - parent grids uids
-			buttons - buttons array [{ id: 1, name: 'commit', title: 'Commit changes', label: 'Commit', img: Images.commit, click: (e) => grid.commitChanges(e), getDisabled: (e) => grid.commitChangesDisabled(e) }, ... ]
-			multi - rows multiselect through a pocket
-			renderCell - custom render grid cell
-			getDefaultLinkContent - returns an object containing a data using when child grid responds to the parent grid active record
-			pageSize - grid page size
+	import DebugApp from '../node_modules/react-graph-grid/src/Tests/DebugApp'
+	import '../node_modules/react-graph-grid/src/css/default.css'
 
+	function App() {
+	  return (
+		  <>
+			  <DebugApp></DebugApp>
+		</>
+	  )
+	}
 
-For more examples see DebugApp.jsx
+	export default App
 
-0.0.5 version
 
-		"Adjust column visibility" option added to GridFE.jsx module
+0.1.1 version
+		
+		Readme file updated
+
+0.1.0 version
+
+		Removed getDefaultLinkContent, added applyConnection function
+
+0.0.7 version
+
+		Fixed GridDB and its dropdown communication
 
 0.0.6 version
 
 		Fixed GridFE.showColumnsSettings() function
 
-0.0.7 version
+0.0.5 version
+
+		"Adjust column visibility" option added to GridFE.jsx module
 
-		Fixed GridDB and its dropdown communication

package/package.json

@@ -3,7 +3,7 @@
   "author": "Mikhail Razumtsev",
   "description": "A React package containing a grid that can communicate with other grids through a connection graph",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite --port 4000",
@@ -12,8 +12,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

package/src/Card.jsx

@@ -0,0 +1,333 @@
+import { useState, useEffect } from 'react';
+import { Images } from './Themes/Images';
+import { FieldEdit } from './FieldEdit';
+import { GridFEClass } from './GridFE';
+// =================================================================================================================================================================
+export function Card(props) {
+    let card = null;
+
+    const [gridState, setState] = useState({ grid: card, ind: 0 });
+
+    card = gridState.grid;
+    let needGetRows = false;
+    if (!card || card.uid !== props.uid && props.uid != null) {
+        card = null;
+        if (props.findGrid) {
+            card = props.findGrid(props);
+        }
+        card = card || new CardClass(props);
+        needGetRows = !card.changedRow;
+    }
+
+    if (props.init) {
+        props.init(card);
+    }
+
+    card.refreshState = function () {
+        setState({ grid: card, ind: card.stateind++ });
+    }
+
+    useEffect(() => {
+        card.setupEvents();
+
+        if (needGetRows && card.selectedRow() == null) {
+
+            card.getRows().then(
+                rows => {
+                    card.rows = rows;
+                    card.afterGetRows();
+                    card.refreshState();
+                }
+            );
+        }
+        else if (card.columns.length <= 0 && card.getColumns) {
+            card.prepareColumns().then(() => card.refreshState());
+        }
+
+        return () => {
+            card.clearEvents();
+
+            if (card.graph && card.graph.nodeCount) {
+                card.graph.nodeCount--;
+            }
+        }
+    }, [card, needGetRows])
+
+    return (card.render());
+}
+// =================================================================================================================================================================
+export class CardClass extends GridFEClass {
+
+    constructor(props) {
+        super(props);
+
+        const card = this;
+
+        card.visible = true;
+
+        card.allowEdit = props.allowEdit;
+        card.isVisible = props.isVisible || card.isVisible;
+        card.activeRow = props.activeRow || '';
+        card.refreshState = card.refreshState || (() => { });
+
+        card.reqInd = 0;
+        card.changedRow = {};
+        card.initialRow = props.cardRow;
+        Object.assign(card.changedRow, card.initialRow);
+
+        if (props.isNewRecord) {
+            card.isNewRecord = true;
+            card.setEditing(true);
+        }
+
+        card.cardButtons = [];
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    render() {
+        const card = this;
+
+        card.addCardButtons();
+        card.buttons = card.cardButtons;
+
+        return (
+            <>
+                <div className='graph-card-toolbar'
+                    key={`cardToolbarDiv_${card.id}_`}
+                    style={{ margin: '0 1em' }}
+                >
+                    {super.renderToolbar()}
+                </div>
+                <div className="graph-card-div"
+                    key={`cardBodyDiv_${card.id}_`}
+                >
+                    {
+                        card.columns.map((col) => { return card.renderField(col) })
+                    }
+                </div>
+                {super.renderPopup()}
+            </>
+        )
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    renderField(col) {
+        const card = this;
+
+        if (col.visible == false) return <></>;
+
+        const isLookup = col.type === 'lookup';
+        let row = card.changedRow;
+        let value = isLookup ? row[col.keyField] : row[col.name];
+        value = value != null ? value : '';
+        if (col.type == null) {
+            col.type = '';
+        }
+        else if (isLookup) {
+            col.grid = card;
+        }
+
+        return (
+            <div className="graph-card-field"
+                key={`cardLookupDiv_${card.id}_${col.id}_`}
+                style={{ margin: '0 1em 0.5em 1em' }}
+            >
+                <span
+                    key={`cardLookupTitle_${card.id}_${col.id}_`}
+                    style={{ gridColumn: 'span 3', width: 'calc(100% - 4px)' }}
+                >
+                    {col.title || col.name}
+                </span>
+                <FieldEdit
+                    keyPref={card.id + '_card_'}
+                    column={col}
+                    value={value}
+                    text={row[col.name]}
+                    findFieldEdit={() => { return col._fieldEditObj; }}
+                    large={true}
+                    level={card.level}
+                    disabled={card.allowEdit == null || card.allowEdit != true}
+                    init={
+                        (fe) => {
+                            if (card.isEditing() && !card.changedRow) {
+                                card.changedRow = {};
+                                Object.assign(card.changedRow, card.selectedRow());
+                            }
+
+                            row = !card.isEditing() ? card.selectedRow() : card.changedRow;
+
+                            col._fieldEditObj = fe;
+                            fe.value = isLookup ? row[col.keyField] : row[col.name];
+                            fe.value = fe.value != null ? fe.value : '';
+
+                            fe.text = row[col.name];
+                        }
+                    }
+                    onChange={(e) => {
+                        if (!card.changedRow) {
+                            card.changedRow = {};
+                            Object.assign(card.changedRow, card.selectedRow());
+                        }
+
+                        if (isLookup) {
+                            card.changedRow[col.keyField] = e.value;
+                            card.changedRow[col.name] = e.text;
+                            if (!card.isEditing()) {
+                                card.setEditing(true);
+                            }
+                            card.refreshState();
+                        }
+                        else {
+                            card.changedRow[col.name] = e.value;
+                            card.setEditing(true);
+                            card.refreshState();
+                        }
+                    }}
+                >
+                </FieldEdit>
+            </div>
+        )
+
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    addCardButtons() {
+        const card = this;
+
+        if (card._cardButtonsAdded) return;
+
+        card._cardButtonsAdded = true;
+
+        //card.cardButtons.push({
+        //    id: card.cardButtons.length,
+        //    name: 'edit',
+        //    title: card.translate('Start edit'),
+        //    label: images.edit ? '' : card.translate('Start edit'),
+        //    click: (e) => card.startEditNode(e),
+        //    img: images.edit
+        //});
+
+        card.cardButtons.push({
+            id: card.cardButtons.length,
+            name: 'commit',
+            title: card.translate('Commit changes'),
+            label: card.translate('Commit'),
+            img: Images.images.commit,
+            click: (e) => card.commitChangesNode(e),
+            getDisabled: (e) => card.commitChangesNodeDisabled(e),
+        });
+
+        card.cardButtons.push({
+            id: card.cardButtons.length,
+            name: 'rollback',
+            title: card.translate('Rollback changes'),
+            label: card.translate('Rollback'),
+            img: Images.images.rollback,
+            click: (e) => {
+                card.rollbackChangesNode(e);
+                if (card.isNewRecord && card.close) card.close(e);
+            },
+            getDisabled: (e) => card.rollbackChangesNodeDisabled(e),
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    commitChangesNodeDisabled() {
+        const card = this;
+        if (!card.isEditing()) return true;
+
+        let requiredColumnsFilled = true;
+
+        for (let col of card.columns) {
+            if (!col.required || col.readonly) continue;
+
+            let val = card.changedRow[col.name];
+            if (col.required && (val == null || val === '')) {
+                requiredColumnsFilled = false;
+                break;
+            }
+        }
+
+        return !requiredColumnsFilled;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    rollbackChangesNodeDisabled() {
+        const card = this;
+        return !card.isEditing();
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    saveRow(e) {
+        const card = this;
+
+        if (!card.isRowChanged(e.row, card.changedRow)) return new Promise(function (resolve) { resolve(true); });
+
+        return new Promise(function (resolve) {
+            //e.row = card.initialRow = e.changedRow;
+            Object.assign(card.initialRow, card.changedRow);
+            resolve(true);
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    commitChangesNode() {
+        const card = this;
+        card.saveRow({ row: card.initialRow, changedRow: card.changedRow }).then(
+            () => {
+                if (card.isNewRecord || !card.keyField) {
+                    card.setEditing(false);
+                    Object.assign(card.initialRow, card.changedRow);
+                    card.refreshState();
+                }
+                else {
+                    card.getRows().then(
+                        rows => {
+                            card.rows = rows;
+                            card.changedRow = rows[0];
+                            Object.assign(card.initialRow, card.changedRow);
+                            card.setEditing(false);
+                            card.afterGetRows();
+                            card.refreshState();
+                        }
+                    );
+                }
+            }
+        ).catch((message) => {
+            Object.assign(card.changedRow, card.initialRow);
+            card.refreshState();
+            alert(message || 'Error!');
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    rollbackChangesNode() {
+        const card = this;
+        if (card.isNewRecord || !card.keyField) {
+            card.changedRow = {};
+            Object.assign(card.changedRow, card.initialRow);
+            card.setEditing(false);
+            card.refreshState();
+        }
+        else {
+            card.getRows().then(
+                rows => {
+                    card.rows = rows;
+                    card.changedRow = rows[0];
+                    Object.assign(card.initialRow, card.changedRow);
+                    card.setEditing(false);
+                    card.afterGetRows();
+                    card.refreshState();
+                }
+            );
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    selectedRow() {
+        const card = this;
+        return card.changedRow;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    getRows() {
+        const card = this;
+
+        return new Promise(function (resolve) {
+            const res = [card.initialRow];
+            card.totalRows = 1;
+            resolve(res);
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+}

package/src/FieldEdit.jsx

@@ -115,6 +115,8 @@ export class FieldEditClass extends BaseComponent {
 
         // просто разметка 'span 2' etc.
         fe.gridColumn = props.gridColumn;
+
+        fe._selectedOptions = [];
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     static _seq = 0;

package/src/Grid.jsx

@@ -291,7 +291,7 @@ export class GridClass extends BaseComponent {
                                                 gridTemplateRows: '1.5em auto',
                                                 gridAutoFlow: 'row',
                                                 width: 'calc(100% + 8px)',
-                                                justifyContent: 'space-between',
+                                                //justifyContent: 'space-between',
                                             }}
                                         >
                                             {grid.renderHeaderCell(col, context)}
@@ -475,7 +475,7 @@ export class GridClass extends BaseComponent {
             for (let key in row) {
                 if (grid.colDict[key]) continue;
 
-                const col = grid.getColumn(key);
+                const col = grid.createColumn(key);
 
                 grid.colDict[col.name] = col;
                 res.push(col);
@@ -485,7 +485,7 @@ export class GridClass extends BaseComponent {
         return res;
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    getColumn(name) {
+    createColumn(name) {
         return { name: name };
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------

package/src/GridCD.jsx

@@ -0,0 +1,180 @@
+/* eslint-disable no-mixed-operators */
+import { useState, useEffect } from 'react';
+import { GridFEClass } from './GridFE';
+import { Card } from './Card'; 
+// ==================================================================================================================================================================
+export function GridCD(props) {
+    let grid = null;
+
+    const [gridState, setState] = useState({ grid: grid, ind: 0 });
+
+    grid = gridState.grid;
+    let needGetRows = false;
+    if (!grid || grid.uid !== props.uid && props.uid != null) {
+        grid = null;
+        if (props.findGrid) {
+            grid = props.findGrid(props);
+        }
+        grid = grid || new GridCDClass(props);
+        needGetRows = !props.noAutoRefresh && !grid.hasVisibleParentGrids();
+    }
+
+    if (props.init) {
+        props.init(grid);
+    }
+
+    grid.refreshState = function () {
+        setState({ grid: grid, ind: grid.stateind++ });
+    }
+
+    useEffect(() => {
+        grid.setupEvents();
+
+        if (needGetRows && (grid.rows.length <= 0 || grid.columns.length <= 0) || grid._forceRefresh) {
+
+            grid._forceRefresh = false;
+
+            grid._waitingRows = true;
+            grid.getRows({ filters: grid.collectFilters(), grid: grid }).then(
+                rows => {
+                    grid.rows = rows;
+                    grid.afterGetRows();
+                    grid.refreshState();
+                }
+            ).finally(() => {
+                grid._waitingRows = false;
+                grid.refreshState();
+            });
+        }
+        else if (grid.columns.length <= 0 && grid.getColumns) {
+            grid.prepareColumns().then(() => grid.refreshState());;
+        }
+
+        return () => {
+            grid.clearEvents();
+        }
+    }, [grid, needGetRows])
+
+    return (grid.render());
+}
+
+// ==================================================================================================================================================================
+export class GridCDClass extends GridFEClass {
+
+    constructor(props) {
+        super(props);
+
+        const grid = this;
+        grid.allowView = true;
+
+        grid._buttonsDict['view'].getVisible = () => { return true; };
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    render() {
+        return (
+            <>
+                {super.render()}
+            </>
+        )
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    renderPopupContent(wnd) {
+        const grid = this;
+        return grid.cardIsShowing ? grid.renderCardContent(wnd) : super.renderPopupContent(wnd);
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    renderCardContent() {
+        const grid = this;
+        return (
+            grid.allowView == false ?
+                <div
+                    className={`graph-filter-title graph-filter-required`}
+                >
+                    {grid.translate('Insufficient rights to view')}
+                </div>
+                :
+                <Card
+                    cardRow={grid.cardRow || {}}
+                    isNewRecord={grid.isNewRecord}
+                    allowEdit={grid.allowEdit}
+                    uid={(grid.uid || grid.id) + '_card_'}
+                    keyField={grid.keyField}
+                    level={grid.level + 1}
+                    findGrid={() => {
+                        const selRow = grid.cardRow || grid.selectedRow();
+                        if (grid._card && selRow && grid._card.changedRow[grid.keyField] === selRow[grid.keyField]) {
+                            return grid._card;
+                        }
+                    }}
+                    init={(card) => {
+                        if (grid._card == card) return;
+
+                        grid._card = card;
+
+                        card.visible = true;
+                        card.columns = [];
+                        for (let col of grid.columns) {
+                            const remGetRows = col.getRows;
+                            delete col._fieldEditObj;
+                            delete col.grid;
+                            delete col._filterEditObj;
+                            delete col.getRows;
+
+                            // WARNING !!! потенциальная ошибка, если пользователь в потомке напихает в колонку объектов или функций !!!
+                            let clone = structuredClone(col);
+                            card.columns.push(clone);
+
+                            clone.getRows = col.getRows = remGetRows;
+
+                            col.grid = grid;
+                        }
+                        card.close = (e) => {
+                            grid.onClosePopup(e);
+                            grid.refreshState();
+                        }
+                    }}
+                >
+                </Card>
+        );
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    viewRecord(e) {
+        const grid = this;
+
+        const shift = (grid.level + 1) * 20;
+
+        grid.cardPos = grid.cardPos || { x: 100 + shift, y: 100 + shift, w: 800, h: 600 };
+        grid.popupPos = grid.cardPos;
+
+        grid.cardRow = grid.selectedRow();
+        grid.isNewRecord = false;
+        grid.cardIsShowing = true;
+        grid.popupIsShowing = true;
+        grid.popupTitle = grid.title;
+
+        grid.refreshState();
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    onClosePopup(e) {
+        const grid = this;
+
+        if (grid.cardIsShowing && grid._card) {
+            if (grid._card.isEditing() && (grid.isNewRecord || grid.isRowChanged(grid._card.changedRow, grid.selectedRow()))) {
+                e.cancel = !confirm(grid.translate('The row is changed. Discard changes?'));
+                if (e.cancel) {
+                    return;
+                }
+            }
+            delete grid._card;
+        }
+
+        super.onClosePopup(e);
+
+        if (e.cancel) return;
+
+        if (grid.cardIsShowing) {
+            grid.cardIsShowing = false;
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+}

package/src/GridDB.jsx

@@ -642,6 +642,7 @@ export class GridDBClass extends GridPKClass {
                         whiteSpace: 'nowrap',
                         overflowX: 'hidden',
                         width: sortDir ? 'calc(100% - 10px)' : '',
+                        textAlign: 'left',
                     }}
                     onClick={(e) => { if (!grid._waitingRows) grid.changeColumnSortOrder(col, e); }}
                     disabled={grid._waitingRows || col.disabled ? 'disabled' : ''}

package/src/GridFE.jsx

@@ -68,9 +68,12 @@ export class GridFEClass extends GridFLClass {
 
         const grid = this;
 
-        grid.allowEditGrid = props.allowEditGrid;
+        grid.allowEdit = props.allowEdit;
 
-        //grid.changedRow = {};
+        grid.allowView = false;
+        grid.allowAdd = true;
+        grid.allowCopy = true; 
+        grid.allowDelete = true;
 
         grid.closeSelfWnd = grid.closeSelfWnd || (() => { });
 
@@ -127,13 +130,13 @@ export class GridFEClass extends GridFLClass {
         delete grid._popupButtons;
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    renderPopupContent() {
+    renderPopupContent(wnd) {
         const grid = this;
-        return grid.columnsSettingsIsShowing ? grid.renderColumnsSettings() : <></>;
+        return grid.columnsSettingsIsShowing ? grid.renderColumnsSettings(wnd) : <></>;
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     renderCell(grid, col, row, selected) {
-        if (!grid.allowEditGrid && !col.allowVerticalResize || !selected || grid.isDisabled()) return super.renderCell(grid, col, row);
+        if (!grid.allowEdit && !col.allowVerticalResize || !selected || grid.isDisabled()) return super.renderCell(grid, col, row);
 
         row = !grid.isEditing() || !grid.changedRow ? row : grid.changedRow;
 
@@ -261,6 +264,7 @@ export class GridFEClass extends GridFLClass {
             img: Images.images.viewRecord,
             click: (e) => grid.viewRecord(e),
             getDisabled: (e) => grid.viewRecordDisabled(e),
+            getVisible: () => { return false; },
         });
 
         grid.buttons.push({
@@ -369,6 +373,8 @@ export class GridFEClass extends GridFLClass {
         const grid = this;
 
         grid.getNewRow().then((newRow) => {
+            grid.rows.unshift(newRow);
+            grid.selectedRowIndex = 0;
             grid.refreshState();
         });
     }
@@ -381,8 +387,10 @@ export class GridFEClass extends GridFLClass {
     copyRecord(e) {
         const grid = this;
 
-        let newRow;
+        const newRow = {};
         Object.assign(newRow, grid.selectedRow());
+        grid.rows.unshift(newRow);
+        grid.selectedRowIndex = 0;
 
         grid.refreshState();
     }
@@ -396,7 +404,7 @@ export class GridFEClass extends GridFLClass {
         const grid = this;
 
         if (window.confirm(grid.translate('Delete  record') + '?')) {
-            grid.deleteRow(e).then(() => grid.refresh());
+            grid.deleteRow(e).then(() => grid.refreshState());
         }
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
@@ -406,11 +414,6 @@ export class GridFEClass extends GridFLClass {
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     viewRecord(e) {
-        const grid = this;
-
-        let cardRow = grid.selectedRow();
-
-        grid.refreshState();
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     viewRecordDisabled(e) {
@@ -432,7 +435,7 @@ export class GridFEClass extends GridFLClass {
         const grid = this;
         super.onSelectedRowChanged(e);
 
-        if (grid.allowEditGrid && grid.refreshState) {
+        if (grid.allowEdit && grid.refreshState) {
             grid.refreshState();
         }
     }
@@ -460,7 +463,7 @@ export class GridFEClass extends GridFLClass {
         const grid = this;
         let res;
 
-        return (!grid.allowEditGrid || !grid.isEditing()) && !grid.isDisabled();
+        return (!grid.allowEdit || !grid.isEditing()) && !grid.isDisabled();
 
         const row = grid.rows[rowIndex];
         await grid.saveRow({ row: row, changedRow: grid.changedRow }).then(
@@ -486,18 +489,33 @@ export class GridFEClass extends GridFLClass {
         return selected ? '1' : grid.stateind;
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    isRowChanged(row) {
+    isRowChanged(row, secondRow) {
         const grid = this;
-        if (!grid.changedRow) return false;
+        secondRow = secondRow || grid.changedRow;
+
+        if (!secondRow) return false;
 
         let res = false;
-        for (let col in grid.changedRow) {
-            if (grid.changedRow[col] !== row[col]) return true;
+        for (let col of grid.columns) {
+            if (secondRow[col.name] !== row[col.name]) return true;
         }
 
         return res;
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    getNewRow() {
+        const grid = this;
+
+        return new Promise(function (resolve, reject) {
+            const newRow = {};
+            for (let col of grid.columns) {
+                newRow[col.name] = '';
+            }
+            newRow[grid.keyField] = -1;
+            resolve(newRow);
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     saveRow(e) {
         const grid = this;
 
@@ -509,6 +527,16 @@ export class GridFEClass extends GridFLClass {
         });
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    deleteRow(e) {
+        const grid = this;
+        e.row = e.row || grid.selectedRow();
+
+        return new Promise(function (resolve, reject) {
+            grid.rows = grid.rows.filter(item => item != e.row);
+            resolve(true);
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     getGridSettingsList() {
         const res = super.getGridSettingsList();
 

package/src/GridFL.jsx

@@ -413,7 +413,7 @@ export class GridFLClass extends GridDBClass {
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     getHeaderGridTemplateColumns(col) {
-        return col.sortInd == null ? 'auto 12px' : 'auto 22px';
+        return col.sortInd == null ? 'auto 16px' : 'auto 22px';
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     getGridSettingsList() {

package/src/GridGR.jsx

@@ -68,8 +68,8 @@ export class GridGRClass extends GridClass {
             grid.entity = props.entity;
         }
 
-        if (props.getDefaultLinkContent) {
-            grid.getDefaultLinkContent = props.getDefaultLinkContent;
+        if (props.applyConnection) {
+            grid.applyConnection = props.applyConnection;
         }
 
         if (!props.graph && (props.parentGrids || props.uid)) {
@@ -139,7 +139,7 @@ export class GridGRClass extends GridClass {
             let parentGrid = graph.nodesDict[uid];
             if (parentUids.indexOf(parentGrid.uid) <= 0) continue;
 
-            const link = { content: grid.getDefaultLinkContent(), parent: parentGrid, child: grid };
+            const link = { parent: parentGrid, child: grid };
 
             const lkey = grid.id + '_' + parentGrid.id;
             graph.linksDict[lkey] = link;
@@ -152,19 +152,10 @@ export class GridGRClass extends GridClass {
         }
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    getDefaultLinkContent() {
-        const grid = this;
-        return {
-            applyLink: function (link) {
-                if (!link.parent || !link.parent.rows) return '';
-
-                if (link.parent.getConnectContent) {
-                    return link.parent.getConnectContent({ child: grid });
-                }
+    applyConnection(link) {
+        if (!link.parent || !link.parent.rows) return '';
 
-                return link.parent.selectedValue();
-            }
-        };
+        return link.parent.selectedValue();
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     getEntity() {
@@ -228,15 +219,12 @@ export class GridGRClass extends GridClass {
 
         for (let uid of grid.parents) {
             let link = grid.graph.linksDict[grid.id + '_' + grid.graph.nodesDict[uid].id];
-            if (!link.content) continue;
 
-            if (link.content.applyLink) {
-                let filter = link.content.applyLink(link);
-                if (filter == null || filter === '') continue;
+            let filter = grid.applyConnection(link);
+            if (filter == null || filter === '') continue;
 
-                let fo = { type: 'graphLink', filter: filter };
-                filters.push(fo);
-            }
+            let fo = { type: 'graphLink', filter: filter };
+            filters.push(fo);
         }
 
         return filters;

package/src/Tests/DebugApp.jsx

@@ -8,6 +8,7 @@ import { GridGR } from '../GridGR';
 import { GridDB } from '../GridDB';
 import { GridFL } from '../GridFL';
 import { GridFE } from '../GridFE';
+import { GridCD } from '../GridCD';
 import { FieldEdit } from '../FieldEdit';
 //import { GridINU } from '../GridINU';
 //import { GraphComponent } from '../GraphComponent';
@@ -192,7 +193,7 @@ function DebugApp() {
             case 4:
                 return (
                     <>
-                        <Modal uid="m02" isModal={true} renderContent={(wnd) => { return drawDropdownInModal(wnd) }} closeWhenEscape={true}
+                        <Modal uid="m02" isModal={true} title="Dropdown" renderContent={(wnd) => { return drawDropdownInModal(wnd) }} closeWhenEscape={true}
                             dimensionsByContent={true}
                             pos={{ x: 100, y: 100, w: 300, h: 250 }}></Modal>
                     </>
@@ -200,6 +201,9 @@ function DebugApp() {
             case 5:
                 return (
                     <>
+                        <div className="div-on-menu">
+                            Change the active record in the parent grid to see the child rows.
+                        </div>
                         <div className="div-on-menu">
                             {drawClearConsole()}
                         </div>
@@ -214,6 +218,9 @@ function DebugApp() {
             case 6:
                 return (
                     <>
+                        <div className="div-on-menu">
+                            Grid with pager, pocket and sortable columns. Hold shift to sort by multiple columns.
+                        </div>
                         <div className="div-with-grid">
                             <GridDB getRows={GetFamily} buttons={GetButtons()} getColumns={GetFamilyColumns} multi={true}></GridDB>
                         </div>
@@ -222,6 +229,9 @@ function DebugApp() {
             case 7:
                 return (
                     <>
+                        <div className="div-on-menu">
+                            Grid with column filters.
+                        </div>
                         <div className="div-with-grid">
                             <GridFL getRows={GetFamily} buttons={GetButtons()} getColumns={GetFamilyColumns}></GridFL>
                         </div>
@@ -265,8 +275,22 @@ function DebugApp() {
             case 9:
                 return (
                     <>
+                        <div className="div-on-menu">
+                            Editable grid.
+                        </div>
+                        <div className="div-with-grid">
+                            <GridFE getRows={GetFamily} getColumns={GetFamilyColumns} allowEdit={true}></GridFE>
+                        </div>
+                    </>
+                );
+            case 10:
+                return (
+                    <>
+                        <div className="div-on-menu">
+                            Editable grid with card-based record view.
+                        </div>
                         <div className="div-with-grid">
-                            <GridFE getRows={GetFamily} getColumns={GetFamilyColumns} allowEditGrid={true}></GridFE>
+                            <GridCD getRows={GetFamily} getColumns={GetFamilyColumns} allowEdit={true}></GridCD>
                         </div>
                     </>
                 );
@@ -297,7 +321,8 @@ function DebugApp() {
                 <option>7. GridFL</option>
                 <option>8. Field Edit</option>
                 <option>9. GridFE</option>
-                <option>10. TEST</option>
+                <option>10. GridCD</option>
+                <option>11. TEST</option>
             </select>
             <div className="div-on-menu">
                 {getTestApp()}

package/src/Themes/Translate.jsx

@@ -28,8 +28,10 @@
             'DESC': 'убыв',
             'ERROR GETTING ROWS': 'Ошибка при получении строк',
             'EXPAND': 'Развернуть',
+            'EXPORT TO CSV': 'Экспорт в CSV',
             'EXIT': 'Выход',
             'FIRST': 'К началу',
+            'INSUFFICIENT RIGHTS TO VIEW': 'Недостаточно прав для просмотра',
             'INVISIBLE COLUMNS': 'Невидимые колонки',
             'LARGE BUTTONS': 'Большие',
             'LAST': 'В конец',
@@ -58,6 +60,7 @@
             'SMALL BUTTONS': 'Маленькие',
             'SORT': 'Сортировка',
             'THEME': 'Тема',
+            'THE ROW IS CHANGED. DISCARD CHANGES?': 'Запись изменена. Отказаться от изменений?',
             'TOTAL PAGES': 'Всего страниц',
             'TOTAL ROWS': 'Всего строк',
             'TREE': 'Дерево',

package/src/css/default.css

@@ -133,7 +133,7 @@
 .grid-header-div-default {
     user-select: none;
     display: grid;
-    grid-template-columns: auto 8px;
+    grid-template-columns: auto 8px; 
     grid-template-rows: auto auto;
     grid-auto-flow: row;
     align-items: center;