Search results

Collaborative Editing in JavaScript Spreadsheet control

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.

  • To use Collaborative editing, inject the CollaborativeEditing module in the spreadsheet.

Dependencies

The following list of dependencies are required to use the collaborative editing support in spreadsheet.

|-- @aspnet/signalr
   |-- eventsource
   |-- request
   |-- ws
  • Run the command npm i @aspnet/signalr to install @aspnet/signalr packages in your application.

Server configuration

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.

import * as signalR from '@aspnet/signalr';

// For signalR Hub connection

const connection: signalR.HubConnection = new signalR.HubConnectionBuilder().withUrl('https://ej2services.syncfusion.com/production/web-services/hubs/spreadsheethub',{
    skipNegotiation: true,
    transport: signalR.HttpTransportType.WebSockets
  }).build();

Client configuration

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.

Source
Preview
app.ts
index.html
datasource.ts
import { Spreadsheet, CollaborativeEditing } from '@syncfusion/ej2-spreadsheet';
import * as signalR from '@aspnet/signalr';
import { data } from './datasource.ts';

// To Inject CollaborativeEditing module.

Spreadsheet.Inject(CollaborativeEditing);

// For signalR Hub connection
const connection: signalR.HubConnection = new signalR.HubConnectionBuilder().withUrl('https://ej2services.syncfusion.com/production/web-services/hubs/spreadsheethub',{
    skipNegotiation: true,
    transport: signalR.HttpTransportType.WebSockets
  }).build();

//Initialize the SpreadSheet control
let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: [{
                ranges: [{ dataSource: data }],
               columns: [{ width: 130 }, { width: 110 },{ width: 110},
                          { width: 90 }, { width: 90 }, {width: 90}, { width: 90 }, {width: 90}]
            }],
  actionComplete: (args) => {
       connection.send('BroadcastData', JSON.stringify(args)); // send the action data to the server
    },
});

spreadsheet.appendTo('#spreadsheet');

 connection.on('dataReceived', (data: string) => {
     spreadsheet.updateAction(data); // update the action to the connected clients
 });
    connection.start().then(() => { // to start the server
        console.log('server connected!!!');
    }).catch(err => console.log(err));
<!DOCTYPE html>
<html lang="en">

<head>
        <title>Collaborative Editing in SpreadSheet</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Typescript UI Controls" />
        <meta name="author" content="Syncfusion" />
        <link rel="shortcut icon" href="resources/favicon.ico" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
        <script src="system.config.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/aspnet-signalr/1.1.4/signalr.js"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
        <!--Element which is going to render-->
        <div id='loader'>Loading....</div>
        <div id='container'>
        <div id="spreadsheet"></div>
        </div>
</body>

</html>
export let data: Object[] = [
  { 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
  { 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
  { 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
  { 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
  { 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
  { 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
  { 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
  { 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
  { 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
  { 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 }
];

Prevent the particular action update for collaborative client

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.

Source
Preview
app.ts
index.html
datasource.ts
import { Spreadsheet, CollaborativeEditing } from '@syncfusion/ej2-spreadsheet';
import * as signalR from '@aspnet/signalr';
import { data } from './datasource.ts';

// To Inject CollaborativeEditing module.

Spreadsheet.Inject(CollaborativeEditing);

// For signalR Hub connection
const connection: signalR.HubConnection = new signalR.HubConnectionBuilder().withUrl('https://ej2services.syncfusion.com/production/web-services/hubs/spreadsheethub',{
    skipNegotiation: true,
    transport: signalR.HttpTransportType.WebSockets
  }).build();

//Initialize the SpreadSheet control
let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: [{
                ranges: [{ dataSource: data }],
                columns: [{ width: 130 }, { width: 110 },{ width: 110},
                          { width: 90 }, { width: 90 }, {width: 90}, { width: 90 }, {width: 90}]
            }],
  actionComplete: (args) => {
      if (args.action != 'format'){  // prevent the format action
         connection.send('BroadcastData', JSON.stringify(args)); // send the action data to the server
      }
    },
});

spreadsheet.appendTo('#spreadsheet');

 connection.on('dataReceived', (data: string) => {
     spreadsheet.updateAction(data); // update the action to the connected clients
 });
    connection.start().then(() => { // to start the server
        console.log('server connected!!!');
    }).catch(err => console.log(err));
<!DOCTYPE html>
<html lang="en">

<head>
        <title>Collaborative Editing in SpreadSheet</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Typescript UI Controls" />
        <meta name="author" content="Syncfusion" />
        <link rel="shortcut icon" href="resources/favicon.ico" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
        <script src="system.config.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/aspnet-signalr/1.1.4/signalr.js"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
        <!--Element which is going to render-->
        <div id='loader'>Loading....</div>
        <div id='container'>
        <div id="spreadsheet"></div>
        </div>
        
</body>

</html>
export let data: Object[] = [
  { 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
  { 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
  { 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
  { 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
  { 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
  { 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
  { 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
  { 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
  { 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
  { 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 }
];

See Also