+
+
+
diff --git a/ej2-javascript/code-snippet/listview/scrolling-cs1/app.ts b/ej2-javascript/code-snippet/listview/scrolling-cs1/app.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/ej2-javascript/code-snippet/listview/scrolling-cs1/index.css b/ej2-javascript/code-snippet/listview/scrolling-cs1/index.css
new file mode 100644
index 000000000..99b17b892
--- /dev/null
+++ b/ej2-javascript/code-snippet/listview/scrolling-cs1/index.css
@@ -0,0 +1,43 @@
+#container {
+ visibility: hidden;
+}
+
+#loader {
+ color: #008cff;
+ height: 40px;
+ width: 30%;
+ position: absolute;
+ font-family: "Helvetica Neue", "calibiri";
+ font-size: 14px;
+ top: 45%;
+ left: 45%;
+}
+
+#list-container {
+ max-width: 600px;
+ margin: auto;
+}
+
+#listview-def {
+ display: inline-block;
+ border: 1px solid #dcdcdc;
+}
+
+.grid-container {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-gap: 20px;
+ align-items: center;
+}
+
+h3 {
+ margin: 0;
+}
+
+/* Optional: Add styling to headings and divs */
+.grid-container > div {
+ border: 1px solid #ddd;
+ padding: 20px;
+ border-radius: 5px;
+ background-color: #f4f4f4;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/listview/scrolling-cs1/index.js b/ej2-javascript/code-snippet/listview/scrolling-cs1/index.js
new file mode 100644
index 000000000..364a10680
--- /dev/null
+++ b/ej2-javascript/code-snippet/listview/scrolling-cs1/index.js
@@ -0,0 +1,93 @@
+var data = [
+ {
+ text: "Hi Guys, Good morning! \uD83D\uDE0A, I'm very delighted to share with you the news that our team is going to launch a new mobile application",
+ templateHeight: '90px',
+ positionClass: 'right',
+ },
+ {
+ text: "Oh! That's great \uD83D\uDE42",
+ templateHeight: '70px',
+ positionClass: 'left',
+ },
+ {
+ text: 'That is a good news \uD83D\uDE00',
+ templateHeight: '80px',
+ positionClass: 'right',
+ },
+ {
+ text: 'What kind of application we are gonna launch? \uD83E\uDD14',
+ templateHeight: '50px',
+ positionClass: 'left',
+ },
+ {
+ text: 'A kind of "Emergency Broadcast App" like being able to just invite someone to teams without it impacting how many people have official access',
+ templateHeight: '100px',
+ positionClass: 'right',
+ },
+ {
+ text: 'Who will be the client users for our applications? ',
+ templateHeight: '110px',
+ positionClass: 'left',
+ },
+ {
+ text: 'Is currently the only way to invite someone through 0365? Just wondering down the road how organization would want to handle that with freelancers, like being able to just invite someone to teams without it impacting how many people have official access \uD83D\uDE14',
+ positionClass: 'right',
+ },
+ {
+ text: 'Yes, however, that feature of inviting someone from outside your organization is planned - expected closer to GA next year \uD83D\uDC4D',
+ positionClass: 'left',
+ },
+ {
+ text: 'I guess we should switch things over to hear for a while. How long does the trial last? \uD83E\uDD14',
+ positionClass: 'right',
+ },
+ { text: 'I think the trial is 30 days. \uD83D\uDE03', positionClass: 'left' },
+ {
+ text: 'Only 0365 only members of your organization. They said that they are listening to customer feedback and hinted that guest users would be brought in down the road \uD83D\uDE09',
+ positionClass: 'right',
+ },
+ { text: 'Cool thanks! \uD83D\uDC4C', positionClass: 'left' },
+];
+function loadTemplate(data) {
+ var containerClass =
+ data.positionClass === 'right' ? 'justify-content: flex-end' : '';
+ return (
+ '
' +
+ '' +
+ data.text +
+ '' +
+ '
'
+ );
+}
+//Initialize ListView component
+var listObj_1 = new ej.lists.ListView({
+ //Initialize dataSource with the DataManager instance.
+ dataSource: data.slice(0, 5),
+ scroll: onListScrolled,
+ height: 500,
+ width: 400,
+ template: loadTemplate,
+ cssClass: 'e-list-template',
+});
+
+//Render initialized ListView component
+listObj_1.appendTo('#list-scrolling-down');
+var itemsRendered = 5;
+var itemsPerScroll = 5;
+var result = [];
+
+function onListScrolled(args) {
+ if (args.scrollDirection === 'Bottom') {
+ if (args.distanceY < 100) {
+ if (itemsRendered < data.length) {
+ var startIndex = itemsRendered;
+ var endIndex = Math.min(itemsRendered + itemsPerScroll, data.length);
+ result = data.slice(startIndex, endIndex);
+ listObj_1.addItem(result);
+ itemsRendered = endIndex;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/listview/scrolling-cs1/index.ts b/ej2-javascript/code-snippet/listview/scrolling-cs1/index.ts
new file mode 100644
index 000000000..d73bca7fe
--- /dev/null
+++ b/ej2-javascript/code-snippet/listview/scrolling-cs1/index.ts
@@ -0,0 +1,93 @@
+/**
+ * ListView Default Sample
+ */
+
+import { ListView, ScrolledEventArgs } from '../../../src/list-view/index';
+
+var data = [
+ {
+ text: "Hi Guys, Good morning! \uD83D\uDE0A, I'm very delighted to share with you the news that our team is going to launch a new mobile application",
+ positionClass: 'right',
+ },
+ {
+ text: "Oh! That's great \uD83D\uDE42",
+ positionClass: 'left',
+ },
+ {
+ text: 'That is a good news \uD83D\uDE00',
+ positionClass: 'right',
+ },
+ {
+ text: 'What kind of application we are gonna launch? \uD83E\uDD14',
+ positionClass: 'left',
+ },
+ {
+ text: 'A kind of "Emergency Broadcast App" like being able to just invite someone to teams without it impacting how many people have official access',
+ positionClass: 'right',
+ },
+ {
+ text: 'Who will be the client users for our applications? ',
+ positionClass: 'left',
+ },
+ {
+ text: 'Is currently the only way to invite someone through 0365? Just wondering down the road how organization would want to handle that with freelancers, like being able to just invite someone to teams without it impacting how many people have official access \uD83D\uDE14',
+ positionClass: 'right',
+ },
+ {
+ text: 'Yes, however, that feature of inviting someone from outside your organization is planned - expected closer to GA next year \uD83D\uDC4D',
+ positionClass: 'left',
+ },
+ {
+ text: 'I guess we should switch things over to hear for a while. How long does the trial last? \uD83E\uDD14',
+ positionClass: 'right',
+ },
+ { text: 'I think the trial is 30 days. \uD83D\uDE03', positionClass: 'left' },
+ {
+ text: 'Only 0365 only members of your organization. They said that they are listening to customer feedback and hinted that guest users would be brought in down the road \uD83D\uDE09',
+ positionClass: 'right',
+ },
+ { text: 'Cool thanks! \uD83D\uDC4C', positionClass: 'left' },
+];
+function loadTemplate(data) {
+ var containerClass =
+ data.positionClass === 'right' ? 'justify-content: flex-end' : '';
+ return (
+ '
diff --git a/ej2-javascript/code-snippet/stepper/iconWithLabel/systemjs.config.js b/ej2-javascript/code-snippet/stepper/iconWithLabel/systemjs.config.js
index a4c503718..7ce2b6531 100644
--- a/ej2-javascript/code-snippet/stepper/iconWithLabel/systemjs.config.js
+++ b/ej2-javascript/code-snippet/stepper/iconWithLabel/systemjs.config.js
@@ -18,6 +18,11 @@ System.config({
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
}
});
diff --git a/ej2-javascript/document-editor/collaborative-editing.md b/ej2-javascript/document-editor/collaborative-editing.md
new file mode 100644
index 000000000..ae68213d9
--- /dev/null
+++ b/ej2-javascript/document-editor/collaborative-editing.md
@@ -0,0 +1,339 @@
+---
+title: "Collaborative Editing (preview)"
+component: "DocumentEditor"
+description: "Learn how to enable collaborative editing"
+publishingplatform: ##Platform_Name##
+---
+
+# Collaborative Editing (preview)
+
+Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
+
+> Note: Collaborative editing support is currently in preview mode only and is not yet ready for production environments.
+## Prerequisites
+
+Following things are needed to enable collaborative editing in Document Editor
+
+* `SignalR`
+* `Microsoft SQL Server`
+
+## How to enable collaborative editing in client side
+
+### Step 1: Enable collaborative editing in Document Editor
+
+To enable collaborative editing, inject `CollaborativeEditingHandler` and set the property `enableCollaborativeEditing` to true in the Document Editor, like in the code snippet below.
+
+{% if page.publishingplatform == "typescript" %}
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/index.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/index.js %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+## Step 2: Configure SignalR to send and receive changes
+
+To broadcast the changes made and receive changes from remote users, configure SignalR like below.
+
+{% if page.publishingplatform == "typescript" %}
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-1.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-1.js %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+### Step 3: Join SignalR room while opening the document
+
+When opening a document, we need to generate a unique ID for each document. These unique IDs are then used to create rooms using SignalR, which facilitates sending and receiving data from the server.
+
+{% if page.publishingplatform == "typescript" %}
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-2.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-2.js %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+### Step 5: Broadcast current editing changes to remote users
+
+Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the document editor using the `contentChange` event.
+
+{% if page.publishingplatform == "typescript" %}
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-3.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-3.js %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+## How to enable collaborative editing in ASP.NET Core
+
+### Step 1: Configure SignalR in ASP.NET Core
+
+We are using Microsoft SignalR to broadcast the changes. Please add the following configuration to your application's `Program.cs` file.
+
+```csharp
+ using Microsoft.Azure.SignalR;
+ .....
+ builder.Services.AddSignalR();
+ .....
+ .....
+ .....
+ app.MapHub("/documenteditorhub");
+ .....
+ .....
+```
+
+### Step 2: Configure SignalR hub to create room for collaborative editing session
+
+To manage groups for each document, create a folder named "Hub" and add a file named `DocumentEditorHub.cs` inside it. Add the following code to the file to manage SignalR groups using room names.
+
+Join the group by using unique id of the document by using `JoinGroup` method.
+
+```csharp
+static Dictionary userManager = new Dictionary();
+ internal static Dictionary> groupManager = new Dictionary>();
+
+ // Join to the specified room name
+ public async Task JoinGroup(ActionInfo info)
+ {
+ if (!userManager.ContainsKey(Context.ConnectionId))
+ {
+ userManager.Add(Context.ConnectionId, info);
+ }
+ info.ConnectionId = Context.ConnectionId;
+ //Add the current connected use to the specified group
+ await Groups.AddToGroupAsync(Context.ConnectionId, info.RoomName);
+ if (groupManager.ContainsKey(info.RoomName))
+ {
+ await Clients.Caller.SendAsync("dataReceived", "addUser", groupManager[info.RoomName]);
+ }
+ lock (groupManager)
+ {
+ if (groupManager.ContainsKey(info.RoomName))
+ {
+ groupManager[info.RoomName].Add(info);
+ }
+ else
+ {
+ List actions = new List
+ {
+ info
+ };
+ groupManager.Add(info.RoomName, actions);
+ }
+ }
+ // Notify other users in the group about new user joined the collaborative editing session.
+ Clients.GroupExcept(info.RoomName, Context.ConnectionId).SendAsync("dataReceived", "addUser", info);
+ }
+
+```
+
+Handle user disconnection using SignalR.
+
+```csharp
+//Handle disconnection from group.
+ public override Task OnDisconnectedAsync(Exception? e)
+ {
+ string roomName = userManager[Context.ConnectionId].RoomName;
+ if (groupManager.ContainsKey(roomName))
+ {
+ groupManager[roomName].Remove(userManager[Context.ConnectionId]);
+
+ if (groupManager[roomName].Count == 0)
+ {
+ groupManager.Remove(roomName);
+//If all user disconnected from current room. Auto save the change to source document.
+CollaborativeEditingController.UpdateOperationsToSourceDocument(roomName, “<>”, false);
+ }
+ }
+
+ if (userManager.ContainsKey(Context.ConnectionId))
+ {
+ //Notify other user in the group about user exit the collaborative editing session
+ Clients.OthersInGroup(roomName).SendAsync("dataReceived", "removeUser", Context.ConnectionId);
+ Groups.RemoveFromGroupAsync(Context.ConnectionId, roomName);
+ userManager.Remove(Context.ConnectionId);
+ }
+ return base.OnDisconnectedAsync(e);
+ }
+
+```
+
+### Step 3: Configure Microsoft SQL database connection string in application level
+
+Configure the SQL database that stores temporary data for the collaborative editing session. Provide the SQL database connection string in `appsettings.json` file.
+
+```json
+.....
+"ConnectionStrings": {
+ "DocumentEditorDatabase": ""
+}
+.....
+
+```
+
+### Step 4: Configure Web API actions for collaborative editing
+
+#### Import File
+
+* When opening a document, create a database table to store temporary data for the collaborative editing session.
+* If the table already exists, retrieve the records from the table and apply them to the `WordDocument` instance using the `UpdateActions` method before converting it to the SFDT format.
+
+```csharp
+public string ImportFile([FromBody] FileInfo param)
+ {
+ .....
+ .....
+ DocumentContent content = new DocumentContent();
+
+ .....
+ //Get source document from database/file system/blob storage
+ WordDocument document = GetDocumentFromDatabase(param.fileName, param.documentOwner);
+ .....
+ //Get temporary records from database
+ List actions = CreatedTable(param.fileName);
+ if(actions!=null)
+ {
+ //Apply temporary data to the document
+ document.UpdateActions(actions);
+ }
+ string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
+ content.version = 0;
+ content.sfdt = json;
+ return Newtonsoft.Json.JsonConvert.SerializeObject(content);
+ }
+
+```
+
+#### Update editing records to database
+
+Each edit operation made by the user is sent to the server and is pushed to the database. Each operation receives a version number after being inserted into the database.
+After inserting the records to the server, the position of the current editing operation must be transformed against any previous editing operations not yet synced with the client using the `TransformOperation` method.
+After performing the transformation, the current operation is broadcast to all connected users within the group.
+
+```csharp
+public async Task UpdateAction([FromBody] ActionInfo param)
+{
+ try
+ {
+ ActionInfo modifiedAction = AddOperationsToTable(param);
+ //After transformation broadcast changes to all users in the gropu
+ await _hubContext.Clients.Group(param.RoomName).SendAsync("dataReceived", "action", modifiedAction);
+ return modifiedAction;
+ }
+ catch
+ {
+ return null;
+ }
+}
+
+private ActionInfo AddOperationsToTable(ActionInfo action)
+ {
+ int clientVersion = action.Version;
+ string tableName = action.RoomName;
+ …………
+ …………
+ …………
+ …………
+ List actions = GetOperationsQueue(table);
+ foreach (ActionInfo info in actions)
+ {
+ if (!info.IsTransformed)
+ {
+ CollaborativeEditingHandler.TransformOperation(info, actions);
+ }
+ }
+ action = actions[actions.Count - 1];
+ action.Version = updateVersion;
+ //Return the transformed operation to broadcast it to other clients.
+ return action;
+ }
+
+```
+
+#### Add Web API to get previous operation as a backup to get lost operations
+
+On the client side, messages send from server using SignalR may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the database.
+Using the following method, we can retrieve all operations after the last successful client-synced version and return all missing operations to the requesting client.
+
+```csharp
+public async Task UpdateAction([FromBody] ActionInfo param)
+{
+ try
+ {
+ ActionInfo modifiedAction = AddOperationsToTable(param);
+ //After transformation broadcast changes to all users in the gropu
+ await _hubContext.Clients.Group(param.RoomName).SendAsync("dataReceived", "action", modifiedAction);
+ return modifiedAction;
+ }
+ catch
+ {
+ return null;
+ }
+}
+
+private ActionInfo AddOperationsToTable(ActionInfo action)
+ {
+ int clientVersion = action.Version;
+ string tableName = action.RoomName;
+ …………
+ …………
+ …………
+ …………
+ List actions = GetOperationsQueue(table);
+ foreach (ActionInfo info in actions)
+ {
+ if (!info.IsTransformed)
+ {
+ CollaborativeEditingHandler.TransformOperation(info, actions);
+ }
+ }
+ action = actions[actions.Count - 1];
+ action.Version = updateVersion;
+ //Return the transformed operation to broadcast it to other clients.
+ return action;
+ }
+
+```
+
+Full version of the code discussed about can be found in below GitHub location.
+
+GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collabrative-Editing)
diff --git a/ej2-javascript/document-editor/web-services/core.md b/ej2-javascript/document-editor/web-services/core.md
index c7ff990dd..94e177303 100644
--- a/ej2-javascript/document-editor/web-services/core.md
+++ b/ej2-javascript/document-editor/web-services/core.md
@@ -53,9 +53,11 @@ The following example code illustrates how to write a Web API for importing Word
}
```
-### Import document with EMF and WMF images
+### Import document with TIFF, EMF and WMF images
-The web browsers do not support to display metafile images like EMF and WMF. As a fallback approach, you can convert the metafile to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component.
+The web browsers do not support to display metafile images like EMF and WMF and also TIFF format images. As a fallback approach, you can convert the metafile/TIFF format image to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component.
+
+>Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `MetafileStream` property and you can get the `IsMetafile` boolean value to determine whether the image is meta file images(WMF,EMF) or Tiff format images.
The following example code illustrates how to use `MetafileImageParsed` event for creating fallback raster image for metafile present in a Word document.
@@ -86,9 +88,19 @@ The following example code illustrates how to use `MetafileImageParsed` event fo
//Converts Metafile to raster image.
private static void OnMetafileImageParsed(object sender, MetafileImageParsedEventArgs args)
- {
- //You can write your own method definition for converting metafile to raster image using any third-party image converter.
- args.ImageStream = ConvertMetafileToRasterImage(args.MetafileStream);
+ {
+ if (args.IsMetafile)
+ {
+ //MetaFile image conversion(EMF and WMF)
+ //You can write your own method definition for converting metafile to raster image using any third-party image converter.
+ args.ImageStream = ConvertMetafileToRasterImage(args.MetafileStream);
+ }
+ else
+ {
+ //TIFF image conversion
+ //You can write your own method definition for converting TIFF to raster image using any third-party image converter.
+ args.ImageStream = ConvertTiffToRasterImage(args.MetafileStream);
+ }
}
```
@@ -445,4 +457,4 @@ The following example code illustrates how to write a Web API for export.
```
->Note: Please refer the [ASP.NET Core Web API sample](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices/tree/master/ASP.NET%20Core).
\ No newline at end of file
+>Note: Please refer the [ASP.NET Core Web API sample](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices/tree/master/ASP.NET%20Core).
diff --git a/ej2-javascript/document-editor/web-services/java.md b/ej2-javascript/document-editor/web-services/java.md
index 04b685d55..a8471df8a 100644
--- a/ej2-javascript/document-editor/web-services/java.md
+++ b/ej2-javascript/document-editor/web-services/java.md
@@ -129,9 +129,11 @@ The following example code illustrates how to write a Web API for importing Word
}
```
-### Import document with EMF and WMF images
+### Import document with TIFF, EMF and WMF images
-The web browsers do not support to display metafile images like EMF and WMF. As a fallback approach, you can convert the metafile to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component.
+The web browsers do not support to display metafile images like EMF and WMF and also TIFF format images. As a fallback approach, you can convert the metafile/TIFF format image to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component.
+
+>Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `getMetafileStream()` property and you can get the `getIsMetafile()` boolean value to determine whether the image is meta file images(WMF,EMF) or Tiff format images.
The following example code illustrates how to use `MetafileImageParsed` event for creating fallback raster image for metafile present in a Word document.
@@ -191,6 +193,18 @@ import com.syncfusion.ej2.wordprocessor.*;
// You can write your own method definition for converting metafile to raster
// image using any third-party image converter.
args.setImageStream(ConvertMetafileToRasterImage(args.getMetafileStream())) ;
+ if (args.getIsMetafile())
+ {
+ //MetaFile image conversion(EMF and WMF)
+ //You can write your own method definition for converting metafile to raster image using any third-party image converter.
+ args.setImageStream(ConvertMetafileToRasterImage(args.getMetafileStream())) ;
+ }
+ else
+ {
+ //TIFF image conversion
+ //You can write your own method definition for converting TIFF to raster image using any third-party image converter.
+ args.setImageStream(ConvertTiffToRasterImage(args.getMetafileStream())) ;
+ }
}
```
diff --git a/ej2-javascript/image-editor/annotation.md b/ej2-javascript/image-editor/annotation.md
index fea601553..1707e7630 100644
--- a/ej2-javascript/image-editor/annotation.md
+++ b/ej2-javascript/image-editor/annotation.md
@@ -175,6 +175,39 @@ By leveraging the [`shapeChanging`](https://ej2.syncfusion.com/javascript/docume
{% previewsample "page.domainurl/code-snippet/image-editor/annotation-cs9" %}
{% endif %}
+### Add Additional font family
+
+The [`fontFamily`](https://ej2.syncfusion.com/javascript/documentation/api/image-editor/#fontFamily) property in the Image Editor control provides the flexibility to incorporate supplementary font families, expanding your options for text styling and ensuring a broader range of fonts can be utilized within your design or content. The font value will be determined by the 'id' property.
+
+By leveraging the [`fontFamily`](https://ej2.syncfusion.com/javascript/documentation/api/image-editor/#fontFamily) property, you can elevate the scope of customization for text annotations, enriching the user experience within the Image Editor control. This enhancement offers a more personalized and dynamic interaction, empowering users to tailor their text styles for a truly engaging editing experience.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/image-editor/annotation-cs14/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/image-editor/annotation-cs14/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/image-editor/annotation-cs14" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/image-editor/annotation-cs14/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/image-editor/annotation-cs14/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/image-editor/annotation-cs14" %}
+{% endif %}
+
## Freehand drawing
The Freehand Draw annotation tool in the Image Editor control is a versatile feature that allows users to draw and sketch directly on the image using mouse or touch input. This tool provides a flexible and creative way to add freehand drawings or annotations to the image.
diff --git a/ej2-javascript/image-editor/selection-cropping.md b/ej2-javascript/image-editor/selection-cropping.md
index e5a7c38ee..8df878780 100644
--- a/ej2-javascript/image-editor/selection-cropping.md
+++ b/ej2-javascript/image-editor/selection-cropping.md
@@ -11,7 +11,7 @@ domainurl: ##DomainURL##
# Selection cropping in the ##Platform_Name## Image Editor control
-The cropping feature in the Image Editor allows you to select and crop specific regions of an image. It offers different selection options, including custom shapes, squares, circles, and various aspect ratios such as 3:2, 4:3, 5:4, 7:5, and 16:9.
+The cropping feature in the Image Editor allows you to select and crop specific regions of an image. It offers different selection options, including custom shapes, squares, circles, and various aspect ratios such as 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 5:7, 7:5, 9:16, and 16:9.
To perform a selection, you can use the [`select`](https://ej2.syncfusion.com/javascript/documentation/api/image-editor/#select) method, which allows you to define the desired selection area within the image. Once the selection is made, you can then use the [`crop`](https://ej2.syncfusion.com/javascript/documentation/api/image-editor/#crop) method to crop the image based on the selected region. This enables you to extract and focus on specific parts of the image while discarding the rest.
@@ -60,7 +60,7 @@ Here is an example of square selection using the [`select`](https://ej2.syncfusi
## Insert selection based on aspect ratio
-The [`select`](https://ej2.syncfusion.com/javascript/documentation/api/image-editor/#select) method is used to perform the selection with the various aspect ratios such as 3:2, 4:3, 5:4, 7:5, and 16:9. The selection region can also be customized using the SelectAsync method based on the parameters below.
+The [`select`](https://ej2.syncfusion.com/javascript/documentation/api/image-editor/#select) method is used to perform the selection with the various aspect ratios such as 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 5:7, 7:5, 9:16, and 16:9. The selection region can also be customized using the SelectAsync method based on the parameters below.
* type - Specify the type of selection
* startX - Specify the x-coordinate of the selection region’s starting point
diff --git a/ej2-javascript/image-editor/transform.md b/ej2-javascript/image-editor/transform.md
index 5a7e9ab38..3c1943e1a 100644
--- a/ej2-javascript/image-editor/transform.md
+++ b/ej2-javascript/image-editor/transform.md
@@ -85,6 +85,41 @@ In the following example, the [`flip`](https://ej2.syncfusion.com/javascript/doc
{% previewsample "page.domainurl/code-snippet/image-editor/transform-cs2" %}
{% endif %}
+## Straighten an image
+
+The straightening feature in an Image Editor allows users to adjust an image by rotating it clockwise or counter clockwise. The rotating degree value should be within the range of -45 to +45 degrees for accurate straightening. Positive values indicate clockwise rotation, while negative values indicate counter clockwise rotation. The Image Editor control includes a [`straightenImage`](https://ej2.syncfusion.com/documentation/api/image-editor/#straightenImage) method, which allows you to adjust the degree of an image. This method takes one parameter that define how the straightening should be carried out:
+
+* degree: Specifies the amount of rotation for straightening the image. Positive values indicate clockwise rotation, while negative values indicate counterclockwise rotation.
+
+Here is an example of straightening the image using the [`straightenImage`](https://ej2.syncfusion.com/documentation/api/image-editor/#straightenImage) method.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/image-editor/straightening-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/image-editor/straightening-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/image-editor/straightening-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/image-editor/straightening-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/image-editor/straightening-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/image-editor/straightening-cs1" %}
+{% endif %}
+
## Zoom in or out an image
The Image Editor allows to magnify an image using the [`zoom`](https://ej2.syncfusion.com/javascript/documentation/api/image-editor/#zoom) method. This method allows one to zoom in and out of the image and provides a more detailed view of the image's hidden areas. This method takes two parameters to perform zooming.
diff --git a/ej2-javascript/installation-and-upgrade/installation-using-linux-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-linux-installer.md
index 59b6db6d0..a6c27ddf5 100644
--- a/ej2-javascript/installation-and-upgrade/installation-using-linux-installer.md
+++ b/ej2-javascript/installation-and-upgrade/installation-using-linux-installer.md
@@ -1,13 +1,15 @@
---
layout: post
-title: Installing Syncfusion Essential Studio Linux installer - Syncfusion
-description: Learn here about how to install Syncfusion Essential Studio Linux installer after downloading from our Syncfusion website.
-platform: common
-control: Essential Studio
+title: Installation using linux installer in ##Platform_Name## Installation and upgrade control | Syncfusion
+description: Learn here all about Installation using linux installer in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Installation using linux installer
+publishingplatform: ##Platform_Name##
documentation: ug
+domainurl: ##DomainURL##
---
-# Installing Syncfusion Essential Studio Linux installer
+# Installing Syncfusion JavaScript Linux installer
## Overview
@@ -26,9 +28,9 @@ Syncfusion provides the Linux installer for the following Essential Studio produ
## Step-by-Step Installation
-The steps below show how to install Essential Studio Linux installer.
+The steps below show how to install JavaScript Linux installer.
-1. Extract the Syncfusion Essential Studio Linux installer(.zip) file. The files are extracted in your machine.
+1. Extract the Syncfusion JavaScript Linux installer(.zip) file. The files are extracted in your machine.
@@ -43,9 +45,6 @@ The steps below show how to install Essential Studio Linux installer.
4. You can launch the demo source and use the NuGet packages included in the Linux installer.
-5. Run the following command in linux machine to deploy the ASP.NET Core samples
-
- **dotnet restore projectname -s \nuget** in order to restore.
## License key registration in samples
diff --git a/ej2-javascript/listview/scrolling.md b/ej2-javascript/listview/scrolling.md
new file mode 100644
index 000000000..d22f55d25
--- /dev/null
+++ b/ej2-javascript/listview/scrolling.md
@@ -0,0 +1,45 @@
+---
+layout: post
+title: Scrolling of listview in ##Platform_Name## Listview control | Syncfusion
+description: Learn here all about Scrolling of listview in Syncfusion ##Platform_Name## Listview control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Listview Scrolling
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Scrolling in ##Platform_Name## Listview
+
+Scrolling is a technique that allows you to load more items as the user scrolls through a list, providing a seamless and dynamic user experience.
+
+Render the ListView with [dataSource](../../api/list-view/#datasource), and bind the [`scroll`](../../api/list-view/#scroll) event. Within the scroll event, you can access information such as the scroll direction, event name and the distance from the scrollbar to the top and bottom ends through the distanceY parameter.
+
+In the given example, new data is seamlessly added while scrolling. When you scrolls to the bottom and the distance scrolled is less than 100 pixels, it dynamically loads a batch of items into the list as long as there are more items to render.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/listview/scrolling-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/listview/scrolling-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/listview/scrolling-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/listview/scrolling-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/listview/scrolling-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/listview/scrolling-cs1" %}
+{% endif %}
diff --git a/ej2-javascript/pivotview/images/solution-explorer.png b/ej2-javascript/pivotview/images/solution-explorer.png
index dedd2caa9..6348d3613 100644
Binary files a/ej2-javascript/pivotview/images/solution-explorer.png and b/ej2-javascript/pivotview/images/solution-explorer.png differ
diff --git a/ej2-javascript/pivotview/js/pdf-export.md b/ej2-javascript/pivotview/js/pdf-export.md
index 6facdc330..914d6b665 100644
--- a/ej2-javascript/pivotview/js/pdf-export.md
+++ b/ej2-javascript/pivotview/js/pdf-export.md
@@ -58,17 +58,17 @@ When the [`displayOption`](https://ej2.syncfusion.com/javascript/documentation/a
PDF export provides option to customize mapping of pivot table to the exported PDF document.
-### To add header and footer
+### To add header and footer while exporting
-You can customize text, page number, line, page size and changing orientation in header and footer.
+You can customize text, page number, line, page size and changing orientation in header and footer of the exported document.
-#### How to write a text in header/footer
+#### To add a text in header/footer
You can add text either in header or footer of the exported PDF document like in the below code example.
-```ts
+```js
-let pdfExportProperties: PdfExportProperties = {
+var pdfExportProperties = {
header: {
fromTop: 0,
height: 130,
@@ -86,7 +86,7 @@ let pdfExportProperties: PdfExportProperties = {
```
-#### How to draw a line in header/footer
+#### To draw a line in header/footer
You can add line either in header or footer of the exported PDF document like in the below code example.
@@ -97,9 +97,9 @@ Supported line styles:
* dashdotdot
* solid
-```ts
+```js
-let pdfExportProperties: PdfExportProperties = {
+var pdfExportProperties = {
header: {
fromTop: 0,
height: 130,
@@ -126,9 +126,9 @@ Supported page number types:
* UpperRoman - I, II, III,
* Number - 1,2,3.
-```ts
+```js
- let pdfExportProperties: PdfExportProperties = {
+var pdfExportProperties = {
header: {
fromTop: 0,
height: 130,
@@ -159,6 +159,42 @@ The below code illustrates the PDF export customization options.
{% previewsample "page.domainurl/code-snippet/pivot-table/pdf-export-cs4" %}
+#### Add an image in header/footer
+
+You can add image (Base64 string) either in header or footer of the exported PDF document like in the below code example.
+
+```js
+
+var pdfExportProperties = {
+ header: {
+ fromTop: 0,
+ height: 130,
+ contents: [
+ {
+ type: 'Image',
+ src: image,
+ position: { x: 40, y: 10 },
+ size: { height: 100, width: 250 },
+ }
+ ]
+ }
+}
+
+```
+
+The below code illustrates the PDF export customization options.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/pivot-table/pdf-export-cs41/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/pivot-table/pdf-export-cs41/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/pivot-table/pdf-export-cs41" %}
+
### Changing the file name while exporting
The PDF export provides an option to change file name of the document before exporting. In-order to change the file name, define **fileName** property in **pdfExportProperties** object and pass it as a parameter to the [`pdfExport`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview#pdfexport) method.
@@ -305,19 +341,15 @@ The available built-in fonts are,
* Symbol
* ZapfDingbats
-```ts
+```js
-import { PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf-export';
-
- ...
-
- let pdfExportProperties: PdfExportProperties = {
- theme: {
- header: {font: new PdfStandardFont(PdfFontFamily.TimesRoman, 11, PdfFontStyle.Bold) },
- caption: { font: new PdfStandardFont(PdfFontFamily.TimesRoman, 9) },
- record: { font: new PdfStandardFont(PdfFontFamily.TimesRoman, 10) }
- }
- };
+var pdfExportProperties = {
+ theme: {
+ header: { font: new ej.pdfexport.PdfStandardFont(ej.pdfexport.PdfFontFamily.TimesRoman, 11, ej.pdfexport.PdfFontStyle.Bold) },
+ caption: { font: new ej.pdfexport.PdfStandardFont(ej.pdfexport.PdfFontFamily.TimesRoman, 9) },
+ record: { font: new ej.pdfexport.PdfStandardFont(ej.pdfexport.PdfFontFamily.TimesRoman, 10) }
+ }
+};
```
diff --git a/ej2-javascript/pivotview/js/server-side-pivot-engine.md b/ej2-javascript/pivotview/js/server-side-pivot-engine.md
index e5c807ff4..43996b561 100644
--- a/ej2-javascript/pivotview/js/server-side-pivot-engine.md
+++ b/ej2-javascript/pivotview/js/server-side-pivot-engine.md
@@ -13,7 +13,7 @@ domainurl: ##DomainURL##
# Server side pivot engine in ##Platform_Name## Pivotview control
-This section briefs the Syncfusion assembly [`Syncfusion.EJ2.Pivot`](https://www.nuget.org/packages/Syncfusion.EJ2.Pivot/), which is used in a server-side application to perform all Pivot calculations such as aggregation, filtering, sorting, grouping, and so on, and only the information to be displayed in the Pivot Table's viewport is passed to the client-side (browser) via web service (Web API) rather than the entire data source. It reduces network traffic and improves the rendering performance of the Pivot Table, especially when dealing with large amounts of data. It also works best with virtual scrolling enabled and supports all the Pivot Table's existing features.
+This section briefs the Syncfusion assembly [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine), which is used in a server-side application to perform all Pivot calculations such as aggregation, filtering, sorting, grouping, and so on, and only the information to be displayed in the Pivot Table's viewport is passed to the client-side (browser) via web service (Web API) rather than the entire data source. It reduces network traffic and improves the rendering performance of the Pivot Table, especially when dealing with large amounts of data. It also works best with virtual scrolling enabled and supports all the Pivot Table's existing features.
## Quick steps to render the Pivot Table by using the server-side Pivot Engine
@@ -27,7 +27,7 @@ This section briefs the Syncfusion assembly [`Syncfusion.EJ2.Pivot`](https://www
* **DataSource.cs** file under **DataSource** folder – This file has model classes to define the structure of the data sources.
* The sample data source files **sales.csv** and **sales-analysis.json** under **DataSource** folder.
-**3.** Open the **PivotController** application in Visual Studio where the Syncfusion library [`Syncfusion.EJ2.Pivot`](https://www.nuget.org/packages/Syncfusion.EJ2.Pivot/) will be downloaded automatically from the nuget.org site.
+**3.** Open the **PivotController** application in Visual Studio where the Syncfusion library [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine) will be downloaded automatically from the nuget.org site.
diff --git a/ej2-javascript/pivotview/js/virtual-scrolling.md b/ej2-javascript/pivotview/js/virtual-scrolling.md
index 8e3c2bf6d..7ba340d72 100644
--- a/ej2-javascript/pivotview/js/virtual-scrolling.md
+++ b/ej2-javascript/pivotview/js/virtual-scrolling.md
@@ -37,7 +37,8 @@ To use the virtual scrolling feature, inject the `VirtualScroll` module in to th
* Grouping, which takes additional time to splitting the raw items into the provided format.
* Date Formatting, which takes additional time to convert date format.
* Date Formatting with sorting, here additionally full date time format should be framed to perform sorting along with the provided date format which lags the performance.
-* Even if virtual scrolling is enabled, not only is the current view port data retrieved, but also the data for the immediate previous page and the immediate next page. As a result, when the end user scrolls slightly ahead or behind, the next or previous page data is displayed immediately without requiring a refresh.Note: If the pivot table's width and height are large, the loading data count in the current, previous, and next view ports (pages) will also increase, affecting performance.
+* When using OLAP data, subtotals and grandtotals are only displayed when measures are bound at the last position in the [row](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/dataSourceSettings/#rows) or [column](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/dataSourceSettings/#columns) axis. Otherwise, the data from the pivot table will be shown without summary totals.
+* Even if virtual scrolling is enabled, not only is the current view port data retrieved, but also the data for the immediate previous page and the immediate next page. As a result, when the end user scrolls slightly ahead or behind, the next or previous page data is displayed immediately without requiring a refresh. **Note:** If the pivot table's width and height are large, the loading data count in the current, previous, and next view ports (pages) will also increase, affecting performance.
## Data Compression
diff --git a/ej2-javascript/pivotview/ts/pdf-export.md b/ej2-javascript/pivotview/ts/pdf-export.md
index 431da65d3..c2ea40330 100644
--- a/ej2-javascript/pivotview/ts/pdf-export.md
+++ b/ej2-javascript/pivotview/ts/pdf-export.md
@@ -58,11 +58,11 @@ When the [`displayOption`](https://ej2.syncfusion.com/documentation/api/pivotvie
PDF export provides option to customize mapping of pivot table to the exported PDF document.
-### To add header and footer
+### To add header and footer while exporting
-You can customize text, page number, line, page size and changing orientation in header and footer.
+You can customize text, page number, line, page size and changing orientation in header and footer of the exported document.
-#### How to write a text in header/footer
+#### To add a text in header/footer
You can add text either in header or footer of the exported PDF document like in the below code example.
@@ -86,7 +86,7 @@ let pdfExportProperties: PdfExportProperties = {
```
-#### How to draw a line in header/footer
+#### To draw a line in header/footer
You can add line either in header or footer of the exported PDF document like in the below code example.
@@ -159,6 +159,42 @@ The below code illustrates the PDF export customization options.
{% previewsample "page.domainurl/code-snippet/pivot-table/pdf-export-cs27" %}
+#### Add an image in header/footer
+
+You can add image (Base64 string) either in header or footer of the exported PDF document like in the below code example.
+
+```ts
+
+let pdfExportProperties: PdfExportProperties = {
+ header: {
+ fromTop: 0,
+ height: 130,
+ contents: [
+ {
+ type: 'Image',
+ src: image,
+ position: { x: 40, y: 10 },
+ size: { height: 100, width: 250 },
+ }
+ ]
+ }
+}
+
+```
+
+The below code illustrates the PDF export customization options.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/pivot-table/pdf-export-cs41/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/pivot-table/pdf-export-cs41/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/pivot-table/pdf-export-cs41" %}
+
### Changing the file name while exporting
The PDF export provides an option to change file name of the document before exporting. In-order to change the file name, define **fileName** property in **pdfExportProperties** object and pass it as a parameter to the [`pdfExport`](https://ej2.syncfusion.com/documentation/api/pivotview/#pdfexport) method.
diff --git a/ej2-javascript/pivotview/ts/server-side-pivot-engine.md b/ej2-javascript/pivotview/ts/server-side-pivot-engine.md
index 8a7f38c7d..6cc1352ca 100644
--- a/ej2-javascript/pivotview/ts/server-side-pivot-engine.md
+++ b/ej2-javascript/pivotview/ts/server-side-pivot-engine.md
@@ -13,7 +13,7 @@ domainurl: ##DomainURL##
# Server side pivot engine in ##Platform_Name## Pivotview control
-This section briefs the Syncfusion assembly [`Syncfusion.EJ2.Pivot`](https://www.nuget.org/packages/Syncfusion.EJ2.Pivot/), which is used in a server-side application to perform all Pivot calculations such as aggregation, filtering, sorting, grouping, and so on, and only the information to be displayed in the Pivot Table's viewport is passed to the client-side (browser) via web service (Web API) rather than the entire data source. It reduces network traffic and improves the rendering performance of the Pivot Table, especially when dealing with large amounts of data. It also works best with virtual scrolling enabled and supports all the Pivot Table's existing features.
+This section briefs the Syncfusion assembly [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine), which is used in a server-side application to perform all Pivot calculations such as aggregation, filtering, sorting, grouping, and so on, and only the information to be displayed in the Pivot Table's viewport is passed to the client-side (browser) via web service (Web API) rather than the entire data source. It reduces network traffic and improves the rendering performance of the Pivot Table, especially when dealing with large amounts of data. It also works best with virtual scrolling enabled and supports all the Pivot Table's existing features.
## Quick steps to render the Pivot Table by using the server-side Pivot Engine
@@ -27,7 +27,7 @@ This section briefs the Syncfusion assembly [`Syncfusion.EJ2.Pivot`](https://www
* **DataSource.cs** file under **DataSource** folder – This file has model classes to define the structure of the data sources.
* The sample data source files **sales.csv** and **sales-analysis.json** under **DataSource** folder.
-**3.** Open the **PivotController** application in Visual Studio where the Syncfusion library [`Syncfusion.EJ2.Pivot`](https://www.nuget.org/packages/Syncfusion.EJ2.Pivot/) will be downloaded automatically from the nuget.org site.
+**3.** Open the **PivotController** application in Visual Studio where the Syncfusion library [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine) will be downloaded automatically from the nuget.org site.
diff --git a/ej2-javascript/pivotview/ts/virtual-scrolling.md b/ej2-javascript/pivotview/ts/virtual-scrolling.md
index 2cfffdc11..7c5fd7e81 100644
--- a/ej2-javascript/pivotview/ts/virtual-scrolling.md
+++ b/ej2-javascript/pivotview/ts/virtual-scrolling.md
@@ -37,7 +37,8 @@ To use the virtual scrolling feature, inject the `VirtualScroll` module in to th
* Grouping, which takes additional time to splitting the raw items into the provided format.
* Date Formatting, which takes additional time to convert date format.
* Date Formatting with sorting, here additionally full date time format should be framed to perform sorting along with the provided date format which lags the performance.
-* Even if virtual scrolling is enabled, not only is the current view port data retrieved, but also the data for the immediate previous page and the immediate next page. As a result, when the end user scrolls slightly ahead or behind, the next or previous page data is displayed immediately without requiring a refresh.Note: If the pivot table's width and height are large, the loading data count in the current, previous, and next view ports (pages) will also increase, affecting performance.
+* When using OLAP data, subtotals and grandtotals are only displayed when measures are bound at the last position in the [row](https://ej2.syncfusion.com/documentation/api/pivotview/dataSourceSettings/#rows) or [column](https://ej2.syncfusion.com/documentation/api/pivotview/dataSourceSettings/#columns) axis. Otherwise, the data from the pivot table will be shown without summary totals.
+* Even if virtual scrolling is enabled, not only is the current view port data retrieved, but also the data for the immediate previous page and the immediate next page. As a result, when the end user scrolls slightly ahead or behind, the next or previous page data is displayed immediately without requiring a refresh. **Note:** If the pivot table's width and height are large, the loading data count in the current, previous, and next view ports (pages) will also increase, affecting performance.
## Data Compression
diff --git a/ej2-javascript/schedule/appointments.md b/ej2-javascript/schedule/appointments.md
index e1b750cbe..643704039 100644
--- a/ej2-javascript/schedule/appointments.md
+++ b/ej2-javascript/schedule/appointments.md
@@ -739,6 +739,9 @@ There are scenarios where you need to restrict the CRUD action on specific appoi
{% highlight html tabtitle="index.html" %}
{% include code-snippet/schedule/event-cs33/index.html %}
{% endhighlight %}
+{% highlight ts tabtitle="datasource.ts" %}
+{% include code-snippet/schedule/event-cs33/datasource.ts %}
+{% endhighlight %}
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/schedule/event-cs33" %}
diff --git a/ej2-javascript/schedule/timescale.md b/ej2-javascript/schedule/timescale.md
index 8cde38d58..af7ad940f 100644
--- a/ej2-javascript/schedule/timescale.md
+++ b/ej2-javascript/schedule/timescale.md
@@ -17,6 +17,8 @@ The time slots are usually the time cells that are displayed on the Day, Week an
* `interval` – Defines the time duration on which the time axis to be displayed either in 1 hour or 30 minutes interval and so on. It accepts the values in minutes and defaults to 60.
* `slotCount` – Decides the number of slot count to be split for the specified time interval duration. It defaults to 2, thus displaying two slots to represent an hour(each slot depicting 30 minutes duration).
+>Note: The upper limit for rendering slots within a single day, utilizing the **interval** and **slotCount** properties of the **timeScale**, stands at 1000. This constraint aligns with the maximum **colspan** value permissible for the **table** element, also capped at 1000. This particular restriction is relevant exclusively to the `TimelineDay`, `TimelineWeek` and `TimelineWorkWeek` views.
+
## Setting different time slot duration
The `interval` and `slotCount` properties can be used together on the Scheduler to set different time slot duration which is depicted in the following code example. Here, six time slots together represents an hour.
diff --git a/ej2-javascript/spreadsheet/formulas.md b/ej2-javascript/spreadsheet/formulas.md
index 99ad4a044..ef073675c 100644
--- a/ej2-javascript/spreadsheet/formulas.md
+++ b/ej2-javascript/spreadsheet/formulas.md
@@ -240,24 +240,6 @@ If you enter an invalid formula in a cell, an error dialog with an error message
-## Formula Error Dialog
-
-If you enter an invalid formula in a cell, an error dialog with an error message will appear. For instance, a formula with the incorrect number of arguments, a formula without parenthesis, etc.
-
-| Error Message | Reason |
-|-------|---------|
-| We found that you typed a formula with an invalid arguments | Occurs when passing an argument even though it wasn't needed. |
-| We found that you typed a formula with an empty expression | Occurs when passing an empty expression in the argument. |
-| We found that you typed a formula with one or more missing opening or closing parenthesis | Occurs when an open parenthesis or a close parenthesis is missing. |
-| We found that you typed a formula which is improper | Occurs when passing a single reference but a range was needed. |
-| We found that you typed a formula with a wrong number of arguments | Occurs when the required arguments were not passed. |
-| We found that you typed a formula which requires 3 arguments | Occurs when the required 3 arguments were not passed. |
-| We found that you typed a formula with a mismatched quotes | Occurs when passing an argument with mismatched quotes. |
-| We found that you typed a formula with a circular reference | Occurs when passing a formula with circular cell reference. |
-| We found that you typed a formula which is invalid | Except in the cases mentioned above, all other errors will fall into this broad category. |
-
-
-
## See Also
* [Editing](./editing)
diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html
index 48ea292b7..4025456de 100644
--- a/ej2-typescript-toc.html
+++ b/ej2-typescript-toc.html
@@ -778,6 +778,7 @@