The collaborative editing support allows you to work at a spreadsheet collaboratively with other users. Multiple users can access to the the same spreadsheet simultaneously.
The following dependent script is required to use the collaborative editing support in spreadsheet.
<script src="https://cdnjs.cloudflare.com/ajax/libs/aspnet-signalr/1.1.4/signalr.js"></script>
To make the communication between the server to the connected clients and from clients to the server, you need to configure the signalR Hubs using the following code.
// For signalR Hub connection
var connection = new signalR.HubConnectionBuilder().withUrl('https://ej2services.syncfusion.com/production/web-services/hubs/spreadsheethub',{
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets
}).build();
To broadcast the data for every action is spreadsheet, you need to transfer the data to the server through send
method in actionComplete
event and receive the same data by using the dataReceived
method. In the dataReceived
method, you need to update the action to the connected clients through updateAction
method.
The following code example shows Collaborative Editing
support in the Spreadsheet control.
<ejs-spreadsheet id="spreadsheet" actionComplete="actionComplete">
</ejs-spreadsheet>
<script>
// For signalR Hub connection
var connection = new signalR.HubConnectionBuilder().withUrl('https://ej2services.syncfusion.com/production/web-services/hubs/spreadsheethub', {
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets
}).build();
function actionComplete(args) {
connection.send('BroadcastData', JSON.stringify(args)); // send the action data to the server
}
connection.on('dataReceived', (data) => {
var spreadsheetObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
spreadsheetObj.updateAction(data);
});
connection.start().then(() => {
console.log('server connected!!!');
}).catch((err) => console.log(err));
</script>
public IActionResult Index()
{
return View();
}
Using the action
argument from the actionComplete
event, you can prevent the particular action update for collaborative client.
The following code example shows how to prevent collaborative client from updating the format
action.
<ejs-spreadsheet id="spreadsheet" actionComplete="actionComplete">
</ejs-spreadsheet>
<script>
// For signalR Hub connection
var connection = new signalR.HubConnectionBuilder().withUrl('https://ej2services.syncfusion.com/production/web-services/hubs/spreadsheethub', {
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets
}).build();
function actionComplete(args) {
if (args.action != 'format') { // prevent the format action
connection.send('BroadcastData', JSON.stringify(args)); // send the action data to the server
}
}
connection.on('dataReceived', (data) => {
var spreadsheetObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
spreadsheetObj.updateAction(data);
});
connection.start().then(() => {
console.log('server connected!!!');
}).catch((err) => console.log(err));
</script>
public IActionResult Index()
{
return View();
}