Your search did not match any results.
Data Grid

Collaborative Editing

Documentation

Multiple users can edit the DataGrid's data in real-time. In this demo, changes made in one widget are broadcasted to the other widget via the SignalR service.

To implement this functionality:

  1. Generate a session ID used to identify widgets that should be edited simultaneously (groupId in this demo).
  2. Configure CustomStores. In this demo, we use the createStore method (part of the DevExtreme.AspNet.data extension). The onBeforeSend function is used to send the session ID from step 1 to the server.
  3. Create store instances — one per widget.
  4. Create widgets and bind them to the store instances.
  5. Update all the store instances when a push notification is received (see the updateStores function).

Changes made collaboratively are lost if you refresh the page because the SignalR service broadcasts changes without saving them.

Apply
Reset
import React from 'react'; import { HubConnectionBuilder, HttpTransportType } from '@aspnet/signalr'; import * as AspNetData from 'devextreme-aspnet-data-nojquery'; import Grid from './Grid.js'; import Guid from 'devextreme/core/guid'; const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore/'; const url = `${BASE_PATH }api/DataGridCollaborativeEditing`; const groupId = new Guid().toJSON(); const createStore = () => AspNetData.createStore({ key: 'ID', loadUrl: url, insertUrl: url, updateUrl: url, deleteUrl: url, onBeforeSend: function(operation, ajaxSettings) { ajaxSettings.data.groupId = groupId; } }); const store1 = createStore(); const store2 = createStore(); const updateStores = events => { store1.push(events); store2.push(events); }; class App extends React.Component { constructor(props) { super(props); } render() { return ( <div className={'tables'}> <div className={'column'}> <Grid dataSource={store1} /> </div> <div className={'column'}> <Grid dataSource={store2} /> </div> </div> ); } } const hubUrl = `${BASE_PATH}dataGridCollaborativeEditingHub?GroupId=${groupId}`; const connection = new HubConnectionBuilder() .withUrl(hubUrl, { skipNegotiation: true, transport: HttpTransportType.WebSockets }) .build(); connection.start() .then(function() { connection.on('update', function(key, data) { updateStores([{ type: 'update', key: key, data: data }]); }); connection.on('insert', function(data) { updateStores([{ type: 'insert', data: data }]); }); connection.on('remove', function(key) { updateStores([{ type: 'remove', key: key }]); }); }); export default App;
import React from 'react'; import DataGrid, { Column, Editing, Paging, RequiredRule, RangeRule } from 'devextreme-react/data-grid'; import * as AspNetData from 'devextreme-aspnet-data-nojquery'; class Grid extends React.Component { constructor(props) { super(props); this.maxDate = new Date(3000, 0); this.statesStore = AspNetData.createStore({ key: 'ID', loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/DataGridStatesLookup' }); } render() { return ( <DataGrid dataSource={this.props.dataSource} height={600} showBorders={true} repaintChangesOnly={true} highlightChanges={true} > <Paging enabled={false} /> <Editing mode={'cell'} refreshMode={'reshape'} allowUpdating={true} allowDeleting={true} allowAdding={true} useIcons={true} /> <Column dataField={'Prefix'} caption={'Title'} width={50} > <RequiredRule /> </Column> <Column dataField={'FirstName'} > <RequiredRule /> </Column> <Column dataField={'StateID'} caption={'State'} lookup={{ dataSource: this.statesStore, displayExpr: 'Name', valueExpr: 'ID' }} > <RequiredRule /> </Column> <Column dataField={'BirthDate'} dataType={'date'} > <RangeRule max={this.maxDate} message={'Date can not be greater than 01/01/3000'} /> </Column> </DataGrid> ); } } export default Grid;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.tables { display: flex; } .column:first-child { width: 50%; padding-right: 15px; } .column:last-child { width: 50%; padding-left: 15px; }
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', meta: { 'devextreme-aspnet-data-nojquery': { 'esModule': true } }, map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-react': 'npm:devextreme-react@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', 'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.5.1', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js', 'tslib': 'npm:tslib@1.6.1', '@aspnet/signalr': 'npm:@aspnet/signalr@1.0.0/dist/cjs/index.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });