syidaxgrid
Home Pricing Settings

GRID FEATURE · PRO

Real-time collaboration

Collaboration shares edits, cursors, and presence among users in the same room. A room name alone does not automatically connect devices over the internet.

Markdown source Features

How it works and when to use it

Without realtimeUrl, the feature serves demos within the same process or page. Multi-user deployments need an app-provided WebSocket service, authentication, room permissions, and persistence policy.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Test connections on the same page

Give two Grids the same room name and matching data-ID rules.

javascript
grid.collaborationRoom = 'orders-review';
grid.collabUserName = 'Reviewer A';
grid.collabUserColor = '#2459d3';

Verify the result: Check edit synchronization with another participant on the same page. Do not describe this as a connection to a real remote service.

Example 2. Connect remote collaboration

Set realtimeUrl to the app's authenticated WebSocket endpoint and implement joining and leaving. Enforce room permissions on the server so users cannot read other rooms' data.

Verify the result: Use syncStatusChanged to communicate disconnection and reconnection, and distinguish persistent saving from message delivery.

Example 3. Read synchronization results

Connect remote edits and conflict-resolution results to the app's activity history.

javascript
grid.addEventListener('remoteEditApplied', event => console.log(event.detail));
grid.addEventListener('collabConflictResolved', event => console.log(event.detail));

Verify the result: Inspect actual detail when users edit the same cell concurrently. Track the change source to avoid retransmission loops.

Combining features and troubleshooting

All participants must use the same rowId and column-identifier rules. Do not associate remote edits with display indices.

Collaboration status does not confirm persistent storage or audit retention. Connect persistence policy to the app server.

Related reading