$(function() {
var BASE_PATH = "https://js.devexpress.com/Demos/NetCore/";
var url = BASE_PATH + "api/DataGridCollaborativeEditing/";
var groupId = new DevExpress.data.Guid().toJSON();
var createStore = function() {
return DevExpress.data.AspNet.createStore({
key: "ID",
loadUrl: url,
insertUrl: url,
updateUrl: url,
deleteUrl: url,
onBeforeSend: function(method, ajaxOptions) {
ajaxOptions.data.groupId = groupId;
}
})
};
var createDataGrid = function(gridId, store) {
$("#" + gridId).dxDataGrid({
dataSource: store,
height: 600,
showBorders: true,
repaintChangesOnly: true,
highlightChanges: true,
paging: {
enabled: false
},
editing: {
mode: "cell",
refreshMode: "reshape",
allowUpdating: true,
allowDeleting: true,
allowAdding: true,
useIcons: true
},
columns: [
{
dataField: "Prefix",
caption: "Title",
width: 50,
validationRules: [{ type: "required" }]
},
{
dataField: "FirstName",
validationRules: [{ type: "required" }]
},
{
dataField: "StateID",
caption: "State",
lookup: {
dataSource: DevExpress.data.AspNet.createStore({
"key": "ID",
"loadUrl": BASE_PATH + "api/DataGridStatesLookup"
}),
displayExpr: "Name",
valueExpr: "ID"
},
validationRules: [{ type: "required" }]
},
{
dataField: "BirthDate",
dataType: "date",
validationRules: [{
type: "range",
max: new Date(3000, 0),
message: "Date can not be greater than 01/01/3000"
}]
}
]
});
};
var store1 = createStore();
var store2 = createStore();
var updateStores = function(events) {
store1.push(events);
store2.push(events);
};
createDataGrid("grid1", store1);
createDataGrid("grid2", store2);
var hubUrl = BASE_PATH + 'dataGridCollaborativeEditingHub?GroupId=' + groupId;
var connection = new signalR.HubConnectionBuilder()
.withUrl(hubUrl, {
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets
})
.configureLogging(signalR.LogLevel.Information)
.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 }]);
});
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<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://cdn3.devexpress.com/jslib/20.2.6/js/dx.all.js"></script>
<script src="js/signalr.js"></script>
<script src="https://unpkg.com/devextreme-aspnet-data@2.7.1/js/dx.aspnet.data.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="tables">
<div class="column">
<div id="grid1"></div>
</div>
<div class="column">
<div id="grid2"></div>
</div>
</div>
</div>
</body>
</html>
.tables {
display: flex;
}
.column:first-child {
width: 50%;
padding-right: 15px;
}
.column:last-child {
width: 50%;
padding-left: 15px;
}