DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Angular 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.

Backend API
<div class="tables"> <div *ngFor="let dataSource of dataSources" class="column"> <dx-data-grid [dataSource]="dataSource" [height]="600" [showBorders]="true" [repaintChangesOnly]="true" [highlightChanges]="true" > <dxo-paging [enabled]="false"> </dxo-paging> <dxo-editing mode="cell" refreshMode="reshape" [allowUpdating]="true" [allowDeleting]="true" [allowAdding]="true" [useIcons]="true" > </dxo-editing> <dxi-column dataField="Prefix" caption="Title" [width]="50"> <dxi-validation-rule type="required"> </dxi-validation-rule> </dxi-column> <dxi-column dataField="FirstName"> <dxi-validation-rule type="required"> </dxi-validation-rule> </dxi-column> <dxi-column dataField="StateID" caption="State"> <dxi-validation-rule type="required"> </dxi-validation-rule> <dxo-lookup [dataSource]="stateDataSource" displayExpr="Name" valueExpr="ID" > </dxo-lookup> </dxi-column> <dxi-column dataField="BirthDate" dataType="date"> <dxi-validation-rule type="range" [max]="maxDate" message="Date can not be greater than 01/01/3000" > </dxi-validation-rule> </dxi-column> </dx-data-grid> </div> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDataGridModule, DxTextBoxModule } from 'devextreme-angular'; import CustomStore from 'devextreme/data/custom_store'; import { CollaborativeEditingService } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: `app/app.component.html`, styleUrls: [`app/app.component.css`], preserveWhitespaces: true, providers: [CollaborativeEditingService], }) export class AppComponent { dataSources: Array<CustomStore>; stateDataSource: CustomStore; maxDate: Date = new Date(3000, 0); constructor(private service: CollaborativeEditingService) { this.dataSources = [this.service.createStore(), this.service.createStore()]; this.stateDataSource = this.service.createStatesStore(); this.service.getStoreChangedObservable().subscribe((events) => { this.dataSources.forEach((store) => store.push(events)); }); } } @NgModule({ imports: [ BrowserModule, DxDataGridModule, DxTextBoxModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
.tables { display: flex; } .column:first-child { width: 50%; padding-right: 15px; } .column:last-child { width: 50%; padding-left: 15px; }
import { Injectable } from '@angular/core'; import { HubConnectionBuilder, HttpTransportType } from '@aspnet/signalr'; import * as AspNetData from 'devextreme-aspnet-data-nojquery'; import Guid from 'devextreme/core/guid'; import { Subject } from 'rxjs'; const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore/'; class StoreChangedEvent { type: 'update' | 'insert' | 'remove'; key?: string; data?: Record<string, unknown>; } @Injectable() export class CollaborativeEditingService { private storeChanged = new Subject<Array<StoreChangedEvent>>(); private groupId: string = new Guid().toString(); private connection: Object; getStoreChangedObservable() { this.connection || this.initHubConnection(); return this.storeChanged.asObservable(); } createStatesStore() { return AspNetData.createStore({ key: 'ID', loadUrl: `${BASE_PATH}api/DataGridStatesLookup`, }); } createStore() { const url = `${BASE_PATH}api/DataGridCollaborativeEditing`; return AspNetData.createStore({ key: 'ID', loadUrl: url, insertUrl: url, updateUrl: url, deleteUrl: url, onBeforeSend: (operation, ajaxSettings) => { ajaxSettings.data.groupId = this.groupId; }, }); } private initHubConnection() { const connection = this.createConnection(); connection.start() .then(() => { connection.on('update', (key, data) => { this.storeChanged.next([{ type: 'update', key, data }]); }); connection.on('insert', (data) => { this.storeChanged.next([{ type: 'insert', data }]); }); connection.on('remove', (key) => { this.storeChanged.next([{ type: 'remove', key }]); }); }); } private createConnection() { const hubUrl = `${BASE_PATH}dataGridCollaborativeEditingHub?GroupId=${this.groupId}`; return new HubConnectionBuilder() .withUrl(hubUrl, { skipNegotiation: true, transport: HttpTransportType.WebSockets, }) .build(); } }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ const componentNames = [ 'accordion', 'action-sheet', 'autocomplete', 'bar-gauge', 'box', 'bullet', 'button-group', 'button', 'calendar', 'chart', 'check-box', 'circular-gauge', 'color-box', 'context-menu', 'data-grid', 'date-box', 'date-range-box', 'defer-rendering', 'diagram', 'draggable', 'drawer', 'drop-down-box', 'drop-down-button', 'file-manager', 'file-uploader', 'filter-builder', 'form', 'funnel', 'gallery', 'gantt', 'html-editor', 'linear-gauge', 'list', 'load-indicator', 'load-panel', 'lookup', 'map', 'menu', 'multi-view', 'nested', 'number-box', 'pie-chart', 'pivot-grid-field-chooser', 'pivot-grid', 'polar-chart', 'popover', 'popup', 'progress-bar', 'radio-group', 'range-selector', 'range-slider', 'recurrence-editor', 'resizable', 'responsive-box', 'sankey', 'scheduler', 'scroll-view', 'select-box', 'slider', 'sortable', 'sparkline', 'speed-dial-action', 'splitter', 'switch', 'tab-panel', 'tabs', 'tag-box', 'text-area', 'text-box', 'tile-view', 'toast', 'toolbar', 'tooltip', 'tree-list', 'tree-map', 'tree-view', 'validation-group', 'validation-summary', 'validator', 'vector-map', ]; window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme-aspnet-data-nojquery': { 'esModule': true, }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, '@angular/platform-browser-dynamic': { 'esModule': true, }, '@angular/platform-browser': { 'esModule': true, }, '@angular/core': { 'esModule': true, }, '@angular/common': { 'esModule': true, }, '@angular/common/http': { 'esModule': true, }, '@angular/compiler': { 'esModule': true, }, '@angular/animations': { 'esModule': true, }, '@angular/forms': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', 'bundles:': '../../../../bundles/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', /* @angular */ '@angular/compiler': 'bundles:@angular/compiler.umd.js', '@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js', '@angular/core': 'bundles:@angular/core.umd.js', '@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js', '@angular/common': 'bundles:@angular/common.umd.js', '@angular/common/http': 'bundles:@angular/common-http.umd.js', '@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js', '@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js', '@angular/forms': 'bundles:@angular/forms.umd.js', /* devextreme */ 'devextreme': 'npm:devextreme@24.1.7/cjs', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'devextreme/bundles/dx.all': 'npm:devextreme@24.1.7/bundles/dx.all.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.13', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56', /* devextreme-angular umd maps */ 'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js', 'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js', 'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js', ...componentNames.reduce((acc, name) => { acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`; return acc; }, {}), 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'tslib': 'npm:tslib@2.6.1/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', '@aspnet/signalr': 'npm:@aspnet/signalr@1.0.27/dist/cjs/index.js', 'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@3.0.0/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devexpress-diagram@2.2.13/package.json', 'npm:devexpress-gantt@4.1.56/package.json', 'npm:@aspnet/*/package.json', ], }; System.config(window.config); // System.import('@angular/compiler').catch(console.error.bind(console));
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.13.3/bundles/zone.umd.min.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Hubs; using DevExtreme.MVC.Demos.Models.DataGrid; using DevExtreme.MVC.Demos.Models.SampleData; using Microsoft.AspNet.SignalR; using Newtonsoft.Json; using System; using System.Net; using System.Net.Http; using System.Net.Http.Formatting; using System.Web.Http; using DevExpress.Data.Utils; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class DataGridCollaborativeEditingController : ApiController { static readonly NonCryptographicRandom random = NonCryptographicRandom.System; IHubContext hubContext; public DataGridCollaborativeEditingController() { hubContext = GlobalHost.ConnectionManager.GetHubContext<DataGridCollaborativeEditingHub>(); } [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(SampleData.DataGridEmployees, loadOptions); } [HttpPost] public HttpResponseMessage Post(FormDataCollection form) { var values = form.Get("values"); var groupId = form.Get("groupId"); var newEmployee = new Employee(); JsonConvert.PopulateObject(values, newEmployee); newEmployee.ID = random.Next(int.MaxValue); Validate(newEmployee); if(!ModelState.IsValid) { return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage()); } // db.Employees.Add(newEmployee); // db.SaveChanges(); hubContext.Clients.Group(groupId).insert(newEmployee); return Request.CreateResponse(newEmployee); } [HttpPut] public HttpResponseMessage Put(FormDataCollection form) { var key = Convert.ToInt32(form.Get("key")); var values = form.Get("values"); var groupId = form.Get("groupId"); var employee = new Employee(); JsonConvert.PopulateObject(values, employee); employee.ID = key; Validate(employee); if(!ModelState.IsValid) { return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage()); } // db.SaveChanges(); hubContext.Clients.Group(groupId).update(key, employee); return Request.CreateResponse(employee); } [HttpDelete] public void Delete(FormDataCollection form) { var key = Convert.ToInt32(form.Get("key")); var groupId = form.Get("groupId"); // var employee = db.Employees.First(a => a.ID == key); // db.Employees.Remove(employee); // db.SaveChanges(); hubContext.Clients.Group(groupId).remove(key); } } }
using Microsoft.AspNet.SignalR; using System.Threading.Tasks; namespace DevExtreme.MVC.Demos.Hubs { public class DataGridCollaborativeEditingHub : Hub { public override Task OnConnected() { var groupId = Context.QueryString["GroupId"]; Groups.Add(Context.ConnectionId, groupId); return base.OnConnected(); } } }

To implement this functionality:

  1. Generate a session ID used to identify DataGrids 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 DataGrid.

  4. Create DataGrids 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.