Collaborative Editing
Documentation
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.
To implement this functionality:
-
Generate a session ID used to identify DataGrids that should be edited simultaneously (
groupIdin 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
updateStoresfunction).
Changes made collaboratively are lost if you refresh the page because the SignalR service broadcasts changes without saving them.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<div class="tables">
<Grid
:data-source="store1"
class="column"
/>
<Grid
:data-source="store2"
class="column"
/>
</div>
</template>
<script>
import { HubConnectionBuilder, HttpTransportType } from '@aspnet/signalr';
import * as AspNetData from 'devextreme-aspnet-data-nojquery';
import Grid from './Grid.vue';
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);
};
export default {
components: {
Grid
},
data() {
return {
store1,
store2
};
}
};
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 }]);
});
});
</script>
<style scoped>
.tables {
display: flex;
}
.column:first-child {
width: 50%;
padding-right: 15px;
}
.column:last-child {
width: 50%;
padding-left: 15px;
}
</style>
<template>
<DxDataGrid
:data-source="dataSource"
:height="600"
:show-borders="true"
:repaint-changes-only="true"
:highlight-changes="true"
>
<DxPaging
:enabled="false"
/>
<DxEditing
:allow-deleting="true"
:allow-updating="true"
:allow-adding="true"
:use-icons="true"
mode="cell"
refresh-mode="reshape"
/>
<DxColumn
:width="50"
data-field="Prefix"
caption="Title"
>
<DxRequiredRule/>
</DxColumn>
<DxColumn
data-field="FirstName"
>
<DxRequiredRule/>
</DxColumn>
<DxColumn
:lookup="lookup"
data-field="StateID"
caption="State"
>
<DxRequiredRule/>
</DxColumn>
<DxColumn
data-field="BirthDate"
data-type="date"
>
<DxRangeRule
:max="maxDate"
message="Date can not be greater than 01/01/3000"
/>
</DxColumn>
</DxDataGrid>
</template>
<script>
import { DxDataGrid, DxColumn, DxPaging, DxEditing, DxRequiredRule, DxRangeRule } from 'devextreme-vue/data-grid';
import * as AspNetData from 'devextreme-aspnet-data-nojquery';
const statesStore = AspNetData.createStore({
key: 'ID',
loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/DataGridStatesLookup'
});
export default {
components: {
DxDataGrid,
DxColumn,
DxPaging,
DxEditing,
DxRequiredRule,
DxRangeRule
},
props: {
dataSource: {
type: Object,
default: ()=>({})
}
},
data() {
return {
maxDate: new Date(3000, 0),
lookup: {
dataSource: statesStore,
displayExpr: 'Name',
valueExpr: 'ID'
}
};
}
};
</script>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#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/20.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/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>
<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>
System.config({
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader'
},
'devextreme/localization.js': {
"esModule": true
},
'devextreme-aspnet-data-nojquery': {
'esModule': true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'@aspnet/signalr': 'npm:@aspnet/signalr@1.0.0/dist/cjs',
'tslib': 'npm:tslib@2.1.0/tslib.js',
'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.7.1/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.26.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.6',
'devextreme-vue': 'npm:devextreme-vue@20.2.6',
'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.18/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.24/dist/dx-gantt.js',
'preact': 'npm:preact@10.5.13/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js'
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'@aspnet/signalr': {
main: 'index.js',
defaultExtension: 'js'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});