-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Box
- Responsive Box
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
-
Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
- Overview
-
Action Sheet
-
Button
- Floating Action Button
- Drop Down Button
-
Context Menu
-
List
-
Lookup
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
React Data Grid - Collaborative Editing
Multiple users can edit the DataGrid's data in real-time. In this demo, changes made in one DataGrid are broadcasted to the other DataGrid via the SignalR service.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useEffect } from 'react';
import { HubConnectionBuilder, HttpTransportType } from '@aspnet/signalr';
import * as AspNetData from 'devextreme-aspnet-data-nojquery';
import Guid from 'devextreme/core/guid';
import Grid from './Grid.tsx';
const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore/';
const url = `${BASE_PATH}api/DataGridCollaborativeEditing`;
const groupId = new Guid().toString();
interface Change {
type: 'insert' | 'update' | 'remove';
data?: any;
key?: any;
}
const createStore = () => AspNetData.createStore({
key: 'ID',
loadUrl: url,
insertUrl: url,
updateUrl: url,
deleteUrl: url,
onBeforeSend(operation, ajaxSettings) {
ajaxSettings.data.groupId = groupId;
},
});
const store1 = createStore();
const store2 = createStore();
const updateStores = (events: Change[]) => {
store1.push(events);
store2.push(events);
};
const App = () => {
useEffect(() => {
const hubUrl = `${BASE_PATH}dataGridCollaborativeEditingHub?GroupId=${groupId}`;
const connection = new HubConnectionBuilder()
.withUrl(hubUrl, {
skipNegotiation: true,
transport: HttpTransportType.WebSockets,
})
.build();
connection.start()
.then(() => {
connection.on('update', (key, data) => {
updateStores([{ type: 'update', key, data }]);
});
connection.on('insert', (data) => {
updateStores([{ type: 'insert', data }]);
});
connection.on('remove', (key) => {
updateStores([{ type: 'remove', key }]);
});
});
}, []);
return (
<div className="tables">
<div className="column">
<Grid dataSource={store1} />
</div>
<div className="column">
<Grid dataSource={store2} />
</div>
</div>
);
};
export default App;
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
To implement this functionality:
-
Generate a session ID used to identify DataGrids that should be edited simultaneously (
groupId
in this demo). -
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.
-
Create store instances—one per DataGrid.
-
Create DataGrids and bind them to the store instances.
-
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.