2023 Volume 2 - 22.*
diff --git a/ej2-vue/Release-notes/26.1.42.md b/ej2-vue/Release-notes/26.1.42.md
new file mode 100644
index 000000000..bca118736
--- /dev/null
+++ b/ej2-vue/Release-notes/26.1.42.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes
+description: Essential Studio for Vue Weekly Release Release Notes
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue Release Notes
+
+{% include release-info.html date="July 16, 2024" version="v26.1.42" %}
+
+{% directory path: _includes/release-notes/v26.1.42 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/dialog-cs5/app-composition.vue b/ej2-vue/code-snippet/document-editor/dialog-cs5/app-composition.vue
index 6e4a87145..4d83cf109 100644
--- a/ej2-vue/code-snippet/document-editor/dialog-cs5/app-composition.vue
+++ b/ej2-vue/code-snippet/document-editor/dialog-cs5/app-composition.vue
@@ -3,7 +3,7 @@
-
@@ -19,7 +19,26 @@ const showHyperlinkDialog = function () {
//Opens hyperlink dialog.
documenteditor.value.showDialog('Hyperlink');
}
+const onRequestNavigate= function (args) {
+ if (args.linkType !== 'Bookmark') {
+ let link = args.navigationLink;
+ if (args.localReference.length > 0) {
+ link += '#' + args.localReference;
+ }
+ window.open(link);
+ args.isHandled = true;
+ }
+}
diff --git a/ej2-vue/code-snippet/document-editor/dialog-cs5/app.vue b/ej2-vue/code-snippet/document-editor/dialog-cs5/app.vue
index 83505e00e..69c3b11c4 100644
--- a/ej2-vue/code-snippet/document-editor/dialog-cs5/app.vue
+++ b/ej2-vue/code-snippet/document-editor/dialog-cs5/app.vue
@@ -4,14 +4,14 @@
+ :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px" v-bind:requestNavigate="onRequestNavigate"
+ style="width: 100%; ">
-
-
-
+ }
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/export-container-cs1/app.vue b/ej2-vue/code-snippet/document-editor/export-container-cs1/app.vue
index 754a1c8bd..3ac913900 100644
--- a/ej2-vue/code-snippet/document-editor/export-container-cs1/app.vue
+++ b/ej2-vue/code-snippet/document-editor/export-container-cs1/app.vue
@@ -1,35 +1,58 @@
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/export-container-cs2/app.vue b/ej2-vue/code-snippet/document-editor/export-container-cs2/app.vue
index 7655a9203..70c1200a7 100644
--- a/ej2-vue/code-snippet/document-editor/export-container-cs2/app.vue
+++ b/ej2-vue/code-snippet/document-editor/export-container-cs2/app.vue
@@ -1,35 +1,58 @@
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/export-container-cs3/app.vue b/ej2-vue/code-snippet/document-editor/export-container-cs3/app.vue
index 01010b17e..061d3cb92 100644
--- a/ej2-vue/code-snippet/document-editor/export-container-cs3/app.vue
+++ b/ej2-vue/code-snippet/document-editor/export-container-cs3/app.vue
@@ -1,35 +1,58 @@
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/export-container-cs4/app.vue b/ej2-vue/code-snippet/document-editor/export-container-cs4/app.vue
index 9953a8804..8816a9d8e 100644
--- a/ej2-vue/code-snippet/document-editor/export-container-cs4/app.vue
+++ b/ej2-vue/code-snippet/document-editor/export-container-cs4/app.vue
@@ -1,35 +1,58 @@
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/link-cs1/app-composition.vue b/ej2-vue/code-snippet/document-editor/link-cs1/app-composition.vue
index 8f8e26bab..870540728 100644
--- a/ej2-vue/code-snippet/document-editor/link-cs1/app-composition.vue
+++ b/ej2-vue/code-snippet/document-editor/link-cs1/app-composition.vue
@@ -1,14 +1,14 @@
-
diff --git a/ej2-vue/code-snippet/document-editor/link-cs3/app.vue b/ej2-vue/code-snippet/document-editor/link-cs3/app.vue
index c4c7a7c0a..14d319ca2 100644
--- a/ej2-vue/code-snippet/document-editor/link-cs3/app.vue
+++ b/ej2-vue/code-snippet/document-editor/link-cs3/app.vue
@@ -4,14 +4,14 @@
-
-
-
+ }
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/ruler-cs1/app-composition.vue b/ej2-vue/code-snippet/document-editor/ruler-cs1/app-composition.vue
index 3cfcd15a0..816b7f8f0 100644
--- a/ej2-vue/code-snippet/document-editor/ruler-cs1/app-composition.vue
+++ b/ej2-vue/code-snippet/document-editor/ruler-cs1/app-composition.vue
@@ -8,7 +8,7 @@
:enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true'
:enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true'
:enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true'
- :enableTableOptionsDialog='true'>
+ :enableTableOptionsDialog='true' :documentEditorSettings='documentEditorSettings'>
@@ -18,8 +18,6 @@ import { DocumentEditorComponent as EjsDocumenteditor, Print, SfdtExport, WordEx
const container = ref(null);
const serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
-const height = '370px';
-const isReadOnly = false;
const documentEditorSettings = { showRuler: true };
provide('DocumentEditor', [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]);
diff --git a/ej2-vue/code-snippet/document-editor/ruler-cs1/app.vue b/ej2-vue/code-snippet/document-editor/ruler-cs1/app.vue
index 2734ebd36..d55f3538d 100644
--- a/ej2-vue/code-snippet/document-editor/ruler-cs1/app.vue
+++ b/ej2-vue/code-snippet/document-editor/ruler-cs1/app.vue
@@ -8,12 +8,12 @@
:enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true'
:enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true'
:enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true'
- :enableTableOptionsDialog='true'>
+ :enableTableOptionsDialog='true' :documentEditorSettings='documentEditorSettings'>
+ }
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/aggregates/default-cs7/app-composition.vue b/ej2-vue/code-snippet/grid/aggregates/default-cs7/app-composition.vue
index dbce2d5ee..3f68fbd1f 100644
--- a/ej2-vue/code-snippet/grid/aggregates/default-cs7/app-composition.vue
+++ b/ej2-vue/code-snippet/grid/aggregates/default-cs7/app-composition.vue
@@ -26,7 +26,11 @@ const grid = ref(null);
const app = createApp();
let selectedRecord = {};
- const numericParams = { params: { change: this.changeFn } };
+const changeFn = function(args){
+ selectedRecord['Freight'] = args.value;
+ grid.value.ej2Instances.aggregateModule.refresh(selectedRecord);
+ }
+ const numericParams = { params: { change: changeFn } };
const toolbarOptions = ['Delete', 'Update', 'Cancel'];
const editSettings = { allowEditing: true, allowDeleting: true, mode: 'Inline' };
const footerSum = function () {
@@ -42,11 +46,7 @@ let selectedRecord = {};
selectedRecord = args.rowData;
};
}
- const changeFn = function(args){
- selectedRecord['Freight'] = args.value;
- let gridObj = grid.value;
- gridObj.aggregateModule.refresh(selectedRecord);
- }
+
provide('grid', [Page, Aggregate, Edit, Toolbar]);
diff --git a/ej2-vue/document-editor/faq/unsupported-file-format.md b/ej2-vue/document-editor/faq/unsupported-file-format.md
new file mode 100644
index 000000000..1455d3e76
--- /dev/null
+++ b/ej2-vue/document-editor/faq/unsupported-file-format.md
@@ -0,0 +1,29 @@
+---
+layout: post
+title: Unsupported file in Vue Document editor component | Syncfusion
+description: Learn here all about Unsupported file in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+control: Unsupported file
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Why Do I Get the Unsupported Warning Message When Opening a Document?
+
+If you receive an "The file format you have selected isn't supported. Please choose valid format." message when opening a document in the Document Editor, it typically indicates that the document format is not supported by the current version of the Document Editor. Here are some common reasons for this warning:
+1. Unsupported File Format: The document you are trying to open might be in a format that the Document Editor does not support. Ensure you are using a supported format, such as SFDT.
+2. Corrupted Document: The document file might be corrupted or improperly formatted. Try opening a different document to see if the issue persists.
+To avoid this warning, always use the recommended document formats and features supported by the Document Editor.
+
+Document Editor supports the following file formats:
+• Word Document (*.docx)
+• Syncfusion Document Text (*.sfdt)
+• Plain Text (*.txt)
+• Word Template (*.dotx)
+• HyperText Markup Language (*.html)
+• Rich Text Format (*.rtf)
+• Word XML Document(*.xml)
+• Word 97-2003 Template (*.dot)
+• Word 97-2003 Document (*.doc)
+
+By using these supported formats, you can ensure compatibility and avoid unsupported warning messages when opening documents in the Document Editor.
\ No newline at end of file
diff --git a/ej2-vue/document-editor/getting-started.md b/ej2-vue/document-editor/getting-started.md
index bf1fbf742..1c2d2bc2c 100644
--- a/ej2-vue/document-editor/getting-started.md
+++ b/ej2-vue/document-editor/getting-started.md
@@ -74,7 +74,7 @@ yarn run serve
When creating a new project, choose the option `Default ([Vue 2] babel, eslint)` from the menu.
-
+
Once the `quickstart` project is set up with default settings, proceed to add Syncfusion components to the project.
@@ -262,3 +262,4 @@ DocumentEditorContainer output will be displayed as follows.
* [How to load the document by default](../document-editor/how-to/open-default-document).
* [How to customize tool bar](../document-editor/how-to/customize-tool-bar).
* [How to resize Document editor component](../document-editor/how-to/resize-document-editor).
+* [How to add a save button to the DocumentEditorContainer component toolbar](../document-editor/how-to/add-save-button-in-toolbar)
\ No newline at end of file
diff --git a/ej2-vue/document-editor/how-to/add-save-button-in-toolbar.md b/ej2-vue/document-editor/how-to/add-save-button-in-toolbar.md
new file mode 100644
index 000000000..f2cf4334a
--- /dev/null
+++ b/ej2-vue/document-editor/how-to/add-save-button-in-toolbar.md
@@ -0,0 +1,103 @@
+---
+layout: post
+title: Add save button in Vue Document editor toolbar | Syncfusion
+description: Learn here to add save button in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+control: Add save button tool bar
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add save button in Vue Document editor toolbar
+
+## To add a save button to the existing toolbar in DocumentEditorContainer
+
+DocumentEditorContainer allows you to add a new button to the existing items in a toolbar using [`CustomToolbarItemModel`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/#toolbaritems) property. Newly added item click action can be defined in [`toolbarclick`](https://ej2.syncfusion.com/vue/documentation/api/toolbar/clickEventArgs/).
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+>Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.
\ No newline at end of file
diff --git a/ej2-vue/document-editor/how-to/auto-save-document.md b/ej2-vue/document-editor/how-to/auto-save-document.md
new file mode 100644
index 000000000..2ed1b1079
--- /dev/null
+++ b/ej2-vue/document-editor/how-to/auto-save-document.md
@@ -0,0 +1,170 @@
+---
+layout: post
+title: Auto save document in Vue Document editor component | Syncfusion
+description: Learn here all about Auto save document in document editor in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+control: Auto save document in document editor
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Auto save document in document editor in Vue Document editor component
+
+In this article, we are going to see how to autosave the document to server. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals.
+
+The following example illustrates how to auto save the document in server.
+
+* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as Docx format to server-side using [`saveAsBlob`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/#saveasblob) method.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+ * In server-side, Receives the stream content from client-side and process it to save the document in Server or Database from the received stream. Add Web API in controller file like below to save the document.
+
+ ```c#
+ [AcceptVerbs("Post")]
+ [HttpPost]
+ [EnableCors("AllowAllOrigins")]
+ [Route("AutoSave")]
+ public string AutoSave()
+ {
+ IFormFile file = HttpContext.Request.Form.Files[0];
+ Stream stream = new MemoryStream();
+ file.CopyTo(stream);
+ //Save the stream to database or server as per the requirement.
+ stream.Close();
+ return "Sucess";
+ }
+ ```
+
+## See Also
+* [Autosave document in DocumentEditor](../../document-editor/how-to/auto-save-document-in-document-editor)
\ No newline at end of file
diff --git a/ej2-vue/document-editor/how-to/customize-tool-bar.md b/ej2-vue/document-editor/how-to/customize-tool-bar.md
index 2123f28bd..a4c84dea9 100644
--- a/ej2-vue/document-editor/how-to/customize-tool-bar.md
+++ b/ej2-vue/document-editor/how-to/customize-tool-bar.md
@@ -40,8 +40,7 @@ const items = [
text: "Disable Image",
id: "Custom"
},
- 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break',
- 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing']
+ 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']
provide('DocumentEditorContainer', [Toolbar]);
@@ -81,8 +80,7 @@ export default {
text: "Disable Image",
id: "Custom"
},
- 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break',
- 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing']
+ 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']
}
},
provide: {
@@ -104,4 +102,4 @@ export default {
{% endhighlight %}
{% endtabs %}
->Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields']`.
\ No newline at end of file
+>Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.
\ No newline at end of file
diff --git a/ej2-vue/document-editor/images/vue2-terminal.png b/ej2-vue/document-editor/images/vue2-terminal.png
new file mode 100644
index 000000000..39beefaa2
Binary files /dev/null and b/ej2-vue/document-editor/images/vue2-terminal.png differ
diff --git a/ej2-vue/pivotview/getting-started.md b/ej2-vue/pivotview/getting-started.md
index f51bf79b3..3de56e3fe 100644
--- a/ej2-vue/pivotview/getting-started.md
+++ b/ej2-vue/pivotview/getting-started.md
@@ -379,7 +379,7 @@ The calculated field feature allows user to insert or add a new calculated field
> If the `CalculatedField` module is not injected, the calculated field popup will not be rendered with the pivot table component. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`values`](https://ej2.syncfusion.com/vue/documentation/api/pivotview/dataSourceSettings/#values) property, as shown in the code below. Additionally, calculated fields can only be added to the value axis.
{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue) %}{% raw %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}{% raw %}
{% include code-snippet/pivot-grid/default-cs93/app-composition.vue %}
diff --git a/ej2-vue/spreadsheet/docker-deployment.md b/ej2-vue/spreadsheet/docker-deployment.md
new file mode 100644
index 000000000..202623bb2
--- /dev/null
+++ b/ej2-vue/spreadsheet/docker-deployment.md
@@ -0,0 +1,154 @@
+---
+layout: post
+title: Docker image deployment in Vue Spreadsheet component | Syncfusion
+description: Learn here all about Docker image deployment in Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Docker deployment
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Docker Image Overview in Vue Spreadsheet component
+
+The [**Syncfusion Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/vue-components/vue-spreadsheet) is a feature-rich control for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, filtering, importing, and exporting Excel documents.
+
+This Docker image is the pre-defined Docker container for Syncfusion's Spreadsheet backend functionalities. This server-side Web API project targets ASP.NET Core 6.0.
+
+You can deploy it quickly to your infrastructure. If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing [Spreadsheet Docker project](https://github.com/SyncfusionExamples/Spreadsheet-Server-Docker).
+
+The Spreadsheet is supported on the [JavaScript](https://www.syncfusion.com/javascript-ui-controls), [Angular](https://www.syncfusion.com/angular-ui-components), [React](https://www.syncfusion.com/react-ui-components), [Vue](https://www.syncfusion.com/vue-ui-components), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls), and [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls) platforms.
+
+## Prerequisites
+
+Have [`Docker`](https://www.docker.com/products/container-runtime#/download) installed in your environment:
+
+* On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows).
+* On macOS, install [`Docker for Mac`](https://docs.docker.com/desktop/install/mac-install/).
+
+## How to deploy the Spreadsheet Docker Image
+
+**Step 1:** Pull the spreadsheet-server image from Docker Hub.
+
+```console
+docker pull syncfusion/spreadsheet-server
+```
+
+**Step 2:** Create the `docker-compose.yml` file with the following code in your file system.
+
+```yaml
+version: '3.4'
+
+services:
+ spreadsheet-server:
+ image: syncfusion/spreadsheet-server:latest
+ environment:
+ # Provide your license key for activation
+ SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
+ ports:
+ - "6002:80"
+```
+
+**Note:** The Spreadsheet is a commercial product. It requires a valid [license key](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) to use in a production environment. Please replace `YOUR_LICENSE_KEY` with the valid license key in the `docker-compose.yml` file.
+
+**Step 3:** In a terminal tab, navigate to the directory where you've placed the `docker-compose.yml` file and execute the following:
+
+```console
+docker-compose up
+```
+
+Now the Spreadsheet server Docker instance runs on localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Spreadsheet Web API open and save service at `http://localhost:6002/api/spreadsheet/open` and `http://localhost:6002/api/spreadsheet/save`.
+
+**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://helpej2.syncfusion.com/vue/documentation/api/spreadsheet/#openurl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://helpej2.syncfusion.com/vue/documentation/api/spreadsheet/#saveurl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet component. For more information on how to get started with the Spreadsheet component, refer to this [`getting started page.`](https://ej2.syncfusion.com/vue/documentation/spreadsheet/getting-started).
+
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## How to configure different cultures using a Docker compose file
+
+By default, the Spreadsheet Docker container is generated in the `en_US` culture. You can configure different cultures using the `LC_ALL`, `LANGUAGE`, and `LANG` environment variables in the `docker-compose.yml` file. These environment variables are replaced in the Docker file to set the specified culture for the Spreadsheet server.
+
+```yaml
+version: '3.4'
+
+services:
+ spreadsheet-server:
+ image: syncfusion/spreadsheet-server:latest
+ environment:
+ # Provide your license key for activation
+ SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
+ # Specify the culture to configure for the Spreadsheet server
+ LC_ALL: de_DE.UTF-8
+ LANGUAGE: de_DE.UTF-8
+ LANG: de_DE.UTF-8
+ ports:
+ - "6002:80"
+```
+
+Please refer to these getting started pages to create a Spreadsheet in [`Javascript`](https://ej2.syncfusion.com/javascript/documentation/spreadsheet/getting-started), [`Angular`](https://ej2.syncfusion.com/angular/documentation/spreadsheet/getting-started), [`React`](https://ej2.syncfusion.com/react/documentation/spreadsheet/getting-started), [`ASP.NET Core`](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/getting-started-core), and [`ASP.NET MVC`](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/getting-started-mvc).
\ No newline at end of file
diff --git a/ej2-vue/spreadsheet/open-save.md b/ej2-vue/spreadsheet/open-save.md
index b8854570f..e83915400 100644
--- a/ej2-vue/spreadsheet/open-save.md
+++ b/ej2-vue/spreadsheet/open-save.md
@@ -414,7 +414,6 @@ The following code example shows how to save the spreadsheet data as base64 stri
{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
-
### To save an Excel file to a server
By default, the Spreadsheet component saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the [saveAsJson](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#saveasjson) method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location.
@@ -499,7 +498,6 @@ Please find below the code to retrieve blob data from the Spreadsheet component
{% previewsample "page.domainurl/code-snippet/spreadsheet/save-as-blobdata-cs1" %}
-
### Supported file formats
The following list of Excel file formats are supported in Spreadsheet:
@@ -577,4 +575,5 @@ You can refer to our [Vue Spreadsheet](https://www.syncfusion.com/vue-ui-compone
* [Filtering](./filter)
* [Sorting](./sort)
-* [Hyperlink](./link)
\ No newline at end of file
+* [Hyperlink](./link)
+* [Docker Image](./docker-deployment)
\ No newline at end of file