From 3d32f7913608d86f4c350e724e9fc06d353ea2f8 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Sat, 5 Sep 2026 16:39:59 +0530 Subject: [PATCH] Integrated latest changes at 09-05-2026 4:30:06 PM --- .../grid/grouping-single-multiple/app/App.jsx | 35 +++ .../grid/grouping-single-multiple/app/App.tsx | 34 +++ .../app/datasource.jsx | 77 +++++++ .../app/datasource.tsx | 76 +++++++ .../grouping-single-multiple/app/index.tsx | 5 + .../grid/grouping-single-multiple/custom.css | 3 + .../grid/grouping-single-multiple/index.css | 9 + .../grid/grouping-single-multiple/index.html | 68 ++++++ .../systemjs.config.js | 54 +++++ ej2-react/grid/editing/batch-editing.md | 159 +++++++------- ej2-react/grid/editing/cell-editing.md | 53 +++-- .../grid/editing/command-column-editing.md | 14 +- ej2-react/grid/editing/dialog-editing.md | 146 ++++++------- ej2-react/grid/editing/edit-types.md | 159 +++++++------- ej2-react/grid/editing/edit.md | 151 +++++++------ ej2-react/grid/editing/in-line-editing.md | 176 ++++++++------- .../grid/editing/persisting-data-in-server.md | 40 ++-- ej2-react/grid/editing/template-editing.md | 18 +- ej2-react/grid/editing/validation.md | 24 ++- ej2-react/grid/grouping/caption-template.md | 19 +- ej2-react/grid/grouping/grouping.md | 201 ++++++++++-------- ej2-react/grid/grouping/lazy-load-grouping.md | 36 +--- 22 files changed, 984 insertions(+), 573 deletions(-) create mode 100644 ej2-react/code-snippet/grid/grouping-single-multiple/app/App.jsx create mode 100644 ej2-react/code-snippet/grid/grouping-single-multiple/app/App.tsx create mode 100644 ej2-react/code-snippet/grid/grouping-single-multiple/app/datasource.jsx create mode 100644 ej2-react/code-snippet/grid/grouping-single-multiple/app/datasource.tsx create mode 100644 ej2-react/code-snippet/grid/grouping-single-multiple/app/index.tsx create mode 100644 ej2-react/code-snippet/grid/grouping-single-multiple/custom.css create mode 100644 ej2-react/code-snippet/grid/grouping-single-multiple/index.css create mode 100644 ej2-react/code-snippet/grid/grouping-single-multiple/index.html create mode 100644 ej2-react/code-snippet/grid/grouping-single-multiple/systemjs.config.js diff --git a/ej2-react/code-snippet/grid/grouping-single-multiple/app/App.jsx b/ej2-react/code-snippet/grid/grouping-single-multiple/app/App.jsx new file mode 100644 index 0000000000..0ea1b31277 --- /dev/null +++ b/ej2-react/code-snippet/grid/grouping-single-multiple/app/App.jsx @@ -0,0 +1,35 @@ +import { ColumnDirective, ColumnsDirective, GridComponent, Group, Inject } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { data } from './datasource'; +function App() { + + const gridRef = React.useRef(null); + const [isMultipleGrouping, setIsMultipleGrouping] = React.useState(false); + + const toggleGrouping = () => { + const grid = gridRef.current; + grid.clearGrouping(); + if (isMultipleGrouping) { + // Single column grouping + grid.groupSettings.columns = ['CustomerID']; + } else { + // Multiple column grouping + grid.groupSettings.columns = ['CustomerID', 'ShipCity']; + } + + setIsMultipleGrouping(!isMultipleGrouping); + }; + return
+ + + + + + + + + + +
+} +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/grouping-single-multiple/app/App.tsx b/ej2-react/code-snippet/grid/grouping-single-multiple/app/App.tsx new file mode 100644 index 0000000000..64ba0b8dc9 --- /dev/null +++ b/ej2-react/code-snippet/grid/grouping-single-multiple/app/App.tsx @@ -0,0 +1,34 @@ +import { ColumnDirective, ColumnsDirective, GridComponent, Group, Inject } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { useRef } from 'react'; +import { data } from './datasource'; +function App() { + + let grid: GridComponent | null; + const [isMultipleGrouping, setIsMultipleGrouping] = React.useState(false); + + const toggleGrouping = () => { + grid.clearGrouping(); + if (isMultipleGrouping) { + // Single column grouping + grid.groupSettings.columns = ['CustomerID']; + } else { + // Multiple column grouping + grid.groupSettings.columns = ['CustomerID', 'ShipCity']; + } + setIsMultipleGrouping(!isMultipleGrouping); + }; + return
+ + (grid = g)} dataSource={data} allowGrouping={true} height={267}> + + + + + + + + +
+} +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/grouping-single-multiple/app/datasource.jsx b/ej2-react/code-snippet/grid/grouping-single-multiple/app/datasource.jsx new file mode 100644 index 0000000000..04c281310b --- /dev/null +++ b/ej2-react/code-snippet/grid/grouping-single-multiple/app/datasource.jsx @@ -0,0 +1,77 @@ +export let data = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + } +]; diff --git a/ej2-react/code-snippet/grid/grouping-single-multiple/app/datasource.tsx b/ej2-react/code-snippet/grid/grouping-single-multiple/app/datasource.tsx new file mode 100644 index 0000000000..afaf656706 --- /dev/null +++ b/ej2-react/code-snippet/grid/grouping-single-multiple/app/datasource.tsx @@ -0,0 +1,76 @@ +export let data: Object[] = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + }]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/grouping-single-multiple/app/index.tsx b/ej2-react/code-snippet/grid/grouping-single-multiple/app/index.tsx new file mode 100644 index 0000000000..80b1b6ab05 --- /dev/null +++ b/ej2-react/code-snippet/grid/grouping-single-multiple/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/grouping-single-multiple/custom.css b/ej2-react/code-snippet/grid/grouping-single-multiple/custom.css new file mode 100644 index 0000000000..d6e15e4013 --- /dev/null +++ b/ej2-react/code-snippet/grid/grouping-single-multiple/custom.css @@ -0,0 +1,3 @@ +.e-grid .customcss { + background-color: #ecedee; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/grouping-single-multiple/index.css b/ej2-react/code-snippet/grid/grouping-single-multiple/index.css new file mode 100644 index 0000000000..e2de99fc99 --- /dev/null +++ b/ej2-react/code-snippet/grid/grouping-single-multiple/index.css @@ -0,0 +1,9 @@ +.e-grid .custom { + background-color: #f48fb1 !important;/* csslint allow: important */ + color: white; +} + +.e-grid .custom { + background-color: #fce4ec; + color: white; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/grouping-single-multiple/index.html b/ej2-react/code-snippet/grid/grouping-single-multiple/index.html new file mode 100644 index 0000000000..fed0397631 --- /dev/null +++ b/ej2-react/code-snippet/grid/grouping-single-multiple/index.html @@ -0,0 +1,68 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
Loading....
+
+ + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/grouping-single-multiple/systemjs.config.js b/ej2-react/code-snippet/grid/grouping-single-multiple/systemjs.config.js new file mode 100644 index 0000000000..8fbebdcefa --- /dev/null +++ b/ej2-react/code-snippet/grid/grouping-single-multiple/systemjs.config.js @@ -0,0 +1,54 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/23.1.36/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js", +"react":"https://unpkg.com/react@18.2.0/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/grid/editing/batch-editing.md b/ej2-react/grid/editing/batch-editing.md index 4969f6e362..0c20f7a10c 100644 --- a/ej2-react/grid/editing/batch-editing.md +++ b/ej2-react/grid/editing/batch-editing.md @@ -10,7 +10,9 @@ domainurl: ##DomainURL## # Batch Editing in React Data Grid -Batch editing is a powerful feature in the Grid component that enables simultaneous modification and saving of multiple cells in a single action. This feature provides an efficient way to make bulk changes without saving each change individually, making it particularly useful for large datasets. +Batch editing is a powerful feature in the Data Grid component that enables simultaneous modification and saving of multiple cells in a single action. This feature provides an efficient way to make bulk changes without saving each change individually, making it particularly useful for large datasets. + +## Enable batch editing To enable batch editing mode, set the [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#mode) property to `Batch`. When activated, double-clicking a cell enters edit mode, and bulk updates can be saved via the toolbar's `Update` button or by invoking the [batchSave](https://ej2.syncfusion.com/react/documentation/api/grid/edit#batchsave) method. @@ -31,34 +33,7 @@ To enable batch editing mode, set the [editSettings.mode](https://ej2.syncfusion {% previewsample "page.domainurl/code-snippet/grid/editing-cs2" %} -> For grid editing setup and configuration, refer to the [Edit Feature Setup](./edit#set-up-editing). - -## Automatically update the column based on another column edited value - -Synchronize column values dynamically by calculating and updating dependent columns in real-time as related columns are edited. This seamless data synchronization is particularly valuable for computed fields like totals, discounts, or derived metrics that depend on other cell values. This can be achieved using the [Cell Edit Template](https://ej2.syncfusion.com/react/documentation/grid/editing/edit-types#custom-editors-using-template) feature, this approach maintains data consistency without manual recalculation. - -In the following example, the "Total Cost" column value is updated based on changes to the "Unit Price" and "Units In Stock" columns. - -{% tabs %} -{% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/editing-cs3/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/editing-cs3/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/editing-cs3/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/editing-cs3/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/grid/editing-cs3" %} - -> The [updateCell](https://ej2.syncfusion.com/react/documentation/api/grid#updatecell) property can be used update cells in batch mode. - -## Cancel edit based on condition +## Prevent editing based on conditions Batch edit mode provides control over CRUD operations by allowing specific rows or cells to be protected from editing, adding, or deletion. This data integrity feature ensures only authorized modifications proceed. @@ -91,72 +66,60 @@ In the following demo, CRUD operations are prevented based on the "Role" column {% previewsample "page.domainurl/code-snippet/grid/editing-cs4" %} -## Adding a new row at the bottom of the grid +## Automatically update the column based on another column edited value -The Grid component supports inserting new row's form at the bottom of the grid, enabling efficient addition of new records without manual repositioning. The [newRowPosition](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#newrowposition) property in `editSettings` controls new row's form placement by setting it to `Bottom`. +Synchronize column values dynamically by calculating and updating dependent columns in real-time as related columns are edited. This seamless data synchronization is particularly valuable for computed fields like totals, discounts, or derived metrics that depend on other cell values. This can be achieved using the [Cell Edit Template](https://ej2.syncfusion.com/react/documentation/grid/editing/edit-types#custom-editors-using-template) feature, this approach maintains data consistency without manual recalculation. -Here's an example that demonstrates how to enable adding new rows at the bottom of the grid using `newRowPosition` property: +In the following example, the "Total Cost" column value is updated based on changes to the "Unit Price" and "Units In Stock" columns. {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/edit-batch-add-cs1/app/App.jsx %} +{% include code-snippet/grid/editing-cs3/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/edit-batch-add-cs1/app/App.tsx %} +{% include code-snippet/grid/editing-cs3/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/edit-batch-add-cs1/app/datasource.jsx %} +{% include code-snippet/grid/editing-cs3/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/edit-batch-add-cs1/app/datasource.tsx %} +{% include code-snippet/grid/editing-cs3/app/datasource.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/grid/edit-batch-add-cs1" %} + {% previewsample "page.domainurl/code-snippet/grid/editing-cs3" %} + +> The [updateCell](https://ej2.syncfusion.com/react/documentation/api/grid#updatecell) property can be used update cells in batch mode. + +## Adding a new row at the bottom of the grid + +The Data Grid supports inserting new row's form at the bottom of the grid, enabling efficient addition of new records without manual repositioning. The [newRowPosition](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#newrowposition) property in `editSettings` controls new row's form placement by setting it to `Bottom`. > - **Bottom position**: Tab moves between cells or rows in edit mode. Data entry in each cell with Tab press automatically creates new rows below the current row, allowing convenient addition of multiple rows without leaving edit mode. -> - **Top position**: Grid displays a blank row form at the top by default for new record entry. Upon saving or updating, the record inserts at the bottom of the grid, ensuring the new record appears at the end of the existing dataset. +> - **Top position**: Data Grid displays a blank row form at the top by default for new record entry. Upon saving or updating, the record inserts at the bottom of the grid, ensuring the new record appears at the end of the existing dataset. > - **Paging behavior**: Updating a row automatically moves it to the last page based on the page size. This behavior applies to both local and remote data binding. > - **Scrolling support**: Tab can add new rows even if the new row displays beyond the currently visible grid area. > - **Editing mode compatibility**: `newRowPosition` property supports `Normal` and `Batch` editing modes. -## Confirmation dialog - -Confirmation dialogs provide an additional layer of protection when performing critical actions in batch editing mode. The Grid component offers built-in confirmation dialogs for the following scenarios: - -| Action | Confirmation Trigger | -|--------|---------------------| -| **Save Changes** | Appears when clicking `Update` button in toolbar | -| **Cancel Changes** | Appears when clicking `Cancel` button to discard edits | -| **Delete Record** | Appears when deleting a row during batch mode | - -To enable or disable save confirmation, set the [editSettings.showConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showconfirmdialog) property to `true` (default) or `false`. - -Here's an example that demonstrates how to enable/disable the confirmation dialog using the `showConfirmDialog` property: - +The following example illustrates enabling the addition of new rows at the bottom of the grid with the `newRowPosition` property: {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/editing-cs5/app/App.jsx %} +{% include code-snippet/grid/edit-batch-add-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/editing-cs5/app/App.tsx %} +{% include code-snippet/grid/edit-batch-add-cs1/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/editing-cs5/app/datasource.jsx %} +{% include code-snippet/grid/edit-batch-add-cs1/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/editing-cs5/app/datasource.tsx %} +{% include code-snippet/grid/edit-batch-add-cs1/app/datasource.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/grid/editing-cs5" %} - -> * `editSettings.showConfirmDialog` requires [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#mode) = `Batch`. -> * When set to `false`, no confirmation dialog displays during batch editing. -> * Delete operations trigger a separate confirmation dialog when clicking delete or pressing the delete key. -> * Set `showConfirmDialog` to `false` and use [cellSaved](https://ej2.syncfusion.com/react/documentation/api/grid#cellsaved) with [batchSave](https://ej2.syncfusion.com/react/documentation/api/grid/edit#batchsave) for immediate saves. +{% previewsample "page.domainurl/code-snippet/grid/edit-batch-add-cs1" %} -## Single-click editing with arrow key navigation +## Single-click editing Single-click editing and arrow key navigation enhance data entry efficiency by eliminating the double-click requirement and enabling keyboard-driven cell-to-cell movement without mouse dependency. @@ -183,7 +146,36 @@ The example below demonstrates both features combined: {% previewsample "page.domainurl/code-snippet/grid/batch-edit-cs1" %} -## Save or update the changes immediately +## Enable Undo / Redo + +The Grid supports Undo / Redo actions in batch editing, allowing changes such as cell edits, row additions, and row deletions to be reverted or reapplied before saving. This feature can be enabled by setting the `editSettings.enableUndoRedo` property to `true`. + +Undo and redo operations can be performed using keyboard shortcuts. Press Ctrl + Z to undo an action, and Ctrl + Y to redo an action. + +In addition, `Undo` and `Redo` toolbar items can be added to the Grid toolbar to perform these actions through the user interface. + +Here's an example that demonstrates how to enable Undo / Redo in batch editing: + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/undo-redo-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/undo-redo-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/undo-redo-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/undo-redo-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/undo-redo-cs1" %} + +> Note: The maximum number of undo and redo actions stored in the stack can be controlled using the `editSettings.undoRedoLimit` property. This property limits the number of actions that can be reverted or reapplied during a batch editing session. The default value is `20`. + +## Save changes immediately The Grid component provides a convenient way to save or update changes immediately in batch mode without the need for a separate Save button. This feature is particularly useful when editing data efficiently without manually triggering a save action. @@ -206,33 +198,44 @@ The `cellSaved` event is triggered when a cell is saved in the grid, allowing cu {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/batch-edit-cs2" %} +{% previewsample "page.domainurl/code-snippet/grid/batch-edit-cs2" %} -## Enable Undo / Redo +## Confirmation dialog -The Grid supports Undo / Redo actions in batch editing, allowing changes such as cell edits, row additions, and row deletions to be reverted or reapplied before saving. This feature can be enabled by setting the `editSettings.enableUndoRedo` property to **true**. - -Undo and redo operations can be performed using keyboard shortcuts. Press Ctrl + Z to undo an action, and Ctrl + Y to redo an action. - -In addition, **Undo** and **Redo** toolbar items can be added to the Grid toolbar to perform these actions through the user interface. +Confirmation dialogs provide an additional layer of protection when performing critical actions in batch editing mode. The Grid component offers built-in confirmation dialogs for the following scenarios: -Here's an example that demonstrates how to enable Undo / Redo in batch editing: +| Action | Confirmation Trigger | +|--------|---------------------| +| **Save Changes** | Appears when clicking `Update` button in toolbar | +| **Cancel Changes** | Appears when clicking `Cancel` button to discard edits | +| **Delete Record** | Appears when deleting a row during batch mode | + +To enable or disable save confirmation, set the [editSettings.showConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showconfirmdialog) property to `true` (default) or `false`. + +The following example demonstrates enabling or disabling the confirmation dialog using the `showConfirmDialog` property: {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/undo-redo-cs1/app/App.jsx %} +{% include code-snippet/grid/editing-cs5/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/undo-redo-cs1/app/App.tsx %} +{% include code-snippet/grid/editing-cs5/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/undo-redo-cs1/app/datasource.jsx %} +{% include code-snippet/grid/editing-cs5/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/undo-redo-cs1/app/datasource.tsx %} +{% include code-snippet/grid/editing-cs5/app/datasource.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/grid/undo-redo-cs1" %} +{% previewsample "page.domainurl/code-snippet/grid/editing-cs5" %} + +> * `editSettings.showConfirmDialog` requires [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#mode) = `Batch`. +> * Set `showConfirmDialog` to `false` and use [cellSaved](https://ej2.syncfusion.com/react/documentation/api/grid#cellsaved) with [batchSave](https://ej2.syncfusion.com/react/documentation/api/grid/edit#batchsave) for immediate saves. + +## See also -> Note: The maximum number of undo and redo actions stored in the stack can be controlled using the `editSettings.undoRedoLimit` property. This property limits the number of actions that can be reverted or reapplied during a batch editing session. The default value is `20`. \ No newline at end of file +* [Editing types](./edit-types) +* [Dialog editing](./dialog-editing) +* [Validation](./validation) \ No newline at end of file diff --git a/ej2-react/grid/editing/cell-editing.md b/ej2-react/grid/editing/cell-editing.md index 2e64f38c02..5eb85373ee 100644 --- a/ej2-react/grid/editing/cell-editing.md +++ b/ej2-react/grid/editing/cell-editing.md @@ -10,7 +10,9 @@ domainurl: ##DomainURL## # Cell Editing in React Data Grid -Cell editing provides a streamlined way to update individual cell values directly within the grid. Cell editing is designed for quick, inline modifications, making data entry and corrections more efficient. This approach ensures that changes are applied seamlessly to large datasets while maintaining consistency with the Grid’s overall editing experience. +Cell editing provides a streamlined way to update individual cell values directly within the grid. It is designed for quick, inline modifications, making data entry and corrections more efficient. This approach ensures that changes are applied seamlessly to large datasets while maintaining consistency with the grid’s overall editing experience. + +## Enable cell editing To enable cell editing in the Data Grid, configure the [editSettings->mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#mode) property to `Cell` and allow editing through the [editSettings->allowEditing](https://ej2.syncfusion.com/react/documentation/api/grid/editSettingsModel#allowediting) property. This setup provides a seamless inline editing experience, letting users quickly update individual cell values directly within the grid. @@ -33,6 +35,29 @@ To enable cell editing in the Data Grid, configure the [editSettings->mode](http > When editing is enabled, it is necessary to set the [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/grid/columnModel#isprimarykey) property value to `true` for the unique column to ensure accurate data updates. +## Single-click editing + +Enabling single-click editing in the Syncfusion® React Grid’s `Cell` editing mode is a valuable and intuitive feature that makes a cell editable with just one click. This seamless experience is achieved by using the `editCell` method for rapid, efficient data modification. + +To implement this, bind the `onClick` event for the grid and, within the event handler, call the `editCell` method based on the clicked target element. This ensures that the editing mode is triggered when clicking on a specific element within the grid. + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/cell-edit-cs3/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/cell-edit-cs3/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/cell-edit-cs3/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/cell-edit-cs3/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/grid/cell-edit-cs3" %} + ## Cancel edit based on condition The Grid provides the ability to cancel the edit operations for particular cell based on specific conditions. This feature allows controlling whether editing should be allowed or prevented for certain cells in the grid. This functionality is achieved by leveraging the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/grid#actionbegin) event of the Grid component. This event is triggered when a CRUD (Create, Read, Update, Delete) operation is initiated in the grid. @@ -67,25 +92,9 @@ Apply the desired condition and cancel the operation by setting the `args.cancel {% previewsample "page.domainurl/code-snippet/grid/cell-edit-cs2" %} -## Single-click editing - -Enabling single-click editing in the Syncfusion® React Grid’s `Cell` editing mode is a valuable and intuitive feature that makes a cell editable with just one click. This seamless experience is achieved by using the `editCell` method for rapid, efficient data modification. - -To implement this, bind the `onClick` event for the grid and, within the event handler, call the `editCell` method based on the clicked target element. This ensures that the editing mode is triggered when clicking on a specific element within the grid. - -{% tabs %} -{% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/cell-edit-cs3/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/cell-edit-cs3/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/cell-edit-cs3/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/cell-edit-cs3/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} + ## See also - {% previewsample "page.domainurl/code-snippet/grid/cell-edit-cs3" %} \ No newline at end of file +* [Normal editing](./in-line-editing) +* [Batch editing](./batch-editing) +* [Template editing](./template-editing) +* [Validation](./validation) \ No newline at end of file diff --git a/ej2-react/grid/editing/command-column-editing.md b/ej2-react/grid/editing/command-column-editing.md index 5b11542464..4c6ac0e842 100644 --- a/ej2-react/grid/editing/command-column-editing.md +++ b/ej2-react/grid/editing/command-column-editing.md @@ -10,9 +10,7 @@ domainurl: ##DomainURL## # Command Column Editing in React Data Grid -The command column editing feature enables seamless CRUD (Create, Read, Update, Delete) action buttons in a column for performing operations on individual rows. This powerful feature is particularly useful when inline editing, deletion, or saving of row changes is required directly within the grid interface. - -> For basic editing setup and configuration, refer to the [Editing Feature Setup](../editing#set-up-editing). +The command column feature provides built‑in action buttons within a dedicated column, enabling direct interaction with individual rows. These commands can be configured for editing, saving, and deleting records, as well as for custom operations such as viewing details or integrating external actions. This approach streamlines row‑level interactions and ensures a consistent experience within the grid interface. ## Enable command column editing @@ -56,13 +54,15 @@ The available built-in command buttons are: {% previewsample "page.domainurl/code-snippet/grid/editing-cs6" %} -## Custom command column +> For basic editing setup and configuration, refer to the [Editing Feature Setup](../editing#set-up-editing). + +## Custom command column button -The custom command column feature extends the Grid component's capabilities by enabling custom command buttons in a column to perform specific actions on individual rows. This is particularly powerful when specialized functionality for editing, deletion, or custom operations is required beyond the built-in command set. +Custom command columns provide additional row-level actions beyond the built-in command buttons. This is particularly powerful when specialized functionality for editing, deletion, or custom operations is required beyond the built-in command set. -Custom command buttons utilize the [commands](https://ej2.syncfusion.com/react/documentation/api/grid/column#commands) property for definition. The [commandClick](https://ej2.syncfusion.com/react/documentation/api/grid#commandClick) event handles the custom button click actions, enabling any operation such as displaying grid details in a dialog or triggering custom workflows. +To define custom command buttons, use the [commands](https://ej2.syncfusion.com/react/documentation/api/grid/column#commands) property. Associate the desired actions with these buttons through the [commandClick](https://ej2.syncfusion.com/react/documentation/api/grid#commandClick) event, allowing custom logic to be executed on button click. -The following code demonstrates how to implement custom command buttons with the `commands` property and handle custom actions through the `commandClick` event to display grid details in a dialog: +The following example demonstrates custom command buttons using the `commands` property and custom click behavior through the `commandClick` event, which is used here to show row details in a dialog: {% tabs %} {% highlight js tabtitle="App.jsx" %} diff --git a/ej2-react/grid/editing/dialog-editing.md b/ej2-react/grid/editing/dialog-editing.md index bd45187aa4..dccf53dfd1 100644 --- a/ej2-react/grid/editing/dialog-editing.md +++ b/ej2-react/grid/editing/dialog-editing.md @@ -10,7 +10,9 @@ domainurl: ##DomainURL## # Dialog Editing in React Grid Component -The React Data Grid Component dialog editing provides a powerful, efficient way to edit row data through a dedicated modal dialog window that focuses attention on the editing form. Instead of editing cells directly in the grid, multiple field values can be entered and modified at once in a clean, organized form. The grid automatically saves all changes to the data source without navigating away from the current page making data entry faster, more intuitive, and less error-prone, especially when dealing with complex records that span multiple columns. +Dialog editing in the [Data Grid](https://www.syncfusion.com/react-components/react-data-grid) component provides an efficient way to edit row data through a dedicated modal dialog window that focuses attention on the editing form. Instead of editing cells directly in the grid, multiple field values can be entered and modified at once in a clean, organized form. The grid automatically saves all changes to the data source without navigating away from the current page making data entry faster, more intuitive, and less error-prone, especially when dealing with complex records that span multiple columns. + +## Enable dialog editing To enable dialog editing in the grid component, set the [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#mode) property to `Dialog`. This property determines the editing mode for the grid. @@ -33,75 +35,6 @@ To enable dialog editing in the grid component, set the [editSettings.mode](http > For basic grid editing setup and configuration, refer to the [Edit Feature Setup](./edit#set-up-editing). -## Customize edit dialog - -The edit dialog is a modal window that isolates the editing form and prevents grid interaction until the dialog closes. Customize this dialog to match application needs by handling the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/grid#actioncomplete) event. - -**Customizable options**: -- Header text, close button visibility, and height -- Button text and localization strings -- Dialog behavior based on the editing action - -Use the `requestType` parameter to identify which action triggered the event and apply appropriate customizations: - -| Request Type | Description | -|--------------|-------------| -| `beginEdit` | Editing an existing record | -| `add` | Creating a new record | -| `save` | Updating a new or existing record | -| `delete` | Deleting an existing record | - -> Refer to the grid [Default text](../global-local) list for localization options. - -{% tabs %} -{% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/customizedialog-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/customizedialog-cs1/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/customizedialog-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/customizedialog-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/grid/customizedialog-cs1" %} - -> The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog's height up to 658px. - -## Show or hide columns in dialog editing - -Column visibility can be dynamically controlled in dialog editing mode. The [actionBegin](https://ej2.syncfusion.com/react/documentation/api/grid#actionbegin) event enables showing or hiding specific columns based on whether an existing record is being edited or a new record is being added. - -The `actionBegin` event is triggered whenever an action is initiated in the grid (editing, adding, or deleting a record). Within the event `requestType` parameter determines how to manage column visibility in the event handler: - -| Request Type | Action | Column Visibility Control | -|---|---|---| -| `beginEdit` or `add` | Editing or creating a record | Modify visibility using the `visible` property | -| `save` | Saving the record | Reset columns to initial visibility state using `visible` property | - -In the following example, the "Customer ID" column is rendered as a hidden column, and the "Ship Country" column is rendered as a visible column. In the edit mode, the "Customer ID" column will be changed to a visible state and the "Ship Country" column will be changed to a hidden state. - -{% tabs %} -{% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/customizedialog-cs2/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/customizedialog-cs2/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/customizedialog-cs2/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/customizedialog-cs2/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/grid/customizedialog-cs2" %} - ## Use wizard-like dialog editing Wizard-like dialog editing divides complex forms into manageable step-by-step sections with efficient navigation. The [editSettings.template](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#template) property enables custom form templates with multiple steps: @@ -436,7 +369,76 @@ export class DialogFormTemplate extends React.Component<{}, {}> { {% previewsample "page.domainurl/code-snippet/grid/wizardediting-cs1" %} -## Customize add/edit dialog footer +## Customize edit dialog + +The edit dialog is a modal window that isolates the editing form and prevents grid interaction until the dialog closes. Customize this dialog to match application needs by handling the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/grid#actioncomplete) event. + +**Customizable options**: +- Header text, close button visibility, and height +- Button text and localization strings +- Dialog behavior based on the editing action + +Use the `requestType` parameter to identify which action triggered the event and apply appropriate customizations: + +| Request Type | Description | +|--------------|-------------| +| `beginEdit` | Editing an existing record | +| `add` | Creating a new record | +| `save` | Updating a new or existing record | +| `delete` | Deleting an existing record | + +> Refer to the grid [Default text](../global-local) list for localization options. + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/customizedialog-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/customizedialog-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/customizedialog-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/customizedialog-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/grid/customizedialog-cs1" %} + +> The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog's height up to 658px. + +## Show or hide columns in dialog editing + +Column visibility can be dynamically controlled in dialog editing mode. The [actionBegin](https://ej2.syncfusion.com/react/documentation/api/grid#actionbegin) event enables showing or hiding specific columns based on whether an existing record is being edited or a new record is being added. + +The `actionBegin` event is triggered whenever an action is initiated in the grid (editing, adding, or deleting a record). Within the event `requestType` parameter determines how to manage column visibility in the event handler: + +| Request Type | Action | Column Visibility Control | +|---|---|---| +| `beginEdit` or `add` | Editing or creating a record | Modify visibility using the `visible` property | +| `save` | Saving the record | Reset columns to initial visibility state using `visible` property | + +In the following example, the "Customer ID" column is rendered as a hidden column, and the "Ship Country" column is rendered as a visible column. In the edit mode, the "Customer ID" column will be changed to a visible state and the "Ship Country" column will be changed to a hidden state. + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/customizedialog-cs2/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/customizedialog-cs2/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/customizedialog-cs2/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/customizedialog-cs2/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/grid/customizedialog-cs2" %} + +## Customize dialog footer The dialog footer can be customized to add custom buttons or modify button appearance with effortless integration. The default footer displays Save and Cancel buttons. The [actionComplete](https://ej2.syncfusion.com/react/documentation/api/grid#actioncomplete) event enables adding custom buttons, changing button text, or implementing custom button actions in the dialog footer. @@ -457,4 +459,4 @@ In the following sample, using the `dialog` argument of the `actionComplete` eve {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/customizedialog-cs3" %} + {% previewsample "page.domainurl/code-snippet/grid/customizedialog-cs3" %} \ No newline at end of file diff --git a/ej2-react/grid/editing/edit-types.md b/ej2-react/grid/editing/edit-types.md index aeb8d1f107..c5f721afac 100644 --- a/ej2-react/grid/editing/edit-types.md +++ b/ej2-react/grid/editing/edit-types.md @@ -8,15 +8,17 @@ documentation: ug domainurl: ##DomainURL## --- -# Edit Types in React Data Grid +# Edit Types and Custom Editors in React Data Grid -The React Grid component in Syncfusion® provides powerful edit types that enable seamless customization of the editing behavior for different column types. These edit types deliver flexibility in handling diverse data types, enhance the editing experience, and provide efficient solutions for different editing scenarios. +The Data Grid supports built-in edit types and custom editors for editing data within grid cells. It provides editor interfaces for different data types and supports custom editing experiences to meet specific application requirements. > For grid basic editing setup and configuration prerequisites, refer to the [Edit Feature Setup](./edit#set-up-editing). ## Built-in cell editors -The React Data Grid provides pre-built default editors that enhance data editing and input handling within the grid. The `editType` property specifies which editor component renders in a grid column during editing. Each data type (string, number, date, boolean) has a corresponding editor that automatically formats and validates user input. +The Data Grid includes built-in cell editors that provide an appropriate editing interface based on the column data type. For example, a date column can use a `DatePicker` editor, while a numeric column can use a `NumericTextBox` editor. This helps ensure that data is entered in a format that matches the column's data type. + +Cell editors can be enabled by setting the [editType](https://ej2.syncfusion.com/react/documentation/api/grid/editType) property in the grid column definition. Supported editors include `TextBox`, `NumericTextBox`, `DatePicker`, `DateTimePicker`, `CheckBox`, and `DropDownList` editors, enabling data entry and validation that align with the column's requirements. The available default edit types are as follows: The available default edit types are as follows: @@ -40,11 +42,11 @@ The following example demonstrates how to define the `editType` for grid columns ``` -> If edit type is not defined in the column, then it will be considered as the `stringedit` type (TextBox component). +> When the edit type is not defined for a column, the Data Grid defaults to the `stringedit` edit type and displays a `TextBox` editor for editing values. ## Customize built-in TextBox editor -Enhance the default [TextBox](../../textbox/getting-started) component in grid edit form by customizing its properties. This enables configuration of various TextBox features, tailoring its behavior and appearance to match specific requirements within the grid. Fine-tune the editor component behavior through the [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property for powerful customization options. +The [TextBox](../../textbox/getting-started) editor can be customized by configuring its component properties through the [columns.edit.params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) option. This allows TextBox features, behavior, and appearance to be customized during editing. Component|Edit Type |Description|Example Customized edit params -----|---|-----|-----| @@ -71,7 +73,7 @@ The following sample code demonstrates the customization applied to `TextBox` co ## Customize built-in NumericTextBox editor -Enhance the [NumericTextBox](../../numerictextbox/getting-started) component in grid edit form by customizing its properties. This enables configuration of various NumericTextBox features, tailoring its behavior and appearance to match specific requirements within the grid. Fine-tune the editor component behavior through the [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property for powerful numeric input control. +The [NumericTextBox](../../numerictextbox/getting-started) editor can be customized by configuring its component properties through the grid [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property. This allows `NumericTextBox` features, behavior, and appearance to be customized during editing. Component| Edit Type |Description |Example Customized edit params -----|-----|-----|----| @@ -96,15 +98,11 @@ The following sample code demonstrates the customization applied to `NumericText {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs1" %} -### Restrict decimal points in NumericTextBox during numeric column editing - -By default, the [NumericTextBox](../../numerictextbox/getting-started) component allows entering decimal values with up to two decimal places when editing a numeric column. However, there might be cases where restricting input to whole numbers only (without decimal points) is preferred. In such scenarios, use the [validateDecimalOnType](https://ej2.syncfusion.com/react/documentation/api/numerictextbox#validatedecimalontype) and [decimals](https://ej2.syncfusion.com/react/documentation/api/numerictextbox#decimals) properties provided by Syncfusion's `NumericTextBox` component. +### Restrict decimal input in NumericTextBox while editing -The `validateDecimalOnType` property is used to control whether decimal points are allowed during input in the NumericTextBox. By default, it is set to `false`, allowing decimal points to be entered. However, when set to `true`, decimal points will be restricted, and only whole numbers can be entered. +[NumericTextBox](../../numerictextbox/getting-started) allows decimal input by default. To restrict entries to whole numbers, use the [validateDecimalOnType](https://ej2.syncfusion.com/react/documentation/api/numerictextbox#validatedecimalontype) (set to `true` to block decimals) and [decimals][decimals](https://ej2.syncfusion.com/react/documentation/api/numerictextbox#decimals) properties. -The `decimals` property specifies the number of decimal places to be displayed in the NumericTextBox. By default, it is set to 2, meaning that two decimal places will be displayed. Modify this value to customize the decimal places according to specific requirements. - -In the below demo, while editing the row the decimal point value is restricted to type in the NumericTextBox of "Freight" column. +In this demo, while editing a row, decimal values are restricted when typing into the `NumericTextBox` of the "Freight" column. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -125,7 +123,7 @@ In the below demo, while editing the row the decimal point value is restricted t ## Customize built-in DropDownList editor -Enhance the [DropDownList](../../drop-down-list/getting-started) component in grid edit form by customizing its properties. This enables configuration of various DropDownList features, tailoring its behavior and appearance to match specific requirements within the grid. Fine-tune the editor component behavior through the [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property for flexible selection capabilities. +Customize the [DropDownList](../../drop-down-list/getting-started) editor via [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit). This allows configuration of DropDownList properties for string columns. Component|Edit Type |Description| Example Customized edit params -----|-----|-----|----| @@ -150,15 +148,15 @@ The following sample code demonstrates the customization applied to `DropDownLis {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs2" %} -### Provide custom data source for DropDownList editor +### Bind external data to DropDownList -In React Data Grid component, provide a custom data source for the [DropDownList](../../drop-down-list/getting-started) component in the edit form. This feature allows definition of a specific set of values for the DropDownList. +The Data Grid provides a custom data source for the `DropDownList` component in the edit form. This feature allows you to define a specific set of values for the `DropDownList`. To achieve this, utilize the [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property. This property allows definition of the edit params for the column within the grid. When setting a new data source using the edit params, specify a new [query](https://ej2.syncfusion.com/react/documentation/api/drop-down-list#query) property for the DropDownList. The `query` property allows definition of custom queries for data retrieval and filtering. -In the below demo, DropDownList is rendered with custom data source for the "Ship Country" column: +In the below demo, `DropDownList` is rendered with custom data source for the "Ship Country" column: {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -177,11 +175,11 @@ In the below demo, DropDownList is rendered with custom data source for the "Shi {% previewsample "page.domainurl/code-snippet/grid/cascade-drop-cs1" %} -### Enable filtering in DropDownList editor +### DropDownList editor with filter support -The [React Data Grid](https://www.syncfusion.com/react-components/react-data-grid) component provides filtering for the DropDownList within the edit form. This feature enables selection of options from a predefined list and easier search for specific items using the built-in filtering feature. +The Data Grid component provides filtering for the `DropDownList` within the edit form. This feature enables selection of options from a predefined list and easier search for specific items using the built-in filtering feature. -Enable filtering by setting the [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/drop-down-list#allowfiltering) property to `true` within the edit params. This will enable the filtering feature in the DropDownList. +Enable filtering by setting the [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/drop-down-list#allowfiltering) property to `true` within the edit params. This enables the filtering feature in the `DropDownList`. In the following demo, filtering is enabled for the "Ship Country" column: @@ -202,13 +200,13 @@ In the following demo, filtering is enabled for the "Ship Country" column: {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs3" %} -### Open DropDownList editor popup on cell focus +### DropDownList popup on focus Open the dropdown edit popup with a single click by focusing the dropdown element. This feature enables quick access and interaction with the dropdown options without the need for an additional click. To achieve this, utilize the [showPopup](https://ej2.syncfusion.com/react/documentation/api/drop-down-list#showpopup) method provided by the EJ2 DropDownList component. This method can be invoked within the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/grid#actioncomplete) event of the grid, which triggers when an action, such as editing, is completed. By calling the `showPopup` method in this event, open the popup for the dropdown edit. -To ensure that the dropdown column is the clicked edit target, set a global flag variable in the **mouseup** event along with `load` event. This flag variable determines if the clicked element corresponds to the dropdown column. +To ensure that the dropdown column is the clicked edit target, set a global flag variable in the `mouseup` event along with `load` event. This flag variable determines if the clicked element corresponds to the dropdown column. The following sample demonstrates how to open the popup when focusing on the edit cell using the `actionComplete` and `load` events: @@ -231,7 +229,7 @@ The following sample demonstrates how to open the popup when focusing on the edi ## Customize built-in CheckBox editor -Enhance the [CheckBox](../../check-box/getting-started) component in grid edit form by customizing its properties. This enables configuration of various CheckBox features, tailoring its behavior and appearance to match specific requirements within the Grid. Fine-tune the editor component behavior through the [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property for powerful boolean input control. +Customize the [CheckBox](../../check-box/getting-started) component using the [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property. Component| Edit Type |Description |Example Customized edit params -----|-----|-----|----| @@ -258,7 +256,7 @@ The following sample code demonstrates the customization applied to `CheckBox` c ## Customize built-in DatePicker editor -Enhance the [DatePicker](../../datepicker/getting-started) component in grid edit form by customizing its properties. This enables configuration of various DatePicker features, tailoring its behavior and appearance to match specific requirements within the grid. Fine-tune the editor component behavior through the [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property for powerful date selection control. +Enhance the [DatePicker](../../datepicker/getting-started) component in grid edit form by customizing its properties. This enables configuration of various DatePicker features, tailoring its behavior and appearance to match specific requirements within the grid. Fine-tune the editor component behavior through the [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property for date selection behavior. Component| Edit Type |Description|Example Customized edit params -----|-----|-----|----| @@ -283,11 +281,11 @@ The following sample code demonstrates the customization applied to `DatePicker` {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs6" %} -### Disable the date value prior to the selected date value in DatePicker +### Restrict minimum selectable date in DatePicker -The React Data Grid allows configuring the [DatePicker](../../datepicker/getting-started) to dynamically set a minimum selectable date. This ensures that only dates falling after a specified minimum date can be selected, based on the data in each row. This feature is particularly useful for maintaining data consistency and preventing selection of inappropriate or illogical dates. +Set a minimum selectable date dynamically in the DatePicker editor by configuring the minimum property in `edit` params. This prevents selection of dates prior to a specified value. -The following example demonstrates configuration of the `DatePicker` within the grid using the `edit` parameters of a column. This setup dynamically restricts the selection of dates in the DatePicker's calendar based on the data in the current row. +Example with dynamic min date: {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -308,7 +306,7 @@ The following example demonstrates configuration of the `DatePicker` within the ## Customize built-in DateTimePicker editor -Enhance the DateTimePicker component in grid edit form by customizing its properties. This enables configuration of various DateTimePicker features, tailoring its behavior and appearance to match specific requirements within the grid. Fine-tune the editor component behavior through the [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property for powerful date-time selection control. +Enhance the `DateTimePicker` component in grid edit form by customizing its properties. This enables configuration of various DateTimePicker features, tailoring its behavior and appearance to match specific requirements within the grid. Fine-tune the editor component behavior through the [columns->edit->params](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property for powerful date-time selection control. Component|Edit Type |Description |Example Customized edit params -----|-----|-----|----| @@ -333,49 +331,19 @@ The following sample code demonstrates the customization applied to DateTimePick {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs7" %} -## Access editor components using instance - -Accessing editor components in the React Data Grid enables seamless interaction with editor instances associated with cells during editing or adding actions. This feature is especially valuable when performing custom actions, retrieving data from the editor, or manipulating its properties during editing or adding operations in the grid. - -Access the component instance from the component element using the `ej2_instances` property. This property provides access to the instance of the editor component associated with a cell. - -In the below demo, access the editor component instance while adding or editing actions in the `actionComplete` event. - -{% tabs %} -{% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/edit-type-cs8/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/edit-type-cs8/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/edit-type-cs8/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/edit-type-cs8/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs8" %} - -## Render custom cell editors +## Render custom editor components -The React Data Grid provides seamless support for rendering custom cell editors within specific columns. Unlike built-in editors (TextBox, DatePicker, DropDownList), custom editors allow developers to integrate specialized components that match unique business requirements and data entry workflows. This powerful feature enables enhanced user experience by presenting the right editing interface for each data type. +Render custom editors for grid columns using the [editTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/column#edittemplate) property, and for advanced scenarios, by using custom create, write, read, and destroy methods in the [edit](https://ej2.syncfusion.com/react/documentation/api/grid/column#edit) property. -**About editTemplate Setup**: +> For custom components in `editTemplate`, use two-way binding (@bind-Value) to ensure updates propagate to the Grid. -- The `editTemplate` property specifies the cell edit template used as an editor for a particular column -- Custom components inside the `editTemplate` must be specified with two-way (`@bind-Value`) binding to reflect changes in the grid - -Each subsection below demonstrates rendering a specific component type within the edit template. - -### Render multiline TextBox component in edit form +### Render TextArea in the edit form The React Data Grid allows rendering a multiline [TextBox](../../textbox/multiline.md) component within the grid's edit form for a specific column. This enables editing and displaying multi-line text content, providing an efficient way to manage extensive text data. > When using a multiline textbox, use Shift+Enter to move to the next line. By default, pressing Enter will trigger a record update while in edit mode. -The following example demonstrates rendering a textArea component in the "Ship Address" column of the Syncfusion® React Grid. The [valueAccessor](https://ej2.syncfusion.com/react/documentation/api/grid/valueAccessor) property is utilized to split the text into multiple lines within the grid column: +The following example demonstrates rendering a `TextArea` component in the "Ship Address" column of the Syncfusion® React Grid. The [valueAccessor](https://ej2.syncfusion.com/react/documentation/api/grid/valueAccessor) property is utilized to split the text into multiple lines within the grid column: {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -394,7 +362,7 @@ The following example demonstrates rendering a textArea component in the "Ship A {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs9" %} -**Prevent the enter key functionality in multiline textbox while editing** +**Prevent Enter key from saving edits in a multiline textbox** Edit operation behavior in normal or dialog edit modes causes the current edit to be committed when the ENTER key is pressed. This behavior also applies to columns rendered with a multiline [TextBox](../../textbox/multiline.md), resulting in the edit operation being saved instead of inserting a new line. In multiline text input scenarios, inserting a line break within the text content is typically the expected behavior. @@ -421,9 +389,9 @@ The following example demonstrates preventing the ENTER key action in ### Render AutoComplete component in edit form -The React Data Grid allows rendering an [AutoComplete](../../auto-complete/getting-started) component within the grid's edit form for a specific column. This feature is especially valuable for providing dropdown-like auto-suggestion and input assistance for data entry in the grid's columns. +The Data Grid allows rendering an [AutoComplete](../../auto-complete/getting-started) component within the grid's edit form for a specific column. This feature is especially valuable for providing dropdown-like auto-suggestion and input assistance for data entry in the grid's columns. -The following example demonstrates rendering an `AutoComplete` component in the "Customer ID" column of the Syncfusion® React Grid. The `actionBegin` event is handled to update the edited value in the grid when the save button is clicked: +The following example demonstrates rendering an `AutoComplete` component in the "Customer ID" column of the grid. The `actionBegin` event is handled to update the edited value in the grid when the save button is clicked: {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -442,9 +410,9 @@ The following example demonstrates rendering an `AutoComplete` component in the {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs11" %} -### Render MaskedTextBox component in edit form +### Render MaskedTextBox in edit form -The React Data Grid allows rendering a [MaskedTextBox](../../maskedtextbox/getting-started) component within the grid's edit form for a specific column. This provides masked input fields for specific formats such as phone numbers or postal codes. +The Data Grid allows rendering a [MaskedTextBox](../../maskedtextbox/getting-started) component within the grid's edit form for a specific column. This provides masked input fields for specific formats such as phone numbers or postal codes. The following example demonstrates rendering a `MaskedTextBox` component in the "Customer Number" column: @@ -465,9 +433,9 @@ The following example demonstrates rendering a `MaskedTextBox` component in the {% previewsample "page.domainurl/code-snippet/grid/editing-cs13" %} -### Render DropDownList component in edit form +### Render DropDownList in edit form -The React Data Grid allows rendering a [DropDownList](../../drop-down-list/getting-started) component within the grid's edit form for a specific column. This provides convenient selection of options from a predefined list during editing. +The Data Grid allows rendering a [DropDownList](../../drop-down-list/getting-started) component within the grid's edit form for a specific column. This provides convenient selection of options from a predefined list during editing. The following example demonstrates rendering a `DropDownList` component in the "Ship Country" column: @@ -488,13 +456,13 @@ The following example demonstrates rendering a `DropDownList` component in the " {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs13" %} -### Render images in the DropDownList editor component using the item template +### Render images in the DropDownList using the item template The React Data Grid allows rendering images in the [DropDownList](../../drop-down-list/getting-started) editor component, enhancing visual representation by displaying images for each dropdown item. Use the [itemTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-list#itemtemplate) property to customize the content of each item in the dropdown list. -The following example demonstrates rendering images in the `DropDownList` editor component using the `itemTemplate` within the "Employee Name" column of the Syncfusion® React Grid. Additionally, the `actionBegin` event is handled to update the edited value in the grid when the save button is clicked: +The following example demonstrates rendering images in the `DropDownList` editor component using the `itemTemplate` within the "Employee Name" column of the grid. Additionally, the `actionBegin` event is handled to update the edited value in the grid when the save button is clicked: {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -513,7 +481,7 @@ The following example demonstrates rendering images in the `DropDownList` editor {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs14" %} -### Render multiple columns in DropDownList component +### Render multiple columns in DropDownList The React Data Grid allows rendering a [DropDownList](../../drop-down-list/getting-started) component with multiple columns during editing, displaying detailed information for each item. @@ -538,9 +506,9 @@ The following example demonstrates rendering a `DropDownList` component with mul {% previewsample "page.domainurl/code-snippet/grid/multicolumn-dropdown-cs1" %} -### Render ComboBox component in edit form +### Render ComboBox in edit form -The React Data Grid allows rendering a [ComboBox](../../combo-box/getting-started) component within the grid's edit form for a specific column. This provides drop-down selection with auto-suggestions for data entry. +The Data Grid allows rendering a [ComboBox](../../combo-box/getting-started) component within the grid's edit form for a specific column. This provides drop-down selection with auto-suggestions for data entry. The following example demonstrates rendering a `ComboBox` component in the "Ship Country" column: @@ -561,9 +529,9 @@ The following example demonstrates rendering a `ComboBox` component in the "Ship {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs12" %} -### Render TimePicker component in edit form +### Render TimePicker in edit form -The React Data Grid allows rendering a [TimePicker](../../timepicker/getting-started) component within the Grid's edit form for a specific column. This provides time input for appointment times, event schedules, or other time-related data. +The Data Grid allows rendering a [TimePicker](../../timepicker/getting-started) component within the Grid's edit form for a specific column. This provides time input for appointment times, event schedules, or other time-related data. The following example demonstrates rendering a `TimePicker` component in the "Order Date" column: @@ -586,7 +554,7 @@ The following example demonstrates rendering a `TimePicker` component in the "Or > The `TimePicker` component displays only the time portion. However, all grid data operations—including editing, validation, and CRUD actions—are performed using a Date object value. The displayed time format does not change the underlying data type used by the grid. -### Render MultiSelect component in edit form +### Render MultiSelect in edit form The React Data Grid allows rendering a [MultiSelect](../../multi-select/getting-started) component within the grid's edit form, enabling selection of multiple values from a dropdown list when editing a specific column. @@ -611,7 +579,7 @@ The following example demonstrates rendering a `MultiSelect` component in the "S > When a `MultiSelect` editor is used, values are stored as a comma‑separated string in the grid data source. All grid data operations are performed based on this combined string value, as grid columns do not support array‑type values -### Render RichTextEditor component in edit form +### Render RichTextEditor in edit form The React Data Grid allows rendering the [RichTextEditor](../../rich-text-editor/getting-started) component within the edit form. This enables formatting and styling text content using bold, italic, underline, bullet lists, numbered lists, and other formatting options. @@ -636,7 +604,7 @@ The following example demonstrates rendering a `RichTextEditor` component in the {% previewsample "page.domainurl/code-snippet/grid/editing-cs14" %} -### Render Uploader component in edit form +### Render Uploader in edit form The React Data Grid allows rendering an [Uploader](../../uploader/getting-started) component within the grid's edit form. This enables uploading and managing files or images in a specific column during data editing. @@ -661,9 +629,9 @@ The following example demonstrates rendering an `Uploader` component in the "Ord > By default, the grid saves the cell when clicking outside the editor component. If components, like multiple popups, are dynamically rendered, the grid may not recognize them, causing the editor to close when the popup is clicked. To prevent this, apply the `edit-custom-template` class to both the main component and sub-components. If Syncfusion® components are being used, set their `cssClass` property to include the `edit-custom-template` class. -## Render custom cell editors using external function +## Rendering custom cell editors using external functions -The React Data Grid provides powerful capabilities for rendering custom cell editors, enabling the addition of specialized custom components to specific columns. This feature is essential for editing cell values using custom input elements or controls tailored to specific data types or workflows. +The Data Grid provides powerful capabilities for rendering custom cell editors, enabling the addition of specialized custom components to specific columns. This feature is essential for editing cell values using custom input elements or controls tailored to specific data types or workflows. To utilize the custom cell editor template feature, implement these four essential functions: @@ -736,4 +704,29 @@ In the below demo, cascading `DropDownList` rendered for "Ship Country" and "Shi {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/grid/cascade-drop-cs2" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/grid/cascade-drop-cs2" %} + +## Access editor components using instances + +Accessing editor components in the React Data Grid enables seamless interaction with editor instances associated with cells during editing or adding actions. This feature is especially valuable when performing custom actions, retrieving data from the editor, or manipulating its properties during editing or adding operations in the grid. + +Access the component instance from the component element using the `ej2_instances` property. This property provides access to the instance of the editor component associated with a cell. + +In the below demo, access the editor component instance while adding or editing actions in the `actionComplete` event. + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/edit-type-cs8/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/edit-type-cs8/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/edit-type-cs8/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/edit-type-cs8/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/grid/edit-type-cs8" %} \ No newline at end of file diff --git a/ej2-react/grid/editing/edit.md b/ej2-react/grid/editing/edit.md index a20c3e9cd8..836bf0faa2 100644 --- a/ej2-react/grid/editing/edit.md +++ b/ej2-react/grid/editing/edit.md @@ -51,7 +51,7 @@ Edit operations can be triggered through multiple methods. Each method offers a ## Edit modes -The Grid component supports multiple editing modes through the [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#mode) property. Each mode provides a different way to edit data. The appropriate mode should be selected based on application requirements and editing workflow needs. +The Data Grid supports multiple editing options to meet different data-editing requirements: | Mode | Behavior | Characteristics | |---|---|---| @@ -59,6 +59,8 @@ The Grid component supports multiple editing modes through the [editSettings.mod | `Batch` | Multiple rows or cells can be edited simultaneously. All changes saved together in one operation | Enables simultaneous editing before submission. Prevents accidental saves and allows reviewing all changes before committing to the data source | | `Dialog` | Row data opens in a dialog box that blocks the grid until closed | Consolidates data into a focused form interface for organized multi-field editing. Ensures focused editing and enforced validation before submission | +Use the [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#mode) property to specify the desired edit mode. + {% tabs %} {% highlight js tabtitle="App.jsx" %} {% raw %} @@ -103,7 +105,7 @@ For a comprehensive overview of edit modes and [edit types](./edit-types.md) ava > * Disable editing for a particular column by setting [allowEditing](https://ej2.syncfusion.com/react/documentation/api/grid/column#allowediting) to `false`. > * When [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/grid/column#isprimarykey) is set to `true`, the column is automatically made read-only during editing and is editable only when adding a new record. This is because primary key columns must remain unchanged to maintain row identification. -## Toolbar with edit option +## Edit records using the toolbar The toolbar with edit option feature in the Grid component provides a [built-in toolbar](../tool-bar/tool-bar-items.md) with various items for executing editing actions. This feature enables efficient edit operations on grid data, such as modifying cell values, updating changes, and canceling edits. @@ -128,9 +130,30 @@ The following example demonstrates how to enable the toolbar with edit option in {% previewsample "page.domainurl/code-snippet/grid/editing-cs17" %} +## Column validation + +Column validation applies validation rules to individual columns during edit operations, ensuring data accuracy before saving. Invalid data displays error messages and prevents saving. The [FormValidator](https://ej2.syncfusion.com/react/documentation/api/form-validator) component validates data using rules defined in the [validationRules](https://ej2.syncfusion.com/react/documentation/api/grid/column#validationrules) property for each column. + +Example of applying validation rules to a grid column: + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/editing-cs29/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/editing-cs29/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/editing-cs29/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/editing-cs29/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + ## Disable editing for particular column -The Grid component provides the option to disable editing for specific columns. This is useful when certain columns should remain read-only, such as columns containing calculated values, IDs, or system-generated data. +The Data Grid provides the option to disable editing for specific columns. This is useful when certain columns should remain read-only, such as columns containing calculated values, IDs, or system-generated data. ### Static column disabling @@ -262,11 +285,11 @@ export default App; > * To disable editing for a specific row using the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/grid#actionbegin) event, refer to [Disable editing for a particular row](./in-line-editing#cancel-edit-based-on-condition). > * To disable editing for a particular cell using the [cellEdit](https://ej2.syncfusion.com/react/documentation/api/grid#celledit) event, refer to [Disable editing for a particular cell](./batch-editing#cancel-edit-based-on-condition). -## Editing a template column +## Customize column editors using templates -By default, template columns in the grid do not require field properties. However, to leverage built-in grid editing functionality instead of implementing custom CRUD operations, define the `field` property for specific columns. +Customizing the editing experience for specific columns is possible by defining an editing template. Use the [field](https://ej2.syncfusion.com/react/documentation/api/grid/column#field) property to connect the column with its corresponding data field. -The [field](https://ej2.syncfusion.com/react/documentation/api/grid/gridcolumn#field) property maps the column to the corresponding field in the data source, enabling built-in edit options such as `editType`. The following example demonstrates a column template with built-in `DropDownList` `editType` implementation for the "Ship Country" column. +In this example, the "Ship Country" column is rendered with a template: {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -285,124 +308,124 @@ The [field](https://ej2.syncfusion.com/react/documentation/api/grid/gridcolumn#f {% previewsample "page.domainurl/code-snippet/grid/editing-cs35" %} -## Customize delete confirmation dialog - -By default, the Grid shows a confirmation dialog when attempting to delete a row. The appearance and content of this dialog can be customized to match application requirements. Customization can include changing the dialog header, icons, or button text. - -To customize the delete confirmation dialog, utilize the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/grid#toolbarclick) event. This event is triggered when a toolbar action is performed and allows modification of dialog properties. +## Edit enum column -Before customizing the delete dialog, ensure that the [showDeleteConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showdeleteconfirmdialog) property of the `editSettings` configuration is set to `true` to enable the confirmation dialog. Additionally, refer to the grid [Default text](../global-local.md) list for localization options if custom button text is needed. +Enum columns contain predefined list values (enumerated data). Instead of allowing free-form text input, using a dropdown editor ensures data consistency and prevents invalid entries. The [editTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/column#edittemplate) property enables custom editors for enum data. -The following example demonstrates how to customize the delete confirmation dialog using the `toolbarClick` event. +The following example demonstrates how to render a `DropDownList` component as an edit template for the "Employee Feedback" column, binding it to a predefined list of enum values: {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/edit-delete-cs1/app/App.jsx %} +{% include code-snippet/grid/edit-enum/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/edit-delete-cs1/app/App.tsx %} +{% include code-snippet/grid/edit-enum/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/edit-delete-cs1/app/datasource.jsx %} +{% include code-snippet/grid/edit-enum/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/edit-delete-cs1/app/datasource.tsx %} +{% include code-snippet/grid/edit-enum/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/edit-delete-cs1" %} + {% previewsample "page.domainurl/code-snippet/grid/edit-enum" %} -## Update boolean column value with a single click +## Edit complex column -Boolean columns (`true`/`false` values) can be toggled directly in the grid without opening an edit form. This provides a faster editing experience for simple yes/no data. This is achieved by rendering a checkbox component as a column template that updates the value immediately when clicked. +Complex columns contain nested data objects (such as "Name.FirstName"). When editing complex data with custom input elements, the binding syntax differs from simple columns. Use the underscore operator (`___`) instead of the dot operator (`.`) to correctly bind nested properties in edit templates. -The following example demonstrates how to render a `CheckBox` component as a template in the "Verified" column to enable single-click editing: +The following example demonstrates how to edit complex nested data. The "FirstName" and "LastName" properties (nested under "Name") are edited using input elements with names defined as "Name___FirstName" and "Name___LastName": {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/edit-single-click/app/App.jsx %} +{% include code-snippet/grid/edit-complex/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/edit-single-click/app/App.tsx %} +{% include code-snippet/grid/edit-complex/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/edit-single-click/app/datasource.jsx %} +{% include code-snippet/grid/edit-complex/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/edit-single-click/app/datasource.tsx %} +{% include code-snippet/grid/edit-complex/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/edit-single-click" %} + {% previewsample "page.domainurl/code-snippet/grid/edit-complex" %} -## Edit enum column +## Edit foreign key column -Enum columns contain predefined list values (enumerated data). Instead of allowing free-form text input, using a dropdown editor ensures data consistency and prevents invalid entries. The [editTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/column#edittemplate) property enables custom editors for enum data. +Foreign key columns display values from a related table. By default, the Grid renders a `DropDownList` component editor for foreign key columns. However, this can be customized to use other components like `ComboBox` to enable search and filtering capabilities (e.g., for enhanced data discovery). -The following example demonstrates how to render a `DropDownList` component as an edit template for the "Employee Feedback" column, binding it to a predefined list of enum values: +Use the [editTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/column#edittemplate) property to customize the editor component for foreign key columns. The following example demonstrates how to render a `ComboBox` component instead of `DropDownList` component for the "Employee Name" foreign key column. {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/edit-enum/app/App.jsx %} +{% include code-snippet/grid/edit-foreign-key/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/edit-enum/app/App.tsx %} +{% include code-snippet/grid/edit-foreign-key/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/edit-enum/app/datasource.jsx %} +{% include code-snippet/grid/edit-foreign-key/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/edit-enum/app/datasource.tsx %} +{% include code-snippet/grid/edit-foreign-key/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/edit-enum" %} + {% previewsample "page.domainurl/code-snippet/grid/edit-foreign-key" %} -## Edit complex column +## Customizing the delete confirmation dialog -Complex columns contain nested data objects (such as "Name.FirstName"). When editing complex data with custom input elements, the binding syntax differs from simple columns. Use the underscore operator (`___`) instead of the dot operator (`.`) to correctly bind nested properties in edit templates. +By default, the Grid shows a confirmation dialog when attempting to delete a row. The appearance and content of this dialog can be customized to match application requirements. Customization can include changing the dialog header, icons, or button text. -The following example demonstrates how to edit complex nested data. The "FirstName" and "LastName" properties (nested under "Name") are edited using input elements with names defined as "Name___FirstName" and "Name___LastName": +To customize the delete confirmation dialog, utilize the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/grid#toolbarclick) event. This event is triggered when a toolbar action is performed and allows modification of dialog properties. + +Before customizing the delete dialog, ensure that the [showDeleteConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showdeleteconfirmdialog) property of the `editSettings` configuration is set to `true` to enable the confirmation dialog. Additionally, refer to the grid [Default text](../global-local.md) list for localization options if custom button text is needed. + +The following example demonstrates how to customize the delete confirmation dialog using the `toolbarClick` event. {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/edit-complex/app/App.jsx %} +{% include code-snippet/grid/edit-delete-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/edit-complex/app/App.tsx %} +{% include code-snippet/grid/edit-delete-cs1/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/edit-complex/app/datasource.jsx %} +{% include code-snippet/grid/edit-delete-cs1/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/edit-complex/app/datasource.tsx %} +{% include code-snippet/grid/edit-delete-cs1/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/edit-complex" %} + {% previewsample "page.domainurl/code-snippet/grid/edit-delete-cs1" %} -## Edit foreign key column +## Update boolean column value with a single click -Foreign key columns display values from a related table. By default, the Grid renders a `DropDownList` component editor for foreign key columns. However, this can be customized to use other components like `ComboBox` to enable search and filtering capabilities (e.g., for enhanced data discovery). +The grid allows boolean column values (`true`/`false` values) to be toggled with a single click in normal editing mode. Use the column template feature to render a CheckBox for direct interaction. -Use the [editTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/column#edittemplate) property to customize the editor component for foreign key columns. The following example demonstrates how to render a `ComboBox` component instead of `DropDownList` component for the "Employee Name" foreign key column. +The following example demonstrates how to render a `CheckBox` component as a template in the "Verified" column to enable single-click editing: {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/edit-foreign-key/app/App.jsx %} +{% include code-snippet/grid/edit-single-click/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/edit-foreign-key/app/App.tsx %} +{% include code-snippet/grid/edit-single-click/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/edit-foreign-key/app/datasource.jsx %} +{% include code-snippet/grid/edit-single-click/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/edit-foreign-key/app/datasource.tsx %} +{% include code-snippet/grid/edit-single-click/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/edit-foreign-key" %} + {% previewsample "page.domainurl/code-snippet/grid/edit-single-click" %} ## Perform CRUD action externally @@ -462,17 +485,7 @@ The `rowSelected` event can be used to capture row selection and populate extern {% previewsample "page.domainurl/code-snippet/grid/edit-form" %} -## Troubleshoot editing works only for first row - -If editing or deleting only works for the first row in the grid, the [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/grid/column#isprimarykey) property is likely not configured. The primary key is essential for identifying which row to edit or delete. Without it, the grid cannot distinguish between rows. - -**Solution**: Set [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/grid/column#isprimarykey) to `true` on the column that contains unique identifiers: - -```ts - -``` - -## How to make a Grid column always editable +## Make a grid column always editable By default, editing happens when a row enters edit mode (double-click or Edit button). However, some columns may need to be editable at all times without requiring an edit action. Achieve this using column templates with input controls that save changes automatically. @@ -495,4 +508,18 @@ The following example demonstrates how to render a textbox in the "Freight" colu {% previewsample "page.domainurl/code-snippet/grid/editing-cs19" %} -> * When a template column has a corresponding `field` property defined, the value entered in the template column's input field is stored in the associated edit column of the row's data object. \ No newline at end of file +> When a template column has a corresponding `field` property defined, the value entered in the template column's input field is stored in the associated edit column of the row's data object. + +## Troubleshoot editing works only for first row + +If editing or deleting only works for the first row in the grid, the [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/grid/column#isprimarykey) property is likely not configured. The primary key is essential for identifying which row to edit or delete. Without it, the grid cannot distinguish between rows. + +**Solution**: Set [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/grid/column#isprimarykey) to `true` on the column that contains unique identifiers: + +```ts + +``` +## See also + +* [Cascading DropDownList with Data Grid editing](./edit-types#render-cascading-dropdownlist-in-edit-form) +* [Render Tab inside the dialog editing](./template-editing#render-tab-component-inside-the-dialog-template) \ No newline at end of file diff --git a/ej2-react/grid/editing/in-line-editing.md b/ej2-react/grid/editing/in-line-editing.md index 85016a22e8..70e495a382 100644 --- a/ej2-react/grid/editing/in-line-editing.md +++ b/ej2-react/grid/editing/in-line-editing.md @@ -10,7 +10,9 @@ domainurl: ##DomainURL## # Inline Editing in React Data Grid -The React Grid component in Syncfusion® provides a powerful in-line editing feature that enables seamless direct cell value editing within the grid row. This intuitive feature proves especially useful for quickly modifying data without requiring a separate edit form. In normal edit mode, the selected record transitions to an edit state, allowing cell values to be modified and saved to the data source with minimal effort. +The Data Grid component provides an efficient inline editing feature, enabling direct modification of row or cell values within the grid. Inline editing is ideal for streamlining data entry and updates without invoking a separate form. In normal edit mode, the selected record enters an editable state, allowing updates to cell values which are then saved back to the data source. + +## Enable inline editing To enable in-line editing in the grid component, set the [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#mode) property to `Normal`. This property determines the editing mode of the grid. @@ -35,9 +37,9 @@ To enable in-line editing in the grid component, set the [editSettings.mode](htt >* When enabling editing, it is necessary to set the [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/grid/columnModel#isprimarykey) property value to `true` for the unique column. > For basic editing setup and configuration, refer to the [Edit Feature Setup](./edit#set-up-editing). -## Update columns automatically based on edited values +## Update column values automatically -The Cell Edit Template feature enables automatic updating of a column’s value whenever a value in another column is edited. This powerful feature enables dynamic calculations and real-time updates to column values based on changes in related columns, streamlining data entry workflows. +The Cell Edit Template feature enables automatic updating of a column’s value whenever a value in another column is edited. This feature enables dynamic calculations and real-time updates to column values based on changes in related columns, streamlining data entry workflows. To enable this functionality: - Define the [editType](https://ej2.syncfusion.com/react/documentation/api/grid/columnModel#edittype) property to specify the editor type for editing. @@ -62,122 +64,107 @@ In the following example, the "Total Cost" column value is updated based on chan {% previewsample "page.domainurl/code-snippet/grid/editing-cs21" %} -## Cancel edit based on condition - -The Grid provides the ability to cancel the edit operations for particular row or cell based on specific conditions. This feature allows controlling whether editing should be allowed or prevented for certain rows or cells in the grid. This functionality is achieved by leveraging the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/grid#actionbegin) event of the Grid component. This event is triggered when a CRUD (Create, Read, Update, Delete) operation is initiated in the grid. - -This customization is useful when restricting editing for certain rows, such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the grid. - -To cancel the edit operation based on a specific condition, handle the `actionBegin` event of the Grid component and check the `requestType` parameter. This parameter indicates the type of action being performed: - -| Request Type | Description | -|--------------|-------------| -| `beginEdit` | Editing an existing record | -| `add` | Creating a new record | -| `save` | Updating a new or existing record | -| `delete` | Deleting an existing record | +## Set default values for new records -Apply the desired condition and cancel the operation by setting the `args.cancel` property to `true`. +Preset column values streamline data entry for new records. Set [defaultValue](https://ej2.syncfusion.com/react/documentation/api/grid/column#defaultvalue) for columns in the grid configuration to ensure these fields are pre-filled in new rows. {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/editing-cs22/app/App.jsx %} +{% include code-snippet/grid/editing-cs25/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/editing-cs22/app/App.tsx %} +{% include code-snippet/grid/editing-cs25/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/editing-cs22/app/datasource.jsx %} +{% include code-snippet/grid/editing-cs25/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/editing-cs22/app/datasource.tsx %} +{% include code-snippet/grid/editing-cs25/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/editing-cs22" %} - -## Perform CRUD action programmatically - -Programmatic CRUD operations enable creating, reading, updating, and deleting data through code rather than manual user interaction. This approach provides flexibility for advanced data manipulation workflows. The following table outlines key methods for programmatic CRUD operations: + {% previewsample "page.domainurl/code-snippet/grid/editing-cs25" %} -| Method | Description | Usage | -|--------|-------------|-------| -| [addRecord](https://ej2.syncfusion.com/react/documentation/api/grid#addrecord) | Add a new record to the grid | Pass the `data` parameter to add a record. Use the `index` parameter for a specific position. Without parameters, creates an empty row at index zero | -| [startEdit](https://ej2.syncfusion.com/react/documentation/api/grid#startedit) | Change the selected row to edit state | First select the row, then invoke this method. The selected row enters edit mode immediately. Without row selection along with default `showConfirmDialog` enabled state, "No records selected for edit operation" dialog appears | -| [updateRow](https://ej2.syncfusion.com/react/documentation/api/grid#updaterow) | Update row data in the data source | Provide the row `index` and the updated `data` as parameters. The data source updates accordingly | -| [setCellValue](https://ej2.syncfusion.com/react/documentation/api/grid#setcellvalue) | Update a particular cell in a row | Provide the primary key value, field name, and new value. Changes appear visually in the UI only (not persisted). Useful for unbound columns, auto-calculated columns, and formula columns | -| [deleteRecord](https://ej2.syncfusion.com/react/documentation/api/grid#deleterecord) | Remove a selected row from the grid | First select the row, then invoke this method. The selected row is immediately removed. Without row selection along with default `showConfirmDialog` enabled state, "No records selected for delete operation" dialog appears | +## Show confirmation dialog while deleting -> In both normal and dialog editing modes, these methods can be used. +The built-in confirmation dialog enhances data safety by requesting confirmation before deleting records. Enable this dialog by setting [showDeleteConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showdeleteconfirmdialog) in `editSettings` to `true` (default is `false`). {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/editing-cs23/app/App.jsx %} +{% include code-snippet/grid/editing-cs24/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/editing-cs23/app/App.tsx %} +{% include code-snippet/grid/editing-cs24/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/editing-cs23/app/datasource.jsx %} +{% include code-snippet/grid/editing-cs24/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/editing-cs23/app/datasource.tsx %} +{% include code-snippet/grid/editing-cs24/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/editing-cs23" %} +{% previewsample "page.domainurl/code-snippet/grid/editing-cs24" %} -## Show confirmation dialog while deleting +> The [showDeleteConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showdeleteconfirmdialog) property supports all editing modes. To customize the built-in delete confirmation dialog, see [here](./edit#customize-delete-confirmation-dialog) + +## Delete multiple rows -Displaying a confirmation dialog adds an extra layer of protection when deleting records from the grid. This intuitive dialog prompts for confirmation before proceeding with deletion, ensuring that accidental or undesired deletions are prevented. The Grid component provides a built-in, easy-to-implement confirmation dialog for confirming delete actions safely. +Multiple row deletion is supported via the in-built toolbar or through methods. -To enable the confirmation dialog for delete operations, set the [showDeleteConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showdeleteconfirmdialog) property of the `editSettings` configuration to `true`. By default, this property is set to `false`. +**Using the toolbar:** Set the [toolbar](https://ej2.syncfusion.com/react/documentation/api/grid#toolbar) property and set the [selectionSettings.type] to `Multiple`. Select rows and use the toolbar delete icon to remove them. {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/editing-cs24/app/App.jsx %} +{% include code-snippet/grid/edit-toolbar-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/editing-cs24/app/App.tsx %} +{% include code-snippet/grid/edit-toolbar-cs1/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/editing-cs24/app/datasource.jsx %} +{% include code-snippet/grid/edit-toolbar-cs1/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/editing-cs24/app/datasource.tsx %} +{% include code-snippet/grid/edit-toolbar-cs1/app/datasource.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/grid/editing-cs24" %} + {% previewsample "page.domainurl/code-snippet/grid/edit-toolbar-cs1" %} -> The [showDeleteConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showdeleteconfirmdialog) property supports all editing modes. To customize the built-in delete confirmation dialog, see [here](./edit#customize-delete-confirmation-dialog) +> The Delete keyboard shortcut key also removes selected records. -## Display default values for columns while adding +**Using method** -This powerful feature proves useful for pre-filling column values with defaults to streamline and accelerate data entry workflows. The Grid component allows setting default values for `ColumnDirective` when adding new records, reducing manual input and improving user experience. +Multiple rows can be deleted programmatically using the following methods. -To set a default value for a specific column, use the [defaultValue](https://ej2.syncfusion.com/react/documentation/api/grid/column#defaultvalue) property of the `ColumnDirective` configuration. By providing a default value, the grid automatically populates that value in the corresponding column when a new row is added. +| Method | Description | Usage | +|--------|-------------|-------| +| [deleteRecord](https://ej2.syncfusion.com/react/documentation/api/grid#deleterecord) | Delete a record with given options | When `fieldname` (primary key column field name) and `data` parameters are not provided, the grid deletes selected records. Invoke `grid.deleteRecord()` without parameters to delete the currently selected record | +| [deleteRow](https://ej2.syncfusion.com/react/documentation/api/grid#deleterow) | Delete any visible row by providing the row element | Selected rows are retrieved using `getSelectedRows()`, then each row is iterated and passed to the `deleteRow()` method as an HTMLRowElement parameter | + +> The [selectionSettings.type](https://ej2.syncfusion.com/react/documentation/api/grid/selectionSettings#type) property is set to `Multiple` to enable multiple row selection. +> To prevent accidental deletions, enable the [showDeleteConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showdeleteconfirmdialog) property of the `editSettings` configuration. {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/editing-cs25/app/App.jsx %} +{% include code-snippet/grid/edit-multiple-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/editing-cs25/app/App.tsx %} +{% include code-snippet/grid/edit-multiple-cs1/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/editing-cs25/app/datasource.jsx %} +{% include code-snippet/grid/edit-multiple-cs1/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/editing-cs25/app/datasource.tsx %} +{% include code-snippet/grid/edit-multiple-cs1/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/editing-cs25" %} + {% previewsample "page.domainurl/code-snippet/grid/edit-multiple-cs1" %} ## Add new rows at the bottom of the grid -The Grid component enables seamless addition of new rows at the bottom of the grid, inserting records at the end of the existing data set. This convenient feature proves particularly useful for intuitive record addition without requiring scroll repositioning, improving workflow efficiency. +The Data Grid enables seamless addition of new rows at the bottom of the grid, inserting records at the end of the existing data set. This convenient feature proves particularly useful for intuitive record addition without requiring scroll repositioning, improving workflow efficiency. By default, new row's form is inserted at the top of the grid for data entry. To change this behavior, set the [newRowPosition](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#newrowposition) property in the `editSettings` configuration to `Bottom`. This property controls the position where the new row form is inserted. @@ -201,9 +188,9 @@ By default, new row's form is inserted at the top of the grid for data entry. To >* The [newRowPosition](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#newrowposition) property is supported for `Normal` and `Batch` editing modes. >* When [newRowPosition](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#newrowposition) is set to `Bottom`, the grid displays a blank row form at the bottom by default for data entry. However, when the data is saved or updated, it is inserted at the top of the grid. -## Show add new row always in grid +## Always display an add new row in the grid -The React Data Grid simplifies record addition by consistently presenting a blank "add new row" form within the grid. To enable this feature, set the [showAddNewRow](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showaddnewrow) property within the `editSettings` configuration to `true`. This enables continuous record addition. The add new row displays at either the `top` or `bottom` of the grid content, depending on the [newRowPosition](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#newrowposition) property of `editSettings`. By default, the add new row displays at the top of the grid content. +The Data Grid simplifies record addition by consistently presenting a blank "add new row" form within the grid. To enable this feature, set the [showAddNewRow](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showaddnewrow) property within the `editSettings` configuration to `true`. This enables continuous record addition. The add new row displays at either the `top` or `bottom` of the grid content, depending on the [newRowPosition](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#newrowposition) property of `editSettings`. By default, the add new row displays at the top of the grid content. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -222,75 +209,80 @@ The React Data Grid simplifies record addition by consistently presenting a blan {% previewsample "page.domainurl/code-snippet/grid/editing-cs36" %} -> To save newly added records, press the Enter key or click the **Update** button on the toolbar after filling the add form. +> To save newly added records, press the Enter key or click the "Update" button on the toolbar after filling the add form. -### Limitations +### Constraints -* This feature is supported only for `Inline`/`Normal` editing mode and is not compatible with other edit modes. -* The new blank add row form will always be displayed at the top, even when the new row position is set to the bottom for Virtual Scrolling and Infinite Scrolling enabled grids. -* This feature is not compatible with the column virtualization feature. +The always‑visible add new row feature is compatible with `Inline`/`Normal` editing mode only. In grids with virtual or infinite scrolling, the blank row is consistently displayed at the top for stable behavior. -## Delete multiple rows from the grid +## Cancel edit based on condition -The delete multiple rows feature enables efficient and easy removal of multiple rows from the grid at once. This powerful feature proves useful for simultaneous deletion of multiple records, saving time in bulk operations. Two flexible approaches enable this feature: using the inbuilt toolbar delete option or using a programmatic method. +The Data Grid provides the ability to cancel the edit operations for particular row or cell based on specific conditions. This feature allows controlling whether editing should be allowed or prevented for certain rows or cells in the grid. This functionality is achieved by leveraging the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/grid#actionbegin) event of the Grid component. This event is triggered when a CRUD (Create, Read, Update, Delete) operation is initiated in the grid. -**Using the inbuilt toolbar delete option** +This customization is useful when restricting editing for certain rows, such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the grid. -The Grid component provides a user-friendly interface for performing various actions, including row deletion using the inbuilt toolbar. To enable delete multiple rows using the toolbar, configure the [toolbar](https://ej2.syncfusion.com/react/documentation/api/grid#toolbar) property and set the [selectionSettings.type](https://ej2.syncfusion.com/react/documentation/api/grid/selectionSettings#type) property to `Multiple` to enable multiple row selection. +To cancel the edit operation based on a specific condition, handle the `actionBegin` event of the Grid component and check the `requestType` parameter. This parameter indicates the type of action being performed: -To delete multiple selected records, first select multiple rows by highlighting or checking the corresponding checkboxes. Once desired rows are selected, the delete icon on the toolbar initiates deletion and removes the selected records from the grid. +| Request Type | Description | +|--------------|-------------| +| `beginEdit` | Editing an existing record | +| `add` | Creating a new record | +| `save` | Updating a new or existing record | +| `delete` | Deleting an existing record | + +Apply the desired condition and cancel the operation by setting the `args.cancel` property to `true`. {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/edit-toolbar-cs1/app/App.jsx %} +{% include code-snippet/grid/editing-cs22/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/edit-toolbar-cs1/app/App.tsx %} +{% include code-snippet/grid/editing-cs22/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/edit-toolbar-cs1/app/datasource.jsx %} +{% include code-snippet/grid/editing-cs22/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/edit-toolbar-cs1/app/datasource.tsx %} +{% include code-snippet/grid/editing-cs22/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/edit-toolbar-cs1" %} - -> The Delete keyboard shortcut key also removes selected records. + {% previewsample "page.domainurl/code-snippet/grid/editing-cs22" %} -**Using method** +## Perform CRUD operation programmatically -Delete multiple rows programmatically using the following methods: +Programmatic CRUD operations enable creating, reading, updating, and deleting data through code rather than manual user interaction. This approach provides flexibility for advanced data manipulation workflows. The following table outlines key methods for programmatic CRUD operations: | Method | Description | Usage | |--------|-------------|-------| -| [deleteRecord](https://ej2.syncfusion.com/react/documentation/api/grid#deleterecord) | Delete a record with given options | When `fieldname` (primary key column field name) and `data` parameters are not provided, the grid deletes selected records. Invoke `grid.deleteRecord()` without parameters to delete the currently selected record | -| [deleteRow](https://ej2.syncfusion.com/react/documentation/api/grid#deleterow) | Delete any visible row by providing the row element | Selected rows are retrieved using `getSelectedRows()`, then each row is iterated and passed to the `deleteRow()` method as an HTMLRowElement parameter | +| [addRecord](https://ej2.syncfusion.com/react/documentation/api/grid#addrecord) | Add a new record to the grid | Pass the `data` parameter to add a record. Use the `index` parameter for a specific position. Without parameters, creates an empty row at index zero | +| [startEdit](https://ej2.syncfusion.com/react/documentation/api/grid#startedit) | Change the selected row to edit state | First select the row, then invoke this method. The selected row enters edit mode immediately. Without row selection along with default `showConfirmDialog` enabled state, "No records selected for edit operation" dialog appears | +| [updateRow](https://ej2.syncfusion.com/react/documentation/api/grid#updaterow) | Update row data in the data source | Provide the row `index` and the updated `data` as parameters. The data source updates accordingly | +| [setCellValue](https://ej2.syncfusion.com/react/documentation/api/grid#setcellvalue) | Update a particular cell in a row | Provide the primary key value, field name, and new value. Changes appear visually in the UI only (not persisted). Useful for unbound columns, auto-calculated columns, and formula columns | +| [deleteRecord](https://ej2.syncfusion.com/react/documentation/api/grid#deleterecord) | Remove a selected row from the grid | First select the row, then invoke this method. The selected row is immediately removed. Without row selection along with default `showConfirmDialog` enabled state, "No records selected for delete operation" dialog appears | -> The [selectionSettings.type](https://ej2.syncfusion.com/react/documentation/api/grid/selectionSettings#type) property is set to `Multiple` to enable multiple row selection. -> To prevent accidental deletions, enable the [showDeleteConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#showdeleteconfirmdialog) property of the `editSettings` configuration. +> In both normal and dialog editing modes, these methods can be used. {% tabs %} {% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/edit-multiple-cs1/app/App.jsx %} +{% include code-snippet/grid/editing-cs23/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/edit-multiple-cs1/app/App.tsx %} +{% include code-snippet/grid/editing-cs23/app/App.tsx %} {% endhighlight %} {% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/edit-multiple-cs1/app/datasource.jsx %} +{% include code-snippet/grid/editing-cs23/app/datasource.jsx %} {% endhighlight %} {% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/edit-multiple-cs1/app/datasource.tsx %} +{% include code-snippet/grid/editing-cs23/app/datasource.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/grid/edit-multiple-cs1" %} + {% previewsample "page.domainurl/code-snippet/grid/editing-cs23" %} -## Move focus to a specific cell while editing a row +## Set focus to a specific cell during row editing -The Grid component enables moving focus to a specific cell when editing a row, rather than the default behavior of focusing on the first cell. This feature improves the editing experience by automatically focusing on the cell requiring immediate attention. +The Data Grid enables moving focus to a specific cell when editing a row, rather than the default behavior of focusing on the first cell. This feature improves the editing experience by automatically focusing on the cell requiring immediate attention. To achieve this functionality, leverage the [recordDoubleClick](https://ej2.syncfusion.com/react/documentation/api/grid#recordDoubleClick) event of the Grid component. The `recordDoubleClick` event is triggered when a row is double-clicked, indicating intent to edit. Handle this event and programmatically move focus to the desired cell within the row. @@ -311,9 +303,9 @@ To achieve this functionality, leverage the [recordDoubleClick](https://ej2.sync {% previewsample "page.domainurl/code-snippet/grid/editing-cs27" %} -## Enable editing in single click + ## Enable editing in single click -Enabling single-click editing in the Syncfusion® React Grid's `Normal` editing mode is a valuable and intuitive feature that makes a row editable with just one click. This seamless experience is achieved by using the [startEdit](https://ej2.syncfusion.com/react/documentation/api/grid#startedit) and [endEdit](https://ej2.syncfusion.com/react/documentation/api/grid#endedit) methods for rapid, efficient data modification. +Enabling single-click editing in the Data Grid's `Normal` editing mode is a valuable and intuitive feature that makes a row editable with just one click. This seamless experience is achieved by using the [startEdit](https://ej2.syncfusion.com/react/documentation/api/grid#startedit) and [endEdit](https://ej2.syncfusion.com/react/documentation/api/grid#endedit) methods for rapid, efficient data modification. To implement this feature, bind the `onMouseUp` React event for the grid and, within the event handler, call the `startEdit` and `endEdit` methods based on the clicked target element. This ensures that the editing mode is triggered when clicking on a specific element within the grid. diff --git a/ej2-react/grid/editing/persisting-data-in-server.md b/ej2-react/grid/editing/persisting-data-in-server.md index 95a7fe12c2..eb9ab10fc6 100644 --- a/ej2-react/grid/editing/persisting-data-in-server.md +++ b/ej2-react/grid/editing/persisting-data-in-server.md @@ -10,46 +10,48 @@ domainurl: ##DomainURL## # Server Data Persistence in React Data Grid -The [React Data Grid](https://www.syncfusion.com/react-components/react-data-grid) component allows data edited within the grid to be persisted in a database using RESTful web services. All CRUD (Create, Read, Update, Delete) operations within the grid are handled by the [DataManager](../../data), which can bind server-side data and send updates to the server. This capability is Essential® for maintaining data integrity and ensuring that changes made in the UI are reflected in the backend. - -> For your information, the ODataAdaptor persists data in the server as per OData protocol. +The [Data Grid](https://www.syncfusion.com/react-components/react-data-grid) component allows data edited within the grid to be persisted in a database using RESTful web services. All CRUD (Create, Read, Update, Delete) operations within the grid are handled by the [DataManager](../../data), which can bind server-side data and send updates to the server. This capability is Essential® for maintaining data integrity and ensuring that changes made in the UI are reflected in the backend. Syncfusion® provides multiple adaptors to handle different server protocols and APIs, enabling smooth integration with RESTful services. Below are the various adaptors you can use to persist data in the React Data Grid component. +> For your information, the ODataAdaptor persists data in the server as per OData protocol. + ## URL adaptor The [UrlAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#url-adaptor) is the base adaptor that facilitates communication between remote data services and the UI component. It allows seamless data binding and interaction with custom API services or any remote service through URLs. The UrlAdaptor is particularly useful when a custom API service has unique logic for handling data and CRUD operations. -For further details on configuration, refer to the [URL adaptor Documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/url-adaptor) +- For configuration details and examples, refer to the [URL adaptor Documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/url-adaptor). +- For CRUD examples, see [UrlAdaptor CRUD operations](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/url-adaptor#handling-crud-operations). + +## Remote Save adaptor + +The [RemoteSaveAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors/remote-save-adaptor) in the Data Grid component allows grid actions such as sorting, filtering, searching, and paging to be performed primarily on the client side, while handling CRUD operations (updating, inserting, and removing data) on the server side for data persistence. This approach optimizes performance by minimizing unnecessary server interactions. + +For further details on configuration, refer to the [Remote Save Adaptor Documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/remote-save-adaptor) ## OData V4 adaptor -The [ODataV4Adaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#odatav4-adaptor) in the React Data Grid Component facilitates seamless integration with OData V4 services, allowing for efficient data fetching and manipulation. CRUD operations can be performed using the ODataV4Adaptor in the React Data Grid component. +The [ODataV4Adaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#odatav4-adaptor) in the Data Grid Component facilitates seamless integration with OData V4 services, allowing for efficient data fetching and manipulation. CRUD operations can be performed using the ODataV4Adaptor in the React Data Grid component. -For further details on configuration, refer to the [OData v4 adaptor Documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/odatav4-adaptor). +- For configuration details and examples, refer to the [OData V4 Adaptor Documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/odatav4-adaptor). +- For CRUD examples, see [OData V4 Adaptor CRUD operations](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/odatav4-adaptor#handling-crud-operations). ## Web API adaptor The [WebApiAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#web-api-adaptor) extends the capabilities of the ODataAdaptor and is designed to interact with Web APIs created with OData endpoints. This adaptor ensures seamless communication between the React Data Grid and OData-based Web APIs, enabling efficient data retrieval and manipulation. -For further details on configuration, refer to the [Web API Adaptor documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/webapi-adaptor). +- For configuration details and examples, refer to the [Web API Adaptor documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/webapi-adaptor). +- For CRUD examples, see [Web API Adaptor CRUD operations](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/webapi-adaptor#crud-operations). -## Remote Save adaptor +## GraphQL adaptor -The `RemoteSaveAdaptor` in the React Data Grid component allows grid actions such as sorting, filtering, searching, and paging to be performed primarily on the client side, while handling CRUD operations (updating, inserting, and removing data) on the server side for data persistence. This approach optimizes performance by minimizing unnecessary server interactions. +The [GraphQLAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#graphql-adaptor) enables the Data Grid to communicate with GraphQL services and perform CRUD operations through GraphQL queries and mutations. It supports efficient data retrieval by allowing applications to request only the required data from the server. -For further details on configuration, refer to the [Remote Save Adaptor Documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/remote-save-adaptor) +Refer to the [GraphQL Adaptor documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/graphql-adaptor) for setup details, advanced features, and examples. ## Web Method adaptor The [WebMethodAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#webmethod-adaptor) facilitates data binding from remote services using web methods. This adaptor sends query parameters encapsulated within an object named value, allowing efficient communication between the client-side application and the server. -For further details on configuration, refer to the [Web Method Adaptor documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/web-method-adaptor). - -## GraphQL adaptor - -GraphQL is a powerful query language for APIs designed to provide a more efficient alternative to traditional REST APIs. It allows precise data fetching, reducing over-fetching and under-fetching of data. GraphQL offers a flexible and expressive syntax for querying, enabling clients to request only the specific data they require. - -The [GraphQLAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#graphql-adaptor) simplifies the interaction between the React Data Grid and GraphQL servers, allowing for efficient data retrieval with support for various operations such as CRUD (Create, Read, Update, Delete). - -For further details on configuration, refer to the [GraphQL adaptor documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/graphql-adaptor) +- For configuration, refer to [Web Method Adaptor documentation](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/web-method-adaptor). +- For CRUD examples, see [Web API Adaptor CRUD operations](https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/web-method-adaptor#handling-crud-operations). diff --git a/ej2-react/grid/editing/template-editing.md b/ej2-react/grid/editing/template-editing.md index 9102d2cb36..d7d6a8c2af 100644 --- a/ej2-react/grid/editing/template-editing.md +++ b/ej2-react/grid/editing/template-editing.md @@ -10,13 +10,13 @@ domainurl: ##DomainURL## # Custom Template Editing in React Data Grid -The [React Data Grid](https://www.syncfusion.com/react-components/react-data-grid) component supports template editing, providing a powerful and flexible way to customize the appearance and behavior of cells during editing. React templates enable defining the structure and content of cells within the grid. +The [Data Grid](https://www.syncfusion.com/react-components/react-data-grid) component supports template editing, providing a powerful and flexible way to customize the appearance and behavior of cells during editing. React templates enable defining the structure and content of cells within the grid. > For grid basic editing setup and configuration, refer to the [Edit Feature Setup](./edit#set-up-editing). ## Inline or Dialog template editing -The React Data Grid provides support for inline and dialog template editing, enabling customization of editing using [Forms](https://legacy.reactjs.org/docs/forms.html). Forms enable adding and updating grid records through template support in both dialog and inline edit modes. +The Data Grid provides support for inline and dialog template editing, enabling customization of editing using [Forms](https://legacy.reactjs.org/docs/forms.html). Forms enable adding and updating grid records through template support in both dialog and inline edit modes. To enable this feature, set the [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/grid/editSettings#mode) property to either `Normal` or `Dialog` and define grid editors using the `editSettings.template` template variable. @@ -175,13 +175,13 @@ export class DialogFormTemplate extends React.Component<{}, {}> { > The `Dialog` and `Inline` template form editors must have **name** attribute. -## Using template context +## Customize template editors using context -Template contexts enhance customization of grid edit forms by enabling access to row details, rendering editors as components, retrieving values from editors, setting focus to specific editors, disabling default form validation, and adding custom validation rules. These features apply to both inline and dialog editing modes. +Enhance custom edit forms by accessing the template context: obtain row details, render editors as components, retrieve values from editors, set the initial focus, disable default validation, and add custom validation. These features work for both `inline` and `dialog` modes. The following template context topics are demonstrated through a practical example in the [Render tab component inside the dialog template](#render-tab-component-inside-the-dialog-template) section. -### Access row details inside template using template context +### Access row details inside template Edit templates in the grid provide access to crucial row information, enabling dynamic binding of attributes, values, or elements based on the specific row being edited. This approach is particularly useful for conditionally rendering or modifying elements in the edit template based on the row's state. @@ -207,7 +207,7 @@ The following code example demonstrates the usage of the `isAdd` property in an ### Render editors as components -The React Data Grid provides a powerful feature enabling dynamic rendering of Syncfusion® EJ2 controls as form editors during the editing process. This functionality delivers feature-rich controls for data entry within the edit form. +The Data Grid provides a powerful feature enabling dynamic rendering of Syncfusion® EJ2 controls as form editors during the editing process. This functionality delivers feature-rich controls for data entry within the edit form. To achieve this, utilize the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/grid#actioncomplete) event of the grid and specify `requestType` as `beginEdit` or `add`. @@ -244,7 +244,7 @@ const actionBegin = (args: SaveEventArgs) => { ### Set focus to particular column editor -The React Data Grid enables control of focus behavior for input elements in edit forms. By default, the first input element in the dialog receives focus when the dialog is opened. However, when the first input element is disabled or hidden, a different valid input element can receive focus. This can be achieved using the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/grid#actioncomplete) event of the grid, where the `requestType` is set to `beginEdit`. +The Data Grid enables control of focus behavior for input elements in edit forms. By default, the first input element in the dialog receives focus when the dialog is opened. However, when the first input element is disabled or hidden, a different valid input element can receive focus. This can be achieved using the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/grid#actioncomplete) event of the grid, where the `requestType` is set to `beginEdit`. In the following code example, the Customer ID column receives focus. @@ -626,3 +626,7 @@ export class DialogFormTemplate extends React.Component { {% endtabs %} {% previewsample "page.domainurl/code-snippet/grid/tabediting-cs1" %} + +## See also + +[angular-template-driven-vs-reactive-forms](https://www.syncfusion.com/blogs/post/angular-template-driven-vs-reactive-forms.aspx) \ No newline at end of file diff --git a/ej2-react/grid/editing/validation.md b/ej2-react/grid/editing/validation.md index 15f78e0006..cf166cfea0 100644 --- a/ej2-react/grid/editing/validation.md +++ b/ej2-react/grid/editing/validation.md @@ -10,7 +10,9 @@ domainurl: ##DomainURL## # Validation in React Data Grid -Data validation ensures that information entered or modified in the Grid follows specific validation rules, preventing errors and maintaining accuracy. The React Grid component in Syncfusion® provides built-in validation support to make this process easy and effective. +Data validation ensures that information entered or modified in the grid follows specific validation rules, preventing errors and maintaining accuracy. The Data Grid component provides built-in validation support to make this process effective. + +Validation rules support a wide range of validation scenarios, including mandatory fields, value validation, text validation, and custom validation logic. > For basic Grid editing setup and configuration, refer to the [Editing Feature Setup](../editing/edit.md#set-up-editing) section first. @@ -58,7 +60,7 @@ The following example demonstrates custom validation for the "Customer ID" colum {% previewsample "page.domainurl/code-snippet/grid/editing-cs30" %} -### Custom validation based on dropdown change +### Validation based on dropdown values Dependent validation rules adjust based on selections in other columns, enabling linked column validation. The "Salary" column validation adjusts based on the "Role" column selection, ensuring both columns validate correctly together. @@ -79,7 +81,7 @@ Dependent validation rules adjust based on selections in other columns, enabling {% previewsample "page.domainurl/code-snippet/grid/editing-cs31" %} -### Custom validation for numeric columns +### Validation for numeric columns Numeric column validation applies rules for numeric data such as positive values, minimum/maximum ranges, or decimal limits. This example uses "customFn" and "customFn1" functions configured through the "freightRules" object to validate numeric values. The numeric columns are bound to the `change` event, which calls the [validate](https://ej2.syncfusion.com/react/documentation/api/form-validator#validate) method to check the value and display error messages whenever the data changes. @@ -100,7 +102,7 @@ Numeric column validation applies rules for numeric data such as positive values {% previewsample "page.domainurl/code-snippet/grid/edit-validation-cs1" %} -## Dynamically add or remove validation rules from the form +## Dynamic validation rules Validation rules can be added or removed from input elements based on application scenarios or data conditions. The [addRules](https://ej2.syncfusion.com/react/documentation/api/form-validator#addrules) method adds validation rules dynamically to input elements using the name attribute. @@ -125,7 +127,7 @@ The following example demonstrates dynamic addition or removal of validation rul > The [removeRules](https://ej2.syncfusion.com/react/documentation/api/form-validator#removerules) method removes existing validation rules from input elements when needed. -## Validation error message positioning +## Customize validation message position Error message positioning customizes where validation messages appear in the grid. By default, messages display below the input field. The [customPlacement](https://ej2.syncfusion.com/react/documentation/api/form-validator#customplacement) event repositions messages to custom locations based on application needs. @@ -148,7 +150,7 @@ The following example demonstrates moving validation messages to the top of the {% previewsample "page.domainurl/code-snippet/grid/edit-validation-cs3" %} -## CRUD error handling with custom error messages +## Handle server-side validation errors Error handling for CRUD operations in the grid displays helpful error messages when operations fail. The [actionFailure](https://ej2.syncfusion.com/react/documentation/api/grid#actionfailure) event triggers on operation failures, providing access to error messages from server responses for display. @@ -423,4 +425,12 @@ Three configuration steps enable this feature: {% previewsample "page.domainurl/code-snippet/grid/editing-cs37" %} -> Server-side validation implementation details are available in the [knowledge base article](https://support.syncfusion.com/kb/article/11608/how-to-do-server-side-validation-for-grid-in-asp-net-mvc-application). To display validation tooltips instead of alerts, call `grid.editModule.formObj.validate()` in the success callback of Ajax/Fetch operations. \ No newline at end of file +> Server-side validation implementation details are available in the [knowledge base article](https://support.syncfusion.com/kb/article/11608/how-to-do-server-side-validation-for-grid-in-asp-net-mvc-application). To display validation tooltips instead of alerts, call `grid.editModule.formObj.validate()` in the success callback of Ajax/Fetch operations. + +## See also + +* [Normal editing](./in-line-editing) +* [Template editing](./template-editing) +* [Cell editing](./cell-editing) +* [Batch editing](./batch-editing) +* [Dialog editing](./dialog-editing) \ No newline at end of file diff --git a/ej2-react/grid/grouping/caption-template.md b/ej2-react/grid/grouping/caption-template.md index fce9779b28..d898a75d77 100644 --- a/ej2-react/grid/grouping/caption-template.md +++ b/ej2-react/grid/grouping/caption-template.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Caption Template in React Data Grid -The React Data Grid provides the [captionTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings#captiontemplate) property to customize the text shown in group row titles. This feature enhances the visual presentation of grouped data by allowing the display of grouped values, record counts, and custom HTML elements such as icons or images. +The [Data Grid](https://www.syncfusion.com/react-components/react-data-grid) provides the [captionTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings#captiontemplate) property to customize the content displayed in group caption rows. This capability enhances the presentation of grouped data by enabling the display of grouped values, record counts, and custom elements such as icons and images. -The `captionTemplate` receives a data object with properties such as `field`, `headerText`, `key`, and `count`, which can be used to dynamically render informative group captions. +The `captionTemplate` property supports dynamic content through the `data` parameter, which exposes properties such as `field`, `headerText`, `key`, and `count`. These values can be used to display grouped values, record counts, custom text, localized content, and custom UI elements within group caption rows. -The following example illustrates how to display the `headerText`, `key`, and `count` within a customized group caption. +The following example illustrates displaying the `headerText`, `key`, and `count` within a customized group caption. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -35,7 +35,7 @@ The following example illustrates how to display the `headerText`, `key`, and `c ## Adding custom text in group caption -The Grid supports adding custom text to group captions through the `captionTemplate` property. This feature makes group captions more informative by including grouped values, record counts, or descriptive text, and can also display custom HTML elements such as icons or image. +The Data Grid supports adding custom text to group captions through the `captionTemplate` property. This feature makes group captions more informative by including grouped values, record counts, or descriptive text, and the template can also display custom HTML elements such as icons or images. In the example below, the data parameter is used to display the `key`, `count`, and `headerText` of the grouped column, along with custom text within the caption. @@ -58,9 +58,9 @@ In the example below, the data parameter is used to display the `key`, `count`, ## Customize group caption text using locale -The Grid supports localization of group caption text based on the locale. This enables the display of translated or region-specific content within group captions. +The Data Grid supports localization of group caption text, enabling the display of translated or region-specific content within group captions. -Localization can be achieved using the `L10n.load()` and `setCulture()` methods from the `@syncfusion/ej2-base package`. The `L10n.load()` method defines localized strings, while `setCulture()` applies the desired locale to the Grid. The following example demonstrates customizing group caption text for the "ar" (Arabic) locale. +Localization can be achieved using the `L10n.load()` and `setCulture()` methods from the `@syncfusion/ej2-base` package. The `L10n.load()` method defines localized strings, while `setCulture()` applies the desired locale to the Data Grid. The following example demonstrates customizing group caption text for the "ar" (Arabic) locale. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -79,9 +79,9 @@ Localization can be achieved using the `L10n.load()` and `setCulture()` methods {% previewsample "page.domainurl/code-snippet/grid/group-cs18" %} -## Render custom component in group caption +## Render custom components in group captions -The Grid supports rendering custom components within group captions using the `captionTemplate` property. This functionality enables the integration of interactive UI elements such as buttons, icons, or dropdowns directly within the group caption row, enhancing both functionality and presentation. +The Data Grid supports rendering custom components within group captions using the `captionTemplate` property. This functionality enables the integration of interactive UI elements, such as buttons, icons, or dropdowns, directly within the group caption row, enhancing both functionality and presentation. In the example below, the [Chips](https://ej2.syncfusion.com/react/documentation/chips/getting-started) component is rendered through the caption template, with its text value dynamically assigned based on the group key. @@ -104,4 +104,5 @@ In the example below, the [Chips](https://ej2.syncfusion.com/react/documentation ## See also - [Grouping overview](./grouping) -- [GroupSettings API](https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings#captiontemplate) \ No newline at end of file +- [GroupSettings API](https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings#captiontemplate) +- [Style group captions](../style-and-appearance/grouping#customize-the-group-caption-row) \ No newline at end of file diff --git a/ej2-react/grid/grouping/grouping.md b/ej2-react/grid/grouping/grouping.md index 6e13e6cd52..d64fe6f37c 100644 --- a/ej2-react/grid/grouping/grouping.md +++ b/ej2-react/grid/grouping/grouping.md @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Grouping in React Data Grid -The grouping feature in the React Data Grid enables data to be organized into a hierarchical structure, allowing records to be expanded and collapsed for improved readability and analysis. +The grouping feature in the Data Grid enables data to be organized into a hierarchical structure, allowing records to be expanded and collapsed for improved readability and analysis. -For an overview of the grouping feature available in the React Grid, refer to the following video: +To use the group feature, inject the `GroupService` into the providers array {% youtube "https://www.youtube.com/watch?v=z2-54wZyNSI" %} @@ -54,7 +54,7 @@ The [groupSettings](https://ej2.syncfusion.com/react/documentation/api/grid/grou > - Columns can be grouped and ungrouped dynamically using the [groupColumn](https://ej2.syncfusion.com/react/documentation/api/grid/group#groupcolumn) and [ungroupColumn](https://ej2.syncfusion.com/react/documentation/api/grid/group#ungroupcolumn) methods. > - To disable grouping for a specific column, set the [allowGrouping](https://ej2.syncfusion.com/react/documentation/api/grid/column#allowgrouping) property to `false` in column configuration. -## Initial group +## Initial grouping Initial grouping in the grid is configured by assigning an array of column field names to the [groupSettings.columns](https://helpej2.syncfusion.com/react/documentation/api/grid/groupSettings#columns) property. This approach is effective for organizing large datasets based on predefined criteria. @@ -79,9 +79,30 @@ The example below demonstrates grouping by "Customer ID" and "Ship City", render > To group multiple columns, specify an array of column names in the `groupSettings.columns` property. -## Prevent grouping for specific columns +## Single and multiple column grouping -Columns that contain unique identifiers or sensitive information may not be suitable for grouping. In such cases, grouping can be disabled by setting the [allowGrouping](https://ej2.syncfusion.com/react/documentation/api/grid/column#allowgrouping) property to `false` in the column configuration, preventing the column header from being placed in the group drop area. +The Data Grid supports grouping by one or more columns to organize data into hierarchical sections. In single-column grouping, records are grouped based on the values of a single column. In multiple-column grouping, records are grouped by multiple columns in sequence, creating nested groups that provide a more structured view of the data. + +The following example demonstrates switching between single-column and multiple-column grouping using a button click. + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/grouping-single-multiple/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/grouping-single-multiple/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/grouping-single-multiple/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/grouping-single-multiple/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +## Prevent grouping for a particular column + +Some columns, such as those containing unique identifiers, may not require grouping. In such cases, grouping can be disabled by setting the [allowGrouping](https://ej2.syncfusion.com/react/documentation/api/grid/column#allowgrouping) property to `false` in the column configuration, preventing the column header from being placed in the group drop area. The following example prevents grouping on the "Customer ID" column. While other columns can be grouped, "Customer ID" cannot be dragged to the group drop area. @@ -104,11 +125,11 @@ The following example prevents grouping on the "Customer ID" column. While other ## Hide drop area -By default, the Grid shows a drop area container where column headers can be dragged to configure grouping or ungrouping. In scenarios where grouping through the drag‑and‑drop interface is not required, this drop area can be hidden. +By default, the Data Grid shows a group drop area container where column headers can be dragged to configure grouping or ungrouping. In scenarios where grouping through the drag-and-drop interface is not required, this group drop area can be hidden. -To disable the group drop area container, set the [groupSettings.showDropArea](https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings#showdroparea) property to `false`. This hides the drop area from the UI, while still allowing grouping to be managed programmatically using the Grid `groupColumn` and `ungroupColumn` methods if needed. +To disable the group drop area container, set the [groupSettings.showDropArea](https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings#showdroparea) property to `false`. This hides the group drop area from the UI, while still allowing grouping to be managed programmatically using the Data Grid [groupColumn](https://ej2.syncfusion.com/react/documentation/api/grid#groupcolumn) and [ungroupColumn](https://ej2.syncfusion.com/react/documentation/api/grid#ungroupcolumn) methods if needed. -In this example, the [React Switch Button](https://ej2.syncfusion.com/react/documentation/switch/getting-started) component is used to dynamically show or hide the group drop area. When the switch is toggled, the [change](https://ej2.syncfusion.com/react/documentation/api/switch#change) event updates the Grid’s `groupSettings.showDropArea` property to either display or hide the drop area. +In this example, the [Switch](https://ej2.syncfusion.com/react/documentation/switch/getting-started) component is used to dynamically show or hide the group drop area. When the switch is toggled, the [change](https://ej2.syncfusion.com/react/documentation/api/switch#change) event updates the Grid’s `groupSettings.showDropArea` property to either display or hide the drop area. {% tabs %} @@ -211,13 +232,11 @@ export default App; {% previewsample "page.domainurl/code-snippet/grid/group-cs4" %} - ## Show the grouped column By default, when a column is grouped in the Grid, that column is hidden from the display. This keeps the layout clean and makes grouped rows easier to read. To keep grouped columns visible, set the [groupSettings.showGroupedColumn](https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings#showgroupedcolumn) property to `true`. -In the example below, a [React Toggle Switch Button](https://ej2.syncfusion.com/react/documentation/switch/getting-started) component is used to control this setting. When the switch is toggled, the [change](https://ej2.syncfusion.com/react/documentation/api/switch#change) event updates the Grid’s `groupSettings.showGroupedColumn` property, showing or hiding the grouped columns as needed. - +In the example below, a [Switch](https://ej2.syncfusion.com/react/documentation/switch/getting-started) component is used to control this setting. When the switch is toggled, the [change](https://ej2.syncfusion.com/react/documentation/api/switch#change) event updates the Grid’s `groupSettings.showGroupedColumn` property, showing or hiding the grouped columns as needed. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -342,9 +361,9 @@ To allow reordering, set [groupSettings.allowReordering](https://ej2.syncfusion. {% previewsample "page.domainurl/code-snippet/grid/group-reorder-cs1" %} -## Sort grouped columns in descending order during initial grouping +## Sort groups in descending order -Grouped columns are sorted in ascending order by default (A–Z, 0–9, oldest to newest). To display grouped values in descending order such as showing the most recent dates or highest values first (Z–A, 9–0, newest to oldest) configure the [sortSettings.columns](https://ej2.syncfusion.com/react/documentation/api/grid/sortSettings#columns) property with the appropriate [field](https://ej2.syncfusion.com/react/documentation/api/grid/sortDescriptorModel#field) and set its [direction](https://ej2.syncfusion.com/react/documentation/api/grid/sortDescriptorModel#direction-string) to `Descending`. +Grouped columns are sorted in ascending order by default (A-Z, 0-9, oldest to newest). To display grouped values in descending order such as showing the most recent dates or highest values first (Z-A, 9-0, newest to oldest) configure the [sortSettings.columns](https://ej2.syncfusion.com/react/documentation/api/grid/sortSettings#columns) property with the appropriate [field](https://ej2.syncfusion.com/react/documentation/api/grid/sortDescriptorModel#field) and set its [direction](https://ej2.syncfusion.com/react/documentation/api/grid/sortDescriptorModel#direction-string) to `Descending`. The following example demonstrates how to sort the "Customer ID" column in descending order during the grid's initial load. @@ -365,12 +384,6 @@ The following example demonstrates how to sort the "Customer ID" column in desce {% previewsample "page.domainurl/code-snippet/grid/group-cs8" %} -## Group with paging - -The Grid component supports column grouping in combination with paging. When grouping is enabled, aggregated values and item counts are calculated based on the current page by default. As a result, group footers and caption summaries reflect only the visible page data. To include aggregate values and total item counts across all pages, set the [groupSettings.disablePageWiseAggregates](https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings#disablePageWiseAggregates) property to `false`. - -> When using remote data binding, enabling this option triggers two separate requests during grouping one to retrieve grouped data and another to fetch aggregate values and total item counts. - ## Group by format By default, grouping is based on the raw data values of each row. For numeric or datetime columns, grouping can also be performed using a specified format for example, grouping dates by month or numbers by range. To enable this behavior, set the [enableGroupByFormat](https://ej2.syncfusion.com/react/documentation/api/grid/column#enablegroupbyformat) property on the corresponding column. This allows the grid to group values based on their specific format. @@ -396,69 +409,9 @@ The following example demonstrates grouping the "Order Date" and "Freight" colum > Numeric columns can be grouped based on formats such as currency or percentage, while datetime columns can be grouped based on specific date or time formats. -## Show grouped rows based on page size - -In the Syncfusion® React Grid, controlling the number of grouped rows per page is useful when working with grouped data and a fixed page size. - -By default, the [pageSize](https://ej2.syncfusion.com/react/documentation/api/grid/pageSettings#pagesize) setting applies to individual grid rows, not grouped rows. To show grouped column rows based on the `pageSize`, a custom implementation can be used. - -This can be achieved by customizing the `generateQuery` method of the "Data prototype", allowing the query logic to be modified for grouped row pagination. This can be achieved in the below example. - -{% tabs %} -{% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/group-cs11/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/group-cs11/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/group-cs11/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/group-cs11/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/grid/group-cs11" %} - -## Collapse all grouped rows at initial rendering - -The React Data Grid provides the ability to expand or collapse grouped rows, enabling better control over data visibility. This is especially useful for large datasets where an initial summarized view is preferred. - -To collapse all grouped rows on initial render, use the [dataBound](https://ej2.syncfusion.com/react/documentation/api/grid#databound) event in combination with the [collapseAll](https://ej2.syncfusion.com/react/documentation/api/grid/group#collapseall) method. This can be achieved in the below example. - -{% tabs %} -{% highlight js tabtitle="App.jsx" %} -{% include code-snippet/grid/group-cs9/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="App.tsx" %} -{% include code-snippet/grid/group-cs9/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/grid/group-cs9/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/grid/group-cs9/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/grid/group-cs9" %} - -> All grouped rows can also be collapsed at the initial rendering using the [groupCollapseAll](https://ej2.syncfusion.com/react/documentation/api/grid#groupcollapseall) method within the [dataBound](https://ej2.syncfusion.com/react/documentation/api/grid#databound) event. The following code snippet demonstrates this approach: - -```typescript - const dataBound = () => { - if (initial === true) { - (grid as GridComponent).groupCollapseAll(); - initial = false; - } - } -``` -> The collapse all approach is recommended for a limited number of records since collapsing every grouped record requires time. For large datasets, [lazy-load grouping](https://ej2.syncfusion.com/react/documentation/grid/grouping/lazy-load-grouping) is recommended to optimize performance. This approach is also applicable to the [groupExpandAll](https://ej2.syncfusion.com/react/documentation/api/grid#groupexpandall) method. - ## Group or ungroup column externally -The React Data Grid supports both interactive and programmatic approaches to column grouping. Columns can be grouped manually via drag-and-drop or programmatically using the [groupColumn](https://ej2.syncfusion.com/react/documentation/api/grid#groupcolumn) and [ungroupColumn](https://ej2.syncfusion.com/react/documentation/api/grid#ungroupcolumn) methods. +The Data Grid supports both interactive and programmatic approaches to column grouping. Columns can be grouped manually via drag-and-drop or programmatically using the [groupColumn](https://ej2.syncfusion.com/react/documentation/api/grid#groupcolumn) and [ungroupColumn](https://ej2.syncfusion.com/react/documentation/api/grid#ungroupcolumn) methods. The following example demonstrates how to implement programmatic grouping and ungrouping using the [DropDownList](https://ej2.syncfusion.com/react/documentation/drop-down-list/getting-started) component for column selection. When the corresponding button is activated, the selected column is grouped or ungrouped using the appropriate API method. @@ -580,13 +533,48 @@ export default App; {% previewsample "page.domainurl/code-snippet/grid/group-cs14" %} +## Collapse all groups on initial load + +The Data Grid provides the ability to expand or collapse grouped rows, enabling better control over data visibility. This is especially useful for large datasets where an initial summarized view is preferred. + +To collapse all grouped rows on initial render, use the [dataBound](https://ej2.syncfusion.com/react/documentation/api/grid#databound) event in combination with the [collapseAll](https://ej2.syncfusion.com/react/documentation/api/grid/group#collapseall) method. This can be achieved in the below example. + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/group-cs9/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/group-cs9/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/group-cs9/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/group-cs9/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/group-cs9" %} + +> All grouped rows can also be collapsed at the initial rendering using the [groupCollapseAll](https://ej2.syncfusion.com/react/documentation/api/grid#groupcollapseall) method within the [dataBound](https://ej2.syncfusion.com/react/documentation/api/grid#databound) event. The following code snippet demonstrates this approach: + +```typescript + const dataBound = () => { + if (initial === true) { + (grid as GridComponent).groupCollapseAll(); + initial = false; + } + } +``` +> The collapse all approach is recommended for a limited number of records since collapsing every grouped record requires time. For large datasets, [lazy-load grouping](https://ej2.syncfusion.com/react/documentation/grid/grouping/lazy-load-grouping) is recommended to optimize performance. This approach is also applicable to the [groupExpandAll](https://ej2.syncfusion.com/react/documentation/api/grid#groupexpandall) method. + ## Expand or collapse externally -The React Data Grid supports external control of grouped row visibility through programmatic expand and collapse. This functionality can be integrated using the grid's methods to manage grouped data display dynamically. +The Data Grid supports external control of grouped row visibility through programmatic expand and collapse. This functionality can be integrated using the grid's methods to manage grouped data display dynamically. -### Expand or collapse all grouped rows +### Expand or collapse all groups -The React Data Grid enables programmatic expand and collapse of all grouped rows using the [groupExpandAll](https://ej2.syncfusion.com/react/documentation/api/grid#groupexpandall) and [groupCollapseAll](https://ej2.syncfusion.com/react/documentation/api/grid#groupcollapseall) methods. +The Data Grid enables programmatic expand and collapse of all grouped rows using the [groupExpandAll](https://ej2.syncfusion.com/react/documentation/api/grid#groupexpandall) and [groupCollapseAll](https://ej2.syncfusion.com/react/documentation/api/grid#groupcollapseall) methods. In the example below, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.com/react/documentation/switch/getting-started) component is used to control the visibility of grouped rows. When toggled, the [change](https://ej2.syncfusion.com/react/documentation/api/switch#change) event triggers the appropriate method to expand or collapse all groups accordingly. @@ -688,9 +676,9 @@ export default App; {% previewsample "page.domainurl/code-snippet/grid/group-cs7" %} -### Expand or collapse selected grouped row +### Expand or collapse a specific group -The React Data Grid allows programmatic expand or collapse of specific grouped rows through the [expandCollapseRows](https://ej2.syncfusion.com/react/documentation/api/grid/group#expandcollapserows) method, which toggles the state of a targeted group caption row based on its current visibility. +The Data Grid allows programmatic expand or collapse of specific grouped rows through the [expandCollapseRows](https://ej2.syncfusion.com/react/documentation/api/grid/group#expandcollapserows) method, which toggles the state of a targeted group caption row based on its current visibility. To implement this functionality, follow these steps: @@ -816,11 +804,44 @@ export default App; {% previewsample "page.domainurl/code-snippet/grid/group-cs16" %} +## Use grouping with paging + +The Data Grid component supports column grouping in combination with paging. When grouping is enabled, aggregated values and item counts are calculated based on the current page by default. As a result, group footers and caption summaries reflect only the visible page data. To include aggregate values and total item counts across all pages, set the [groupSettings.disablePageWiseAggregates](https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings#disablePageWiseAggregates) property to `false`. + +> When using remote data binding, enabling this option triggers two separate requests during grouping: +> * One to retrieve grouped data. +> * Another to fetch aggregate values and total item counts. + +## Show grouped rows based on page size + +In the Data Grid, controlling the number of grouped rows per page is useful when working with grouped data and a fixed page size. + +By default, the [pageSize](https://ej2.syncfusion.com/react/documentation/api/grid/pageSettings#pagesize) setting applies to individual grid rows, not grouped rows. To show grouped column rows based on the `pageSize`, a custom implementation can be used. + +This can be achieved by customizing the `generateQuery` method of the "Data prototype", allowing the query logic to be modified for grouped row pagination. This can be achieved in the below example. + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/group-cs11/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/group-cs11/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/group-cs11/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/group-cs11/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/group-cs11" %} + ## Clear grouping -The React Data Grid provides a [clearGrouping](https://ej2.syncfusion.com/react/documentation/api/grid#cleargrouping) method to remove all grouped columns programmatically. This is useful for resetting the grid to an ungrouped state. +The Data Grid provides a [clearGrouping](https://ej2.syncfusion.com/react/documentation/api/grid#cleargrouping) method to remove all grouped columns programmatically. This is useful for resetting the grid to an ungrouped state. -The following example demonstrates how to execute `clearGrouping` through an external button click. +The following example demonstrates executing `clearGrouping` through an external button click. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -841,7 +862,7 @@ The following example demonstrates how to execute `clearGrouping` through an ext ## Grouping events -The React Data Grid provides two key events for handling grouping operations. These events enable the integration of custom logic before and after a grouping action: +The Data Grid provides two key events for handling grouping operations. These events enable the integration of custom logic before and after a grouping action: - [actionBegin](https://ej2.syncfusion.com/react/documentation/api/grid#actionbegin): Triggered before a grouping action starts. It provides details such as the group field name and `requestType`, allowing conditional logic or cancellation. - [actionComplete](https://ej2.syncfusion.com/react/documentation/api/grid#actioncomplete): Triggered after a grouping action completes. It exposes the updated grid state for post-processing tasks like UI updates or data handling. @@ -945,9 +966,9 @@ export default App; > The [args.requestType](https://ej2.syncfusion.com/react/documentation/api/grid/sortEventArgs#requesttype) property represents the name of the current action being performed. For instance, during grouping, the `args.requestType` value is "grouping". -## Limitations +## Grouping constraints -Grouping is not compatible with the autofill feature. +[AutoFill](https://ej2.syncfusion.com/react/documentation/api/grid#enableautofill) applies fill operations to records within the same group. ## See also diff --git a/ej2-react/grid/grouping/lazy-load-grouping.md b/ej2-react/grid/grouping/lazy-load-grouping.md index cf890f9b5f..3041e8bb8a 100644 --- a/ej2-react/grid/grouping/lazy-load-grouping.md +++ b/ej2-react/grid/grouping/lazy-load-grouping.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Lazy Load Grouping in React Data Grid -Lazy loading in React refers to dynamically loading data as needed, rather than all at once, to enhance application performance by minimizing initial load time. +The [Data Grid](https://www.syncfusion.com/react-components/react-data-grid) supports lazy load grouping, which optimizes the rendering of large datasets by loading only the required grouped data on demand. Initially, only the top-level group caption rows are rendered in a collapsed state. Child rows are fetched and displayed dynamically when a group is expanded. -The React Data Grid supports lazy load grouping, which optimizes the rendering of large datasets by loading only the required grouped data on demand. Initially, only the top-level group caption rows are rendered in a collapsed state. Child rows are fetched and displayed dynamically when a group is expanded. +To enable this feature, set the [groupSettings.enableLazyLoading](https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings#enableLazyLoading) property to `true`. -To enable this feature, set the [groupSettings.enableLazyLoading](https://ej2.syncfusion.com/react/documentation/api/grid/groupSettings#enableLazyLoading) property to `true`. The following example demonstrates how to configure lazy load grouping using the `groupSettings.enableLazyLoading` property. +The following example demonstrates how to configure lazy load grouping using the `groupSettings.enableLazyLoading` property. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -33,7 +33,7 @@ To enable this feature, set the [groupSettings.enableLazyLoading](https://ej2.sy {% previewsample "page.domainurl/code-snippet/grid/lazy-load-grouping-cs1" %} -## Handling the lazy load grouping at server-side +## Configure server-side lazy load grouping When using the lazy load grouping feature of the Grid, the [UrlAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#url-adaptor) of `DataManager` is used to handle server-side operations, including lazy load grouping. Along with the default server request, this feature will additionally send the following details to handle the lazy load grouping: @@ -104,9 +104,9 @@ public IActionResult UrlDatasource([FromBody] DataManagerRequest dm) ## Lazy load grouping with infinite scrolling -Lazy load grouping with infinite scrolling is especially useful when presenting grouped data from large datasets. It allows data to be loaded on demand as users interact with the interface, ensuring efficient handling of records. This approach improves performance, maintains responsiveness, and provides a seamless experience while managing and displaying extensive grouped data. +Lazy load grouping with infinite scrolling is especially useful when presenting grouped data from large datasets. It allows data to be loaded on demand as groups are expanded or the scrollbar advances, ensuring efficient handling of records. This approach improves performance, maintains responsiveness, and efficiently handles extensive grouped data. -**How it works** +**Lazy-load grouping workflow:** 1. Initially, only top-level group caption rows are rendered in a collapsed state. @@ -138,9 +138,9 @@ To enable this feature, set both [groupSettings.enableLazyLoading](https://ej2.s ## Lazy load grouping with virtual scrolling -The Grid supports lazy load grouping with virtual scrolling to efficiently manage and display large grouped datasets. This feature improves performance, reduces initial load time, and ensures a responsive data presentation experience. +The Data Grid supports lazy load grouping with virtual scrolling to efficiently manage and display large grouped datasets. This feature improves performance, reduces initial load time, and ensures a responsive data presentation experience. -**How it works** +**Lazy-load grouping workflow** 1. Initially, only top-level group caption rows are rendered in a collapsed state. @@ -169,20 +169,6 @@ To enable this feature, set both [groupSettings.enableLazyLoading](https://ej2.s > When using the `enableVirtualization` feature, it is necessary to define the [height](https://ej2.syncfusion.com/react/documentation/api/grid#height) property. -## Limitations for lazy load grouping - -* Due to the element height limitation in browsers, the maximum number of records loaded by the grid is limited due to the browser capability. -* Lazy load grouping is supported only with the [UrlAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#url-adaptor) and [JsonAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#json-adaptor) adaptors. -* Lazy load grouping is not compatible with the following features - * Batch editing - * Row template - * Print - * Row drag and drop in collapsed group - * ExpandAll method - * Column virtualization - * Hierarchical Grid - * Detail Template - * Row and Cell Spanning -* Programmatic selection is not supported in lazy load grouping. -* Drag selection, cell selection (box and flow), and row Selection is not working in collapsed state. -* Clipboard is not supported when groups are in collapsed state. \ No newline at end of file +## Lazy load grouping constraints + +Lazy load grouping supports both `UrlAdaptor` and `JsonAdaptor` data sources, making it suitable for local and remote data scenarios. Selection and clipboard operations work with expanded groups. \ No newline at end of file