Merge pull request #176 from Syncfusion-Content/hotfix/hotfix-v24.1.41

DOCINFRA-2341_merged_using_automation

Author: SyncfusionBuild

ej2-javascript-toc.html

@@ -774,6 +774,7 @@
 <li><a href="/ej2-javascript/document-editor/fields">Fields</a></li>
 <li><a href="/ej2-javascript/document-editor/form-fields">Form fields</a></li>
 <li><a href="/ej2-javascript/document-editor/clipboard">Clipboard</a></li>
+<li><a href="/ej2-javascript/document-editor/collaborative-editing">Collaborative Editing</a></li>
 <li><a href="/ej2-javascript/document-editor/history">Undo and redo</a></li>
 <li><a href="/ej2-javascript/document-editor/find-and-replace">Find and Replace</a></li>
 <li><a href="/ej2-javascript/document-editor/keyboard-shortcut">Keyboard shortcuts</a></li>
@@ -823,7 +824,8 @@
 </li>
 <li><a href="https://ej2.syncfusion.com/javascript/documentation/api/document-editor/">API Reference</a></li>
 </ul>
-</li><li>
+</li>
+<li>
 DropDown Menu
 <ul>
 <li><a href="/ej2-javascript/drop-down-button/es5-getting-started">Getting Started</a></li>
@@ -1386,6 +1388,7 @@
 <li><a href="/ej2-javascript/listview/nested-list">Nested list</a></li>
 <li><a href="/ej2-javascript/listview/customizing-templates">Customizing templates</a></li>
 <li><a href="/ej2-javascript/listview/virtualization">Virtualization</a></li>
+<li><a href="/ej2-javascript/listview/scrolling">Scrolling</a></li>
 <li><a href="/ej2-javascript/listview/accessibility">Accessibility</a></li>
 <li><a href="/ej2-javascript/listview/style">CSS Structure</a></li>
 <li><a href="/ej2-javascript/listview/ej1-api-migration">EJ1 migration</a></li>

ej2-javascript/accumulation-chart/tool-tip.md

@@ -137,7 +137,7 @@ Any HTML element can be displayed in the tooltip by using the [`template`](../..
 
 ## Fixed tooltip
 
-By default, tooltip track the mouse movement, but you can set a fixed position for the tooltip by using the `location` property.
+By default, tooltip track the mouse movement, but you can set a fixed position for the tooltip by using the [`location`](../../api/accumulation-chart/tooltipSettingsModel/#location) property.
 
 {% if page.publishingplatform == "typescript" %}
 

ej2-javascript/chart/Chart-types/range-step-area.md

@@ -49,7 +49,7 @@ The following properties can be used to customize the `area` series.
 * [fill](../../api/chart/seriesModel/#fill) – Specifies the color of the area series.
 * [opacity](../../api/chart/seriesModel/#opacity) – Specifies the opacity of [fill](../../api/chart/seriesModel/#fill).
 * [dashArray](../../api/chart/seriesModel/#dasharray) – Specifies the dashes of series.
-* `step` – Specifies the position of the step for the series.
+* [step](../../api/chart/seriesModel/#step) – Specifies the position of the step for the series.
 
 {% if page.publishingplatform == "typescript" %}
 

ej2-javascript/chart/Chart-types/stacked-step-area.md

@@ -48,7 +48,7 @@ The following properties can be used to customize the `stacked step area` series
 * [fill](../../api/chart/seriesModel/#fill) – Specifies the color of the area series.
 * [opacity](../../api/chart/seriesModel/#opacity) – Specifies the opacity of [fill](../../api/chart/seriesModel/#fill).
 * [dashArray](../../api/chart/seriesModel/#dasharray) – Specifies the dashes of series.
-* `step` – Specifies the position of the step for the series.
+* [step](../../api/chart/seriesModel/#step) – Specifies the position of the step for the series.
 
 {% if page.publishingplatform == "typescript" %}
 

ej2-javascript/chart/Chart-types/step-area.md

@@ -48,7 +48,7 @@ The following properties can be used to customize the `step area` series.
 * [fill](../../api/chart/seriesModel/#fill) – Specifies the color of the area series.
 * [opacity](../../api/chart/seriesModel/#opacity) – Specifies the opacity of [fill](../../api/chart/seriesModel/#fill).
 * [dashArray](../../api/chart/seriesModel/#dasharray) – Specifies the dashes of series.
-* `step` – Specifies the position of the step for the series.
+* [step](../../api/chart/seriesModel/#step) – Specifies the position of the step for the series.
 
 {% if page.publishingplatform == "typescript" %}
 

ej2-javascript/chart/Chart-types/step-line.md

@@ -49,7 +49,7 @@ The following properties can be used to customize the `step line` series.
 * [opacity](../../api/chart/seriesModel/#opacity) – Specifies the opacity of [fill](../../api/chart/seriesModel/#fill-string).
 * [dashArray](../../api/chart/seriesModel/#dasharray) – Specifies the dashes for series.
 * [width](../../api/chart/seriesModel/#width) – Specifies the width for series.
-* `step` – Specifies the position of the step for the series.
+* [step](../../api/chart/seriesModel/#step) – Specifies the position of the step for the series.
 
 {% if page.publishingplatform == "typescript" %}
 

ej2-javascript/chart/tool-tip.md

@@ -50,7 +50,7 @@ By default, tooltip is not visible. You can enable the tooltip by setting [`enab
 
 ## Fixed tooltip
 
-By default, tooltip track the mouse movement, but you can set a fixed position for the tooltip by using the `location` property.
+By default, tooltip track the mouse movement, but you can set a fixed position for the tooltip by using the [`location`](../../api/chart/tooltipSettings/#location) property.
 
 {% if page.publishingplatform == "typescript" %}
 

ej2-javascript/code-snippet/diagram/getting-started-cs9/index.js

@@ -1,4 +1,7 @@
 
+
+
+
 var nodes = [
     { id: 'Start', offsetY: 50, annotations: [{ content: 'Start' }], shape: { type: 'Flow', shape: 'Terminator' } },
     { id: 'Init', offsetY: 140, annotations: [{ content: 'var i = 0;' }], shape: { type: 'Flow', shape: 'Process' } },
@@ -15,34 +18,16 @@ var connector = [
     {
         id: 'connector4', sourceID: 'Condition', targetID: 'End', annotations: [{ content: 'No' }],
         type: 'Orthogonal',
-        segments: [
-            { type: 'Orthogonal', length: 50, direction: "Right" },
-            { type: 'Orthogonal', length: 300, direction: "Bottom" }
-        ]
+        segments: [{ length: 50, direction: 'Bottom' }]
     },
     { id: 'connector5', sourceID: 'Print', targetID: 'Increment' },
     {
         id: 'connector6', sourceID: 'Increment', targetID: 'Condition',
         type: 'Orthogonal',
-        segments: [
-            { type: 'Orthogonal', length: 50, direction: "Left" },
-            { type: 'Orthogonal', length: 200, direction: "Top" }
-        ]
+        segments: [{ length: 50, direction: 'Bottom' }]
     }
 ];
 
 var diagram = new ej.diagrams.Diagram({
-    width: '100%', height: '600px', nodes: nodes, connectors: connector,
-    getNodeDefaults: function (node) {
-        node.height = 50;
-        node.width = 140;
-        node.offsetX = 300;
-        return node;
-    },
-    getConnectorDefaults: function (obj) {
-        obj.type = "Orthogonal";
-        obj.targetDecorator = { shape: 'Arrow', width: 10, height: 10 };
-        return obj;
-    },
-    created: function () { diagram.fitToPage(); }
+    width: '100%', height: '600px', nodes: nodes, connectors: connector
     }, '#element');

ej2-javascript/code-snippet/diagram/getting-started-cs9/index.ts

@@ -22,7 +22,7 @@ let connector: ConnectorModel[] = [
         id: 'connector4', sourceID: 'Condition', targetID: 'End', annotations: [{ content: 'No' }],
         type: 'Orthogonal',
         segments: [
-            { type: 'Orthogonal', length: 50, direction: "Right" },
+            { type: 'Orthogonal', length: 30, direction: "Right" },
             { type: 'Orthogonal', length: 300, direction: "Bottom" }
         ]
     },
@@ -31,7 +31,7 @@ let connector: ConnectorModel[] = [
         id: 'connector6', sourceID: 'Increment', targetID: 'Condition',
         type: 'Orthogonal',
         segments: [
-            { type: 'Orthogonal', length: 50, direction: "Left" },
+            { type: 'Orthogonal', length: 30, direction: "Left" },
             { type: 'Orthogonal', length: 200, direction: "Top" }
         ]
     }];

ej2-javascript/code-snippet/diagram/umldiagramshapes-cs12/systemjs.config.js

@@ -15,15 +15,9 @@ System.config({
     map: {
         main: "index.ts",
         typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
-<<<<<<<< HEAD:ej2-javascript/code-snippet/chart/user-interaction-cs45/systemjs.config.js
-       "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
-        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
-        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
-========
         "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
         "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
         "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
->>>>>>>> remotes/origin/development:ej2-javascript/code-snippet/diagram/umldiagramshapes-cs12/systemjs.config.js
         "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
         "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
         "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
@@ -34,12 +28,7 @@ System.config({
         "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
         "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
         "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
-<<<<<<<< HEAD:ej2-javascript/code-snippet/chart/user-interaction-cs45/systemjs.config.js
-        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
-        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js"
-========
         "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
->>>>>>>> remotes/origin/development:ej2-javascript/code-snippet/diagram/umldiagramshapes-cs12/systemjs.config.js
     }
 });
 

ej2-javascript/code-snippet/document-editor/collaborative-editing-cs1/index.js

@@ -0,0 +1,10 @@
+// Inject collaborative editing module.
+ej.documenteditor.DocumentEditor.Inject(ej.documenteditor.CollaborativeEditingHandler);
+ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+let container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,  height: '590px',});
+
+container.serviceUrl = 'http://localhost:5000/api/documenteditor/';
+container.appendTo('#container');
+
+// Enable collaborative editing in Document Editor.
+container.documentEditor.enableCollaborativeEditing = true;

ej2-javascript/code-snippet/document-editor/collaborative-editing-cs1/index.ts

@@ -0,0 +1,12 @@
+import { DocumentEditorContainer, DocumentEditor, CollaborativeEditingHandler} from '@syncfusion/ej2-documenteditor';
+
+//Inject collaborative editing module.
+DocumentEditor.Inject(CollaborativeEditingHandler);
+DocumentEditorContainer.Inject(Toolbar);
+let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,  height: '590px',});
+
+container.serviceUrl = 'http://localhost:5000/api/documenteditor/';
+container.appendTo('#container');
+
+//Enable collaborative editing in Document Editor.
+container.documentEditor.enableCollaborativeEditing = true;

ej2-javascript/code-snippet/document-editor/collaborative-editing-cs1/script-1.js

@@ -0,0 +1,45 @@
+let connectionId = "";
+
+var connection = new signalR.HubConnectionBuilder().withUrl(serviceUrl + '/documenteditorhub', {
+    skipNegotiation: true,
+    transport: signalR.HttpTransportType.WebSockets
+}).withAutomaticReconnect().build();
+
+connection.onclose(async () => {
+    if (connection.state === signalR.HubConnectionState.Disconnected) {
+        alert('Connection lost. Please relod the browser to continue.');
+    }
+});
+
+async function start(data) {
+    try {
+        connection.start().then(function () {
+            // Join the collaborative editing session with the specified room name.
+            connection.send('JoinGroup', { roomName: data.roomName, currentUser: data.currentUser });
+            console.log('server connected!!!');
+        });
+    } catch (err) {
+        console.log(err);
+        setTimeout(start, 5000);
+    }
+};
+// Event handler to handle data received
+connection.on('dataReceived', onDataRecived.bind(this));
+
+function onDataRecived(action, data) {
+    if (connections) {
+        if (action == 'connectionId') {
+            connectionId = data;
+        } else if (connectionId != data.connectionId) {
+            if (action == 'action' || action == 'addUser') {
+                // Add user info when new user join the collaborative editing session.
+                titleBar.addUser(data);
+            } else if (action == 'removeUser') {
+                // Remove user info from title bar once user is disconnected.
+                titleBar.removeUser(data);
+            }
+        }
+        // Apply remote changes to current document.
+        connections.applyRemoteAction(action, data);
+    }
+}

ej2-javascript/code-snippet/document-editor/collaborative-editing-cs1/script-1.ts

@@ -0,0 +1,47 @@
+import {HubConnectionBuilder, HttpTransportType, HubConnectionState } from '@microsoft/signalr';
+
+let connectionId: string= "";
+
+var connection = new HubConnectionBuilder().withUrl(serviceUrl + '/documenteditorhub', {
+    skipNegotiation: true,
+    transport: HttpTransportType.WebSockets
+}).withAutomaticReconnect().build();
+
+connection.onclose(async () => {
+    if (connection.state === HubConnectionState.Disconnected) {
+        alert('Connection lost. Please relod the browser to continue.');
+    }
+});
+
+async function start(data: any) {
+    try {
+        connection.start().then(function () {
+            //Join the collaborative editing session with the specified room name.
+            connection.send('JoinGroup', { roomName: data.roomName, currentUser: data.currentUser });
+            console.log('server connected!!!');
+        });
+    } catch (err) {
+        console.log(err);
+        setTimeout(start, 5000);
+    }
+};
+//Event handler to handle data received
+connection.on('dataReceived', onDataRecived.bind(this));
+
+function onDataRecived(action: string, data: any) {
+    if (connections) {
+        if (action == 'connectionId') {
+            connectionId = data;
+        } else if (connectionId != data.connectionId) {
+            if (action == 'action' || action == 'addUser') {
+                //Add user info when new user join the collaborative editing session.
+                titleBar.addUser(data);
+            } else if (action == 'removeUser') {
+                //Remove user info from title bar once user is disconnected.
+                titleBar.removeUser(data);
+            }
+        }
+        //Apply remote changes to current document.
+        connections.applyRemoteAction(action, data);
+    }
+}

ej2-javascript/code-snippet/document-editor/collaborative-editing-cs1/script-2.js

@@ -0,0 +1,12 @@
+function openDocument(responseText, roomName) {
+    let data = JSON.parse(responseText);
+    // Get collaborative editing module.
+    connections = container.documentEditor.collaborativeEditingHandlerModule;
+    // Configure collaborative editing room name in collaborative editing module
+    connections.updateRoomInfo(roomName, data.version, serviceUrl);
+    container.documentEditor.open(data.sfdt);
+    setTimeout(function () {
+        // connect to signalR room with specified name.
+        start({ action: 'connect', roomName: roomName, currentUser: container.currentUser }, null);
+    });
+}

ej2-javascript/code-snippet/document-editor/collaborative-editing-cs1/script-2.ts

@@ -0,0 +1,12 @@
+function openDocument(responseText: string, roomName: string): void {
+    let data = JSON.parse(responseText);
+    //Get collaborative editing module.
+    connections = container.documentEditor.collaborativeEditingHandlerModule;
+    //Configure collaborative editing room name in collaborative editing module
+    connections.updateRoomInfo(roomName, data.version, serviceUrl);
+    container.documentEditor.open(data.sfdt);
+    setTimeout(function () {
+        // connect to signalR room with specified name.
+        start({ action: 'connect', roomName: roomName, currentUser: container.currentUser }, null);
+    });
+}

ej2-javascript/code-snippet/document-editor/collaborative-editing-cs1/script-3.js

@@ -0,0 +1,6 @@
+container.contentChange = function (args) {
+    if (connections) {
+        // Send current changes to server to broadcast it to other users.
+        connections.sendActionToServer(args.operations)
+    }
+}

ej2-javascript/code-snippet/document-editor/collaborative-editing-cs1/script-3.ts

@@ -0,0 +1,6 @@
+container.contentChange = function (args: ContainerContentChangeEventArgs) {
+    if (connections) {
+        //Send current changes to server to broadcast it to other users.
+        connections.sendActionToServer(args.operations)
+    }
+}

ej2-javascript/code-snippet/dropdownlist/virtual-scroll/index.ts

@@ -23,9 +23,9 @@ let DropDownListObject: DropDownList = new DropDownList({
     //set the placeholder to DropDownList input
     placeholder:"Select an Item ",
     //set enableVirtualization property to true
-    enableVirtualization: false,
+    enableVirtualization: true,
     //set allowFiltering property to true
-    allowFiltering: true,
+    allowFiltering: false,
     //set the height of the popup element
     popupHeight: '200px'
 });

ej2-javascript/code-snippet/image-editor/annotation-cs14/bee-eater.png

@@ -0,0 +1,41 @@
+ej.base.enableRipple(true);
+
+var imageEditorObj = new ej.imageeditor.ImageEditor({
+    width: '550px',
+    height: '330px',
+    toolbar: [],
+    fontFamily: { default: 'Arial', items: [{id: 'arial', text: 'Arial'}, {id: 'brush script mt', text: 'Brush Script MT'},
+      {id: 'papyrus', text: 'Papyrus'}, {id: 'times new roman', text: 'Times New Roman'}, {id: 'courier new', text: 'Courier New'}] },
+    created: function () {
+      imageEditorObj.open('bee-eater.png');
+    },
+    fileOpened: function () {
+      let dimension = imageEditorObj.getImageDimension();
+      imageEditorObj.drawText(dimension.x,dimension.y, null, 'Arial');
+    },
+  });
+  imageEditorObj.appendTo('#imageeditor');
+
+  document.getElementById('brushScriptMT').onclick = function() {
+    imageEditorObj.reset();
+    let dimension = imageEditorObj.getImageDimension();
+	  imageEditorObj.drawText(dimension.x,dimension.y, null, 'Brush Script MT');
+  }
+
+  document.getElementById('papyrus').onclick = function() {
+    imageEditorObj.reset();
+    let dimension = imageEditorObj.getImageDimension();
+	  imageEditorObj.drawText(dimension.x,dimension.y, null, 'Papyrus');
+  }
+
+  document.getElementById('timesNewRoman').onclick = function() {
+    imageEditorObj.reset();
+    let dimension = imageEditorObj.getImageDimension();
+	  imageEditorObj.drawText(dimension.x,dimension.y, null, 'Times New Roman');
+  }
+
+  document.getElementById('courierNew').onclick = function() {
+    imageEditorObj.reset();
+    let dimension = imageEditorObj.getImageDimension();
+	  imageEditorObj.drawText(dimension.x,dimension.y, null, 'Courier New');
+  }