From 5c7c99ba7edc5df3006dec0d51cbd833eec4c5a4 Mon Sep 17 00:00:00 2001
From: bhuvaneshdhakshinmaoorthy <bhuvanesh.d@syncfusion.com>
Date: Wed, 7 Oct 2026 18:46:13 +0530
Subject: [PATCH 1/2] 1055046: Made corrections and added comments for code
 snippets

---
 client/vue/package.json                       |   2 +
 client/vue/src/App.vue                        | 304 +++++++++++++----
 client/vue/src/SpreadsheetEditorAdapter.ts    | 147 ++++----
 client/vue/src/style.css                      | 149 ++++++++-
 .../CollaborativeEditingController.cs         | 314 +++++++++---------
 5 files changed, 611 insertions(+), 305 deletions(-)

diff --git a/client/vue/package.json b/client/vue/package.json
index 282e3ef..77f0037 100644
--- a/client/vue/package.json
+++ b/client/vue/package.json
@@ -12,6 +12,8 @@
     "@microsoft/signalr": "^9.0.0",
     "@syncfusion/ej2-collaborator": "35.1.37",
     "@syncfusion/ej2-spreadsheet": "35.1.37",
+    "@syncfusion/ej2-buttons": "35.1.37",
+    "@syncfusion/ej2-popups": "35.1.37",
     "@syncfusion/ej2-tailwind3-theme": "35.1.37",
     "@syncfusion/ej2-vue-spreadsheet": "35.1.37",
     "vue": "^3.5.22"
diff --git a/client/vue/src/App.vue b/client/vue/src/App.vue
index bb6b0fc..eb6293d 100644
--- a/client/vue/src/App.vue
+++ b/client/vue/src/App.vue
@@ -1,102 +1,262 @@
 <script setup lang="ts">
-import { provide, ref } from 'vue';
-import {
-  SpreadsheetComponent as EjsSpreadsheet
-} from '@syncfusion/ej2-vue-spreadsheet';
-import {
-  CollaborativeEditingHandler,
-  type Spreadsheet
-} from '@syncfusion/ej2-spreadsheet';
+import { onBeforeUnmount, onMounted, provide, ref } from 'vue';
+import { Button } from '@syncfusion/ej2-buttons';
+import { Tooltip } from '@syncfusion/ej2-popups';
+import { SpreadsheetComponent as EjsSpreadsheet } from '@syncfusion/ej2-vue-spreadsheet';
+import { CollaborativeEditingHandler, type Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 import { CollaborationClient } from '@syncfusion/ej2-collaborator';
 import { SpreadsheetEditorAdapter } from './SpreadsheetEditorAdapter';
 
-const serviceUrl: string =
-  ''YOUR_COLLABORATION_SERVER_URL'';
-const currentUser: string = 'John Adams';
+const serviceUrl: string = 'YOUR_COLLABORATION_SERVER_URL';
+
+const userNames: string[] = [
+    'James Carter', 'Olivia Bennett', 'William Parker', 'Emma Collins',
+    'Henry Mitchell', 'Amelia Foster', 'Benjamin Turner', 'Charlotte Morgan',
+    'Lucas Anderson', 'Sophia Reynolds', 'Alexander Brooks', 'Isabella Hayes',
+    'Daniel Cooper', 'Mia Richardson', 'Matthew Hughes', 'Evelyn Ward',
+    'Samuel Peterson', 'Harper Jenkins', 'Joseph Sanders', 'Camila Bryant',
+    'David Russell', 'Luna Griffin', 'Michael Perry', 'Sofia Coleman',
+    'Ethan Powell', 'Avery Patterson', 'John Sullivan', 'Elizabeth Murphy',
+    'Jack Hamilton', 'Eleanor Wallace', 'Owen Simmons', 'Abigail Butler',
+    'Luke Henderson', 'Ella Fisher', 'Thomas Graham', 'Scarlett Woods',
+    'George Marshall', 'Grace Spencer', 'Oliver Harrison', 'Chloe Matthews',
+    'Leo Davidson', 'Victoria Palmer', 'Arthur Stevens', 'Lily Robertson',
+    'Edward Kennedy', 'Hannah Thompson', 'Harry Phillips', 'Zoe Campbell',
+    'Charles Edwards', 'Lucy Walker'
+];
 
 provide('spreadsheet', [CollaborativeEditingHandler]);
 
 const spreadsheetRef = ref<InstanceType<typeof EjsSpreadsheet> | null>(null);
+const tooltipHostRef = ref<HTMLElement | null>(null);
+const shareButtonRef = ref<HTMLButtonElement | null>(null);
+const currentUser: string = userNames[Math.floor(Math.random() * userNames.length)] ?? 'John Sullivan';
+
 let adapter: SpreadsheetEditorAdapter | null = null;
-let client: CollaborationClient | null = null;
+let collaborationClient: CollaborationClient | null = null;
+let shareButton: Button | null = null;
+let copyButton: Button | null = null;
+let shareTooltip: Tooltip | null = null;
+let copyResetTimer: number | null = null;
 let initialized: boolean = false;
 
+/** Returns the collaboration room name from the URL or creates a new room name. */
 function getRoomName(): string {
-  const currentUrl: URL = new URL(window.location.href);
-  let roomName: string = (
-    currentUrl.searchParams.get('id') || ''
-  ).trim();
-
-  if (!roomName) {
-    roomName = Math.random().toString(32).slice(2);
-    currentUrl.searchParams.set('id', roomName);
-    window.history.replaceState(
-      window.history.state,
-      '',
-      currentUrl.pathname + currentUrl.search + currentUrl.hash
+    const currentUrl: URL = new URL(window.location.href);
+    let roomName: string = (currentUrl.searchParams.get('id') || '').trim();
+
+    if (!roomName) {
+        roomName = Math.random().toString(32).slice(2);
+        currentUrl.searchParams.set('id', roomName);
+        window.history.replaceState(
+            window.history.state,
+            '',
+            currentUrl.pathname + currentUrl.search + currentUrl.hash
+        );
+    }
+
+    return roomName;
+}
+
+/** Resets the copy button text when the share tooltip is closed. */
+function resetCopyButton(): void {
+    if (copyButton) {
+        copyButton.content = 'Copy URL';
+        copyButton.dataBind();
+    }
+}
+
+/** Closes the share tooltip and clears the copy-state timer. */
+function closeShareTooltip(): void {
+    shareTooltip?.close();
+    resetCopyButton();
+
+    if (copyResetTimer !== null) {
+        window.clearTimeout(copyResetTimer);
+        copyResetTimer = null;
+    }
+}
+
+/** Copies the collaboration URL and displays the copied state temporarily. */
+async function copyUrl(): Promise<void> {
+    try {
+        await navigator.clipboard.writeText(window.location.href);
+
+        if (copyButton) {
+            copyButton.content = 'Copied';
+            copyButton.dataBind();
+        }
+
+        if (copyResetTimer !== null) {
+            window.clearTimeout(copyResetTimer);
+        }
+
+        copyResetTimer = window.setTimeout(closeShareTooltip, 1500);
+    } catch (error) {
+        console.error('[Collaborative Editing] Failed to copy the URL.', error);
+    }
+}
+
+/** Creates the share tooltip content and initializes the Copy URL button. */
+function createShareTooltipContent(): HTMLElement {
+    const content: HTMLDivElement = document.createElement('div');
+    const label: HTMLLabelElement = document.createElement('label');
+    const row: HTMLDivElement = document.createElement('div');
+    const input: HTMLInputElement = document.createElement('input');
+    const buttonElement: HTMLButtonElement = document.createElement('button');
+
+    content.className = 'share-tooltip-content';
+    label.className = 'share-url-label';
+    label.htmlFor = 'collaboration-url';
+    label.textContent = 'Collaboration URL';
+    row.className = 'share-url-row';
+    input.id = 'collaboration-url';
+    input.className = 'e-input share-url-input';
+    input.type = 'text';
+    input.value = window.location.href;
+    input.readOnly = true;
+    input.setAttribute('aria-label', 'Collaboration URL');
+    buttonElement.type = 'button';
+
+    row.append(input, buttonElement);
+    content.append(label, row);
+
+    copyButton = new Button({
+        content: 'Copy URL',
+        cssClass: 'e-primary copy-url-button'
+    });
+    copyButton.appendTo(buttonElement);
+    buttonElement.addEventListener('click', copyUrl);
+
+    return content;
+}
+
+/** Closes the share tooltip when a pointer action occurs outside it. */
+function closeTooltipOnOutsideClick(event: MouseEvent): void {
+    const target: Node = event.target as Node;
+    const tooltipElement: Element | null = document.querySelector(
+        '.collaboration-share-tooltip'
     );
-  }
 
-  return roomName;
+    if (shareButtonRef.value?.contains(target) || tooltipElement?.contains(target)) {
+        return;
+    }
+
+    closeShareTooltip();
+}
+
+/** Closes the share tooltip when the page or a parent element is scrolled. */
+function closeTooltipOnScroll(): void {
+    closeShareTooltip();
 }
 
+/** Loads the synchronized workbook and joins the collaboration room. */
 async function onCreated(): Promise<void> {
-  const spreadsheet = spreadsheetRef.value?.ej2Instances as
-    | Spreadsheet
-    | undefined;
-
-  if (!spreadsheet || initialized) {
-    return;
-  }
-
-  initialized = true;
-  const roomName: string = getRoomName();
-  const spreadsheetAdapter = new SpreadsheetEditorAdapter(
-    spreadsheet,
-    serviceUrl,
-    currentUser
-  );
-
-  try {
-    await spreadsheetAdapter.loadFromServer('Sample', roomName);
-
-    const collaborationClient = new CollaborationClient(
-      spreadsheetAdapter,
-      {
+    const spreadsheet: Spreadsheet | undefined =
+        spreadsheetRef.value?.ej2Instances as Spreadsheet | undefined;
+
+    if (!spreadsheet || initialized) {
+        return;
+    }
+
+    initialized = true;
+    const roomName: string = getRoomName();
+    const spreadsheetAdapter = new SpreadsheetEditorAdapter(
+        spreadsheet,
         serviceUrl,
-        connectionType: 'signalr',
         currentUser
-      }
     );
 
-    adapter = spreadsheetAdapter;
-    client = collaborationClient;
-    await collaborationClient.joinRoomAsync(roomName);
+    try {
+        await spreadsheetAdapter.loadFromServer('Sample', roomName);
 
-    console.log(
-      '[Collaborative Editing] Joined room',
-      roomName
-    );
-  } catch (error) {
-    initialized = false;
-    console.error(
-      '[Collaborative Editing] Failed to join the room.',
-      error
-    );
-  }
+        const client = new CollaborationClient(spreadsheetAdapter, {
+            serviceUrl,
+            connectionType: 'signalr',
+            currentUser
+        });
+
+        adapter = spreadsheetAdapter;
+        collaborationClient = client;
+        await client.joinRoomAsync(roomName);
+        console.log('[Collaborative Editing] Joined room', roomName);
+    } catch (error) {
+        initialized = false;
+        console.error('[Collaborative Editing] Failed to join the room.', error);
+    }
 }
 
+/** Sends a completed local Spreadsheet action to the Collaboration Server. */
 function onActionComplete(args: unknown): void {
-  adapter?.sendActionToServer(args);
+    adapter?.sendActionToServer(args);
 }
+
+onMounted(() => {
+    if (shareButtonRef.value) {
+        shareButton = new Button({
+            content: 'Share',
+            cssClass: 'e-primary share-button'
+        });
+        shareButton.appendTo(shareButtonRef.value);
+    }
+
+    if (tooltipHostRef.value) {
+        shareTooltip = new Tooltip({
+            content: createShareTooltipContent,
+            opensOn: 'Click',
+            position: 'BottomRight',
+            cssClass: 'collaboration-share-tooltip',
+            target: '#share-collaboration-url'
+        });
+        shareTooltip.appendTo(tooltipHostRef.value);
+    }
+
+    document.addEventListener('mousedown', closeTooltipOnOutsideClick);
+    window.addEventListener('scroll', closeTooltipOnScroll, true);
+});
+
+onBeforeUnmount(() => {
+    document.removeEventListener('mousedown', closeTooltipOnOutsideClick);
+    window.removeEventListener('scroll', closeTooltipOnScroll, true);
+
+    if (copyResetTimer !== null) {
+        window.clearTimeout(copyResetTimer);
+    }
+
+    shareTooltip?.destroy();
+    shareButton?.destroy();
+    copyButton?.destroy();
+    collaborationClient = null;
+    adapter = null;
+    initialized = false;
+});
 </script>
 
 <template>
-  <ejs-spreadsheet
-    ref="spreadsheetRef"
-    height="550px"
-    :enableCollaborativeEditing="true"
-    :created="onCreated"
-    :actionComplete="onActionComplete"
-  />
+    <div class="collaborative-sample">
+        <div class="collaboration-info-bar">
+            <div class="collaboration-info-text">
+                Copy and share this demo URL with others to collaborate in real time.
+                The link contains a unique session ID that connects all participants
+                to the same workbook.
+            </div>
+            <div ref="tooltipHostRef" class="share-tooltip-host">
+                <button
+                    id="share-collaboration-url"
+                    ref="shareButtonRef"
+                    type="button"
+                ></button>
+            </div>
+        </div>
+        <div class="spreadsheet-container">
+            <!-- Enables real-time collaborative editing in the Spreadsheet. -->
+            <ejs-spreadsheet
+                ref="spreadsheetRef"
+                height="550px"
+                :enableCollaborativeEditing="true"
+                :created="onCreated"
+                :actionComplete="onActionComplete"
+            />
+        </div>
+    </div>
 </template>
diff --git a/client/vue/src/SpreadsheetEditorAdapter.ts b/client/vue/src/SpreadsheetEditorAdapter.ts
index 16b703a..88dce89 100644
--- a/client/vue/src/SpreadsheetEditorAdapter.ts
+++ b/client/vue/src/SpreadsheetEditorAdapter.ts
@@ -1,83 +1,100 @@
 import type {
-  ICollaborationActionData,
-  ICollaborationProvider
+    ICollaborationActionData,
+    ICollaborationProvider
 } from '@syncfusion/ej2-collaborator';
 import type { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
 interface ImportFileResponse {
-  sfdt: string;
-  version: number;
+    sfdt: string;
+    version: number;
 }
 
+/** Connects the Spreadsheet with the Collaboration Client and Server. */
 export class SpreadsheetEditorAdapter implements ICollaborationProvider {
-  public currentRoomName: string = '';
+    public currentRoomName: string = '';
 
-  public constructor(
-    private spreadsheet: Spreadsheet,
-    private serviceUrl: string,
-    private currentUser: string
-  ) {
-    this.serviceUrl = serviceUrl.endsWith('/')
-      ? serviceUrl
-      : serviceUrl + '/';
-  }
-
-  public async loadFromServer(
-    fileName: string,
-    roomName: string
-  ): Promise<void> {
-    const response: Response = await fetch(
-      this.serviceUrl + 'api/CollaborativeEditing/ImportFile',
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ fileName, roomName })
-      }
-    );
-
-    if (!response.ok) {
-      throw new Error('Failed to load the workbook.');
+    /**
+     * Initializes a new instance of the Spreadsheet collaboration adapter.
+     *
+     * @param spreadsheet - The Spreadsheet instance used for collaborative editing.
+     * @param serviceUrl - The Collaboration Server URL.
+     * @param currentUser - The display name of the current participant.
+     */
+    public constructor(
+        private spreadsheet: Spreadsheet,
+        private serviceUrl: string,
+        private currentUser: string
+    ) {
+        this.serviceUrl = serviceUrl.endsWith('/')
+            ? serviceUrl
+            : serviceUrl + '/';
     }
 
-    const data: ImportFileResponse = JSON.parse(
-      await response.text()
-    );
+    /**
+     * Loads the latest synchronized workbook and initializes the collaboration room.
+     *
+     * @param fileName - The name of the workbook to load.
+     * @param roomName - The unique collaboration room name.
+     */
+    public async loadFromServer(fileName: string, roomName: string): Promise<void> {
+        const response: Response = await fetch(
+            this.serviceUrl + 'api/CollaborativeEditing/ImportFile',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    fileName,
+                    roomName
+                })
+            }
+        );
 
-    this.currentRoomName = roomName;
-    this.spreadsheet.collaborativeEditingModule.updateRoomInfo(
-      roomName,
-      data.version,
-      this.serviceUrl + 'api/CollaborativeEditing/'
-    );
-    this.spreadsheet.collaborativeEditingModule.setLocalUser(
-      this.currentUser
-    );
-    this.spreadsheet.openFromJson({ file: data.sfdt });
-  }
+        if (!response.ok) {
+            throw new Error('Failed to load the workbook.');
+        }
 
-  public sendActionToServer(action: unknown): void {
-    if (!action) {
-      return;
-    }
+        const data: ImportFileResponse = JSON.parse(await response.text());
 
-    this.spreadsheet.collaborativeEditingModule.sendActionToServer(
-      action
-    );
-  }
+        this.currentRoomName = roomName;
+        this.spreadsheet.collaborativeEditingModule.updateRoomInfo(
+            roomName,
+            data.version,
+            this.serviceUrl + 'api/CollaborativeEditing/'
+        );
+        this.spreadsheet.collaborativeEditingModule.setLocalUser(this.currentUser);
+        this.spreadsheet.openFromJson({
+            file: data.sfdt
+        });
+    }
 
-  public applyRemoteAction(
-    action: string,
-    data: ICollaborationActionData
-  ): void {
-    if (!data) {
-      return;
+    /**
+     * Sends a completed local Spreadsheet action to the Collaboration Server.
+     *
+     * @param action - The completed Spreadsheet action.
+     */
+    public sendActionToServer(action: unknown): void {
+        if (action) {
+            this.spreadsheet.collaborativeEditingModule.sendActionToServer(action);
+        }
     }
 
-    this.spreadsheet.collaborativeEditingModule.applyRemoteAction(
-      action,
-      data.payload
-    );
-  }
+    /**
+     * Applies an action received from another participant to the Spreadsheet.
+     *
+     * @param action - The collaborative action name.
+     * @param data - The collaborative action data received from the server.
+     */
+    public applyRemoteAction(
+        action: string,
+        data: ICollaborationActionData
+    ): void {
+        if (data) {
+            this.spreadsheet.collaborativeEditingModule.applyRemoteAction(
+                action,
+                data.payload
+            );
+        }
+    }
 }
diff --git a/client/vue/src/style.css b/client/vue/src/style.css
index 997bf1a..3808579 100644
--- a/client/vue/src/style.css
+++ b/client/vue/src/style.css
@@ -3,6 +3,151 @@
 html,
 body,
 #app {
-  height: 100%;
-  margin: 0;
+    height: 100%;
+    margin: 0;
+}
+
+.collaborative-sample,
+.collaborative-sample * {
+    box-sizing: border-box;
+}
+
+.collaborative-sample {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    color: #242424;
+    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont,
+        "Helvetica Neue", Arial, sans-serif;
+}
+
+.collaboration-info-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 50px;
+    min-height: 50px;
+    max-height: 50px;
+    margin: 0;
+    padding: 6px 12px;
+    border: 1px solid #d6d6d6;
+    border-bottom: 0;
+    background-color: #f8f9fa;
+}
+
+.collaboration-info-text {
+    min-width: 0;
+    margin: 0;
+    padding-right: 16px;
+    overflow: hidden;
+    color: #424242;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.share-tooltip-host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    height: 36px;
+}
+
+.share-button.e-btn,
+.copy-url-button.e-btn {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    height: 36px;
+    font-family: inherit;
+    line-height: normal !important;
+}
+
+.share-button.e-btn {
+    min-width: 88px;
+    margin: 0;
+    padding: 0 16px !important;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.spreadsheet-container {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.collaboration-share-tooltip.e-tooltip-wrap {
+    max-width: none;
+    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont,
+        "Helvetica Neue", Arial, sans-serif;
+}
+
+.collaboration-share-tooltip .e-tip-content {
+    padding: 12px;
+}
+
+.share-tooltip-content {
+    width: 420px;
+    max-width: calc(100vw - 48px);
+}
+
+.share-url-label {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.share-url-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+
+.share-url-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 36px;
+    font-family: inherit;
+    font-size: 13px;
+}
+
+.copy-url-button.e-btn {
+    flex: 0 0 auto;
+    min-width: 106px;
+    padding: 0 12px !important;
+    white-space: nowrap;
+}
+
+@media (max-width: 600px) {
+    .collaboration-info-bar {
+        padding-right: 8px;
+        padding-left: 8px;
+    }
+
+    .collaboration-info-text {
+        font-size: 13px;
+    }
+
+    .share-tooltip-content {
+        width: calc(100vw - 64px);
+    }
+
+    .share-url-row {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    .copy-url-button.e-btn {
+        width: 100%;
+    }
 }
diff --git a/server/aspnet-core/Controllers/CollaborativeEditingController.cs b/server/aspnet-core/Controllers/CollaborativeEditingController.cs
index ed826f9..ab93d23 100644
--- a/server/aspnet-core/Controllers/CollaborativeEditingController.cs
+++ b/server/aspnet-core/Controllers/CollaborativeEditingController.cs
@@ -19,6 +19,9 @@
 
 namespace EJ2SpreadsheetServer.Controllers
 {
+    /// <summary>
+    /// Provides APIs for Spreadsheet collaborative editing actions and participant selections.
+    /// </summary>
     [Route("api/[controller]")]
     [ApiController]
     public class CollaborativeEditingController : ControllerBase
@@ -26,20 +29,17 @@ public class CollaborativeEditingController : ControllerBase
         private static readonly ConcurrentDictionary<
             string,
             ConcurrentDictionary<string, SpreadsheetSelectionInfo>>
-            RoomSelections =
-                new ConcurrentDictionary<
-                    string,
-                    ConcurrentDictionary<
-                        string,
-                        SpreadsheetSelectionInfo>>();
+            RoomSelections = new ConcurrentDictionary<
+                string,
+                ConcurrentDictionary<string, SpreadsheetSelectionInfo>>();
 
         private readonly IWebHostEnvironment hostingEnvironment;
         private readonly IActionService actionService;
         private readonly ICollaborationAdapter adapter;
         private readonly IActiveTransport transport;
 
-        private static readonly JsonSerializerSettings
-            ControllerJsonSettings = new JsonSerializerSettings
+        private static readonly JsonSerializerSettings ControllerJsonSettings =
+            new JsonSerializerSettings
             {
                 NullValueHandling = NullValueHandling.Ignore,
                 ContractResolver = new DefaultContractResolver
@@ -48,6 +48,13 @@ private static readonly JsonSerializerSettings
                 }
             };
 
+        /// <summary>
+        /// Initializes a new instance of the <see cref="CollaborativeEditingController"/> class.
+        /// </summary>
+        /// <param name="hostingEnvironment">Provides access to the server hosting environment.</param>
+        /// <param name="actionService">Manages collaborative editing actions and versions.</param>
+        /// <param name="adapter">Maps Spreadsheet actions to and from collaboration actions.</param>
+        /// <param name="transport">Broadcasts collaboration updates to connected participants.</param>
         public CollaborativeEditingController(
             IWebHostEnvironment hostingEnvironment,
             IActionService actionService,
@@ -60,14 +67,17 @@ public CollaborativeEditingController(
             this.transport = transport;
         }
 
+        /// <summary>
+        /// Loads the source workbook, applies pending room actions, and returns the synchronized workbook.
+        /// </summary>
+        /// <param name="param">Contains the workbook name and collaboration room name.</param>
+        /// <returns>The serialized workbook content and current collaboration version.</returns>
         [HttpPost]
         [Route("ImportFile")]
         [EnableCors("AllowAllOrigins")]
-        public async Task<string> ImportFile(
-            [FromBody] FileInfo param)
+        public async Task<string> ImportFile([FromBody] FileInfo param)
         {
-            if (param == null ||
-                string.IsNullOrWhiteSpace(param.roomName))
+            if (param == null || string.IsNullOrWhiteSpace(param.roomName))
             {
                 return null;
             }
@@ -91,61 +101,42 @@ await actionService.GetPendingOperationsAsync(
                         0,
                         -1
                     );
+                List<ActionInfo> spreadsheetActions = collaborationActions == null
+                    ? new List<ActionInfo>()
+                    : collaborationActions
+                        .Select(action =>
+                            adapter.MapGenericToControlAction(action) as ActionInfo
+                        )
+                        .Where(action => action != null)
+                        .OrderBy(action => action.Version)
+                        .ToList();
 
-                List<ActionInfo> spreadsheetActions =
-                    collaborationActions == null
-                        ? new List<ActionInfo>()
-                        : collaborationActions
-                            .Select(action =>
-                                adapter.MapGenericToControlAction(
-                                    action
-                                ) as ActionInfo
-                            )
-                            .Where(action => action != null)
-                            .OrderBy(action => action.Version)
-                            .ToList();
-
-                using (ExcelEngine temporaryExcelEngine =
-                    new ExcelEngine())
+                using (ExcelEngine temporaryExcelEngine = new ExcelEngine())
                 {
-                    IApplication application =
-                        temporaryExcelEngine.Excel;
-
-                    IWorkbook temporaryWorkbook =
-                        application.Workbooks.Open(filePath);
+                    IApplication application = temporaryExcelEngine.Excel;
+                    IWorkbook temporaryWorkbook = application.Workbooks.Open(filePath);
 
                     try
                     {
                         if (spreadsheetActions.Count > 0)
                         {
                             CollaborativeEditingHandler handler =
-                                new CollaborativeEditingHandler(
-                                    temporaryWorkbook
-                                );
+                                new CollaborativeEditingHandler(temporaryWorkbook);
 
-                            foreach (ActionInfo action in
-                                spreadsheetActions)
+                            foreach (ActionInfo action in spreadsheetActions)
                             {
                                 handler.UpdateAction(action);
                             }
                         }
 
-                        using (MemoryStream workbookStream =
-                            new MemoryStream())
+                        using (MemoryStream workbookStream = new MemoryStream())
                         {
-                            temporaryWorkbook.SaveAs(
-                                workbookStream
-                            );
-
+                            temporaryWorkbook.SaveAs(workbookStream);
                             workbookStream.Position = 0;
 
-                            string clientFileName =
-                                string.IsNullOrWhiteSpace(
-                                    param.fileName
-                                )
-                                    ? "Sample"
-                                    : param.fileName;
-
+                            string clientFileName = string.IsNullOrWhiteSpace(param.fileName)
+                                ? "Sample"
+                                : param.fileName;
                             IFormFile formFile = new FormFile(
                                 workbookStream,
                                 0,
@@ -153,33 +144,21 @@ await actionService.GetPendingOperationsAsync(
                                 clientFileName,
                                 "Sample.xlsx"
                             );
+                            OpenRequest openRequest = new OpenRequest
+                            {
+                                File = formFile
+                            };
+                            string workbookJson = Workbook.Open(openRequest);
+                            int currentVersion = spreadsheetActions.Count > 0
+                                ? spreadsheetActions.Max(action => action.Version)
+                                : 0;
+                            DocumentContent content = new DocumentContent
+                            {
+                                sfdt = workbookJson,
+                                version = currentVersion
+                            };
 
-                            OpenRequest openRequest =
-                                new OpenRequest
-                                {
-                                    File = formFile
-                                };
-
-                            string workbookJson =
-                                Workbook.Open(openRequest);
-
-                            int currentVersion =
-                                spreadsheetActions.Count > 0
-                                    ? spreadsheetActions.Max(
-                                        action => action.Version
-                                    )
-                                    : 0;
-
-                            DocumentContent content =
-                                new DocumentContent
-                                {
-                                    sfdt = workbookJson,
-                                    version = currentVersion
-                                };
-
-                            return JsonConvert.SerializeObject(
-                                content
-                            );
+                            return JsonConvert.SerializeObject(content);
                         }
                     }
                     finally
@@ -190,42 +169,33 @@ await actionService.GetPendingOperationsAsync(
             }
             catch (Exception exception)
             {
-                Console.WriteLine(
-                    "Spreadsheet import failed: " +
-                    exception
-                );
-
+                Console.WriteLine("Spreadsheet import failed: " + exception);
                 return null;
             }
         }
 
+        /// <summary>
+        /// Stores a Spreadsheet action and broadcasts the processed action to the collaboration room.
+        /// </summary>
+        /// <param name="param">Contains the Spreadsheet action and collaboration room information.</param>
+        /// <returns>The serialized action after collaboration processing.</returns>
         [HttpPost]
         [Route("UpdateAction")]
         [EnableCors("AllowAllOrigins")]
-        public async Task<string> UpdateAction(
-            [FromBody] ActionInfo param)
+        public async Task<string> UpdateAction([FromBody] ActionInfo param)
         {
-            if (param == null ||
-                string.IsNullOrWhiteSpace(param.RoomName))
+            if (param == null || string.IsNullOrWhiteSpace(param.RoomName))
             {
                 return null;
             }
 
             CollaborationAction collaborationAction =
                 adapter.MapControlToGenericAction(param);
-
             CollaborationAction modifiedAction =
-                await actionService.AddOperationAsync(
-                    collaborationAction,
-                    adapter
-                );
-
-            ActionInfo updatedAction =
-                modifiedAction == null
-                    ? null
-                    : adapter.MapGenericToControlAction(
-                        modifiedAction
-                    ) as ActionInfo;
+                await actionService.AddOperationAsync(collaborationAction, adapter);
+            ActionInfo updatedAction = modifiedAction == null
+                ? null
+                : adapter.MapGenericToControlAction(modifiedAction) as ActionInfo;
 
             if (updatedAction == null)
             {
@@ -236,7 +206,6 @@ await actionService.AddOperationAsync(
                 updatedAction,
                 ControllerJsonSettings
             );
-
             await transport.SendToGroupAsync(
                 param.RoomName,
                 "action",
@@ -246,12 +215,16 @@ await transport.SendToGroupAsync(
             return payload;
         }
 
+        /// <summary>
+        /// Updates a participant selection and broadcasts it to other users in the room.
+        /// </summary>
+        /// <param name="param">Contains the participant selection and connection details.</param>
+        /// <returns>The updated participant selection.</returns>
         [HttpPost]
         [Route("UpdateSelection")]
         [EnableCors("AllowAllOrigins")]
-        public async Task<SpreadsheetSelectionInfo>
-            UpdateSelection(
-                [FromBody] SpreadsheetSelectionInfo param)
+        public async Task<SpreadsheetSelectionInfo> UpdateSelection(
+            [FromBody] SpreadsheetSelectionInfo param)
         {
             if (param == null ||
                 string.IsNullOrWhiteSpace(param.RoomName) ||
@@ -260,22 +233,16 @@ public async Task<SpreadsheetSelectionInfo>
                 return param;
             }
 
-            ConcurrentDictionary<
-                string,
-                SpreadsheetSelectionInfo> selections =
-                    RoomSelections.GetOrAdd(
-                        param.RoomName,
-                        _ => new ConcurrentDictionary<
-                            string,
-                            SpreadsheetSelectionInfo>()
-                    );
-
+            ConcurrentDictionary<string, SpreadsheetSelectionInfo> selections =
+                RoomSelections.GetOrAdd(
+                    param.RoomName,
+                    _ => new ConcurrentDictionary<string, SpreadsheetSelectionInfo>()
+                );
             selections.AddOrUpdate(
                 param.ConnectionId,
                 param,
                 (_, _) => param
             );
-
             await transport.SendToGroupExceptAsync(
                 param.RoomName,
                 param.ConnectionId,
@@ -286,28 +253,34 @@ await transport.SendToGroupExceptAsync(
             return param;
         }
 
+        /// <summary>
+        /// Returns the active participant selections for a collaboration room.
+        /// </summary>
+        /// <param name="roomName">The collaboration room name.</param>
+        /// <returns>The active participant selections in the room.</returns>
         [HttpGet]
         [Route("GetRoomSelections/{roomName}")]
         [EnableCors("AllowAllOrigins")]
-        public ActionResult<List<SpreadsheetSelectionInfo>>
-            GetRoomSelections(string roomName)
+        public ActionResult<List<SpreadsheetSelectionInfo>> GetRoomSelections(
+            string roomName)
         {
             if (string.IsNullOrWhiteSpace(roomName) ||
                 !RoomSelections.TryGetValue(
                     roomName,
-                    out ConcurrentDictionary<
-                        string,
-                        SpreadsheetSelectionInfo> selections
+                    out ConcurrentDictionary<string, SpreadsheetSelectionInfo> selections
                 ))
             {
-                return Ok(
-                    new List<SpreadsheetSelectionInfo>()
-                );
+                return Ok(new List<SpreadsheetSelectionInfo>());
             }
 
             return Ok(selections.Values.ToList());
         }
 
+        /// <summary>
+        /// Removes a disconnected participant selection from the collaboration room.
+        /// </summary>
+        /// <param name="request">Contains the collaboration room and connection identifiers.</param>
+        /// <returns>An HTTP success result.</returns>
         [HttpPost]
         [Route("RemoveUserSelection")]
         [EnableCors("AllowAllOrigins")]
@@ -315,79 +288,61 @@ public ActionResult RemoveUserSelection(
             [FromBody] RemoveSelectionRequest request)
         {
             if (request == null ||
-                string.IsNullOrWhiteSpace(
-                    request.RoomName
-                ) ||
-                string.IsNullOrWhiteSpace(
-                    request.ConnectionId
-                ))
+                string.IsNullOrWhiteSpace(request.RoomName) ||
+                string.IsNullOrWhiteSpace(request.ConnectionId))
             {
                 return Ok();
             }
 
             if (RoomSelections.TryGetValue(
                 request.RoomName,
-                out ConcurrentDictionary<
-                    string,
-                    SpreadsheetSelectionInfo> selections
+                out ConcurrentDictionary<string, SpreadsheetSelectionInfo> selections
             ))
             {
-                selections.TryRemove(
-                    request.ConnectionId,
-                    out _
-                );
+                selections.TryRemove(request.ConnectionId, out _);
 
                 if (selections.IsEmpty)
                 {
-                    RoomSelections.TryRemove(
-                        request.RoomName,
-                        out _
-                    );
+                    RoomSelections.TryRemove(request.RoomName, out _);
                 }
             }
 
             return Ok();
         }
 
+        /// <summary>
+        /// Returns collaboration actions newer than the client's last synchronized version.
+        /// </summary>
+        /// <param name="param">Contains the room name and last synchronized version.</param>
+        /// <returns>The serialized list of pending Spreadsheet actions.</returns>
         [HttpPost]
         [Route("GetActionsFromServer")]
         [EnableCors("AllowAllOrigins")]
-        public async Task<ActionResult<List<ActionInfo>>>
-            GetActionsFromServer(
-                [FromBody] ActionInfo param)
+        public async Task<ActionResult<List<ActionInfo>>> GetActionsFromServer(
+            [FromBody] ActionInfo param)
         {
-            if (param == null ||
-                string.IsNullOrWhiteSpace(param.RoomName))
+            if (param == null || string.IsNullOrWhiteSpace(param.RoomName))
             {
                 return Ok(new List<ActionInfo>());
             }
 
             int lastSyncedVersion = param.Version;
-
             List<CollaborationAction> collaborationActions =
-                await actionService
-                    .GetEffectivePendingVersionAsync(
-                        param.RoomName,
-                        lastSyncedVersion
-                    );
-
-            List<ActionInfo> actions =
-                collaborationActions == null
-                    ? new List<ActionInfo>()
-                    : collaborationActions
-                        .Select(action =>
-                            adapter.MapGenericToControlAction(
-                                action
-                            ) as ActionInfo
-                        )
-                        .Where(action =>
-                            action != null &&
-                            action.Version >
-                                lastSyncedVersion
-                        )
-                        .OrderBy(action => action.Version)
-                        .ToList();
-
+                await actionService.GetEffectivePendingVersionAsync(
+                    param.RoomName,
+                    lastSyncedVersion
+                );
+            List<ActionInfo> actions = collaborationActions == null
+                ? new List<ActionInfo>()
+                : collaborationActions
+                    .Select(action =>
+                        adapter.MapGenericToControlAction(action) as ActionInfo
+                    )
+                    .Where(action =>
+                        action != null && action.Version > lastSyncedVersion
+                    )
+                    .OrderBy(action => action.Version)
+                    .ToList();
             string payload = JsonConvert.SerializeObject(
                 actions,
                 ControllerJsonSettings
@@ -396,24 +351,51 @@ await actionService
             return Ok(payload);
         }
 
+        /// <summary>
+        /// Represents a request to remove a participant selection.
+        /// </summary>
         public class RemoveSelectionRequest
         {
+            /// <summary>
+            /// Gets or sets the collaboration room name.
+            /// </summary>
             public string RoomName { get; set; }
 
+            /// <summary>
+            /// Gets or sets the participant connection identifier.
+            /// </summary>
             public string ConnectionId { get; set; }
         }
 
+        /// <summary>
+        /// Represents the synchronized workbook content and collaboration version.
+        /// </summary>
         public class DocumentContent
         {
+            /// <summary>
+            /// Gets or sets the current collaboration version.
+            /// </summary>
             public int version { get; set; }
 
+            /// <summary>
+            /// Gets or sets the serialized workbook content.
+            /// </summary>
             public string sfdt { get; set; }
         }
 
+        /// <summary>
+        /// Represents a workbook import request.
+        /// </summary>
         public class FileInfo
         {
+            /// <summary>
+            /// Gets or sets the workbook file name.
+            /// </summary>
             public string fileName { get; set; }
 
+            /// <summary>
+            /// Gets or sets the collaboration room name.
+            /// </summary>
             public string roomName { get; set; }
         }
     }

From 667d7557d1f0d298adae2e8ac1796d25f38a0ec6 Mon Sep 17 00:00:00 2001
From: bhuvaneshdhakshinmaoorthy <bhuvanesh.d@syncfusion.com>
Date: Wed, 7 Oct 2026 19:09:43 +0530
Subject: [PATCH 2/2] 1055046: Made corrections and added comments for code
 snippets

---
 client/vue/src/App.vue   | 80 ++++++++++++++++++++++++++++------------
 client/vue/src/style.css | 10 +++++
 2 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/client/vue/src/App.vue b/client/vue/src/App.vue
index eb6293d..bb0a34b 100644
--- a/client/vue/src/App.vue
+++ b/client/vue/src/App.vue
@@ -25,18 +25,22 @@ const userNames: string[] = [
     'Charles Edwards', 'Lucy Walker'
 ];
 
+// Injects the collaborative editing service into the Spreadsheet.
 provide('spreadsheet', [CollaborativeEditingHandler]);
 
 const spreadsheetRef = ref<InstanceType<typeof EjsSpreadsheet> | null>(null);
-const tooltipHostRef = ref<HTMLElement | null>(null);
 const shareButtonRef = ref<HTMLButtonElement | null>(null);
-const currentUser: string = userNames[Math.floor(Math.random() * userNames.length)] ?? 'John Sullivan';
+const currentUser: string =
+    userNames[Math.floor(Math.random() * userNames.length)] ?? 'John Sullivan';
 
 let adapter: SpreadsheetEditorAdapter | null = null;
 let collaborationClient: CollaborationClient | null = null;
 let shareButton: Button | null = null;
 let copyButton: Button | null = null;
 let shareTooltip: Tooltip | null = null;
+let tooltipContent: HTMLElement | null = null;
+let collaborationUrlInput: HTMLInputElement | null = null;
+let copyButtonElement: HTMLButtonElement | null = null;
 let copyResetTimer: number | null = null;
 let initialized: boolean = false;
 
@@ -77,6 +81,21 @@ function closeShareTooltip(): void {
     }
 }
 
+/** Opens the collaboration Share tooltip. */
+function openShareTooltip(): void {
+    if (!shareButtonRef.value || !shareTooltip) {
+        return;
+    }
+
+    resetCopyButton();
+
+    if (collaborationUrlInput) {
+        collaborationUrlInput.value = window.location.href;
+    }
+
+    shareTooltip.open(shareButtonRef.value);
+}
+
 /** Copies the collaboration URL and displays the copied state temporarily. */
 async function copyUrl(): Promise<void> {
     try {
@@ -97,7 +116,7 @@ async function copyUrl(): Promise<void> {
     }
 }
 
-/** Creates the share tooltip content and initializes the Copy URL button. */
+/** Creates the content displayed in the Share tooltip. */
 function createShareTooltipContent(): HTMLElement {
     const content: HTMLDivElement = document.createElement('div');
     const label: HTMLLabelElement = document.createElement('label');
@@ -116,6 +135,7 @@ function createShareTooltipContent(): HTMLElement {
     input.value = window.location.href;
     input.readOnly = true;
     input.setAttribute('aria-label', 'Collaboration URL');
+    collaborationUrlInput = input;
     buttonElement.type = 'button';
 
     row.append(input, buttonElement);
@@ -127,11 +147,12 @@ function createShareTooltipContent(): HTMLElement {
     });
     copyButton.appendTo(buttonElement);
     buttonElement.addEventListener('click', copyUrl);
+    copyButtonElement = buttonElement;
 
     return content;
 }
 
-/** Closes the share tooltip when a pointer action occurs outside it. */
+/** Closes the Share tooltip when a pointer action occurs outside it. */
 function closeTooltipOnOutsideClick(event: MouseEvent): void {
     const target: Node = event.target as Node;
     const tooltipElement: Element | null = document.querySelector(
@@ -145,8 +166,14 @@ function closeTooltipOnOutsideClick(event: MouseEvent): void {
     closeShareTooltip();
 }
 
-/** Closes the share tooltip when the page or a parent element is scrolled. */
-function closeTooltipOnScroll(): void {
+/** Closes the Share tooltip when the page is scrolled. */
+function closeTooltipOnScroll(event: Event): void {
+    const target: EventTarget | null = event.target;
+
+    if (target instanceof Element && target.closest('.e-spreadsheet')) {
+        return;
+    }
+
     closeShareTooltip();
 }
 
@@ -192,32 +219,35 @@ function onActionComplete(args: unknown): void {
 }
 
 onMounted(() => {
-    if (shareButtonRef.value) {
-        shareButton = new Button({
-            content: 'Share',
-            cssClass: 'e-primary share-button'
-        });
-        shareButton.appendTo(shareButtonRef.value);
+    if (!shareButtonRef.value) {
+        return;
     }
 
-    if (tooltipHostRef.value) {
-        shareTooltip = new Tooltip({
-            content: createShareTooltipContent,
-            opensOn: 'Click',
-            position: 'BottomRight',
-            cssClass: 'collaboration-share-tooltip',
-            target: '#share-collaboration-url'
-        });
-        shareTooltip.appendTo(tooltipHostRef.value);
-    }
+    shareButton = new Button({
+        content: 'Share',
+        cssClass: 'e-primary share-button'
+    });
+    shareButton.appendTo(shareButtonRef.value);
+
+    tooltipContent = createShareTooltipContent();
+    shareTooltip = new Tooltip({
+        content: tooltipContent,
+        opensOn: 'Custom',
+        position: 'BottomRight',
+        cssClass: 'collaboration-share-tooltip'
+    });
+    shareTooltip.appendTo(shareButtonRef.value);
 
+    shareButtonRef.value.addEventListener('click', openShareTooltip);
     document.addEventListener('mousedown', closeTooltipOnOutsideClick);
     window.addEventListener('scroll', closeTooltipOnScroll, true);
 });
 
 onBeforeUnmount(() => {
+    shareButtonRef.value?.removeEventListener('click', openShareTooltip);
     document.removeEventListener('mousedown', closeTooltipOnOutsideClick);
     window.removeEventListener('scroll', closeTooltipOnScroll, true);
+    copyButtonElement?.removeEventListener('click', copyUrl);
 
     if (copyResetTimer !== null) {
         window.clearTimeout(copyResetTimer);
@@ -226,6 +256,9 @@ onBeforeUnmount(() => {
     shareTooltip?.destroy();
     shareButton?.destroy();
     copyButton?.destroy();
+    tooltipContent = null;
+    collaborationUrlInput = null;
+    copyButtonElement = null;
     collaborationClient = null;
     adapter = null;
     initialized = false;
@@ -240,7 +273,7 @@ onBeforeUnmount(() => {
                 The link contains a unique session ID that connects all participants
                 to the same workbook.
             </div>
-            <div ref="tooltipHostRef" class="share-tooltip-host">
+            <div class="share-tooltip-host">
                 <button
                     id="share-collaboration-url"
                     ref="shareButtonRef"
@@ -252,6 +285,7 @@ onBeforeUnmount(() => {
             <!-- Enables real-time collaborative editing in the Spreadsheet. -->
             <ejs-spreadsheet
                 ref="spreadsheetRef"
+                width="100%"
                 height="550px"
                 :enableCollaborativeEditing="true"
                 :created="onCreated"
diff --git a/client/vue/src/style.css b/client/vue/src/style.css
index 3808579..9cf0cd7 100644
--- a/client/vue/src/style.css
+++ b/client/vue/src/style.css
@@ -3,8 +3,10 @@
 html,
 body,
 #app {
+    width: 100%;
     height: 100%;
     margin: 0;
+    overflow-x: hidden;
 }
 
 .collaborative-sample,
@@ -14,8 +16,10 @@ body,
 
 .collaborative-sample {
     width: 100%;
+    max-width: 100%;
     margin: 0;
     padding: 0;
+    overflow: hidden;
     color: #242424;
     font-family: "Segoe UI", -apple-system, BlinkMacSystemFont,
         "Helvetica Neue", Arial, sans-serif;
@@ -78,11 +82,17 @@ body,
 
 .spreadsheet-container {
     width: 100%;
+    max-width: 100%;
     margin: 0;
     padding: 0;
     overflow: hidden;
 }
 
+.spreadsheet-container .e-spreadsheet {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
 .collaboration-share-tooltip.e-tooltip-wrap {
     max-width: none;
     font-family: "Segoe UI", -apple-system, BlinkMacSystemFont,