diff --git a/ej2-vue/auto-complete/virtual-scroll.md b/ej2-vue/auto-complete/virtual-scroll.md
index f05aaaaa3..7c104ffed 100644
--- a/ej2-vue/auto-complete/virtual-scroll.md
+++ b/ej2-vue/auto-complete/virtual-scroll.md
@@ -37,7 +37,7 @@ In the following example, `text` column from complex data have been mapped to th
 
 ## Binding remote data
 
-The AutoComplete supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well.
+The AutoComplete component supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well.
 
 The following sample displays the OrderId from the `Orders` Data Service.
 
@@ -52,9 +52,26 @@ The following sample displays the OrderId from the `Orders` Data Service.
         
 {% previewsample "page.domainurl/code-snippet/auto-complete/virtual-scroll-remote" %}
 
+## Customizing items count in virtualization 
+
+When the `enableVirtualization` property is enabled, the `take` property provided by the user within the Query parameter at the initial state or during the `actionBegin` event will be considered. Internally, it calculates the items that fit onto the current page (i.e., probably twice the amount of the popup's height). If the user-provided take value is less than the minimum number of items that fit into the popup, the user-provided take value will not be considered.
+
+The following sample shows the example for Customizing items count in virtualization.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/auto-complete/virtual-scroll-remote/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/auto-complete/virtual-scroll-remote/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/auto-complete/virtual-scroll-remote" %}
+
 ## Grouping
 
-The AutoComplete component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [groupBy](../api/auto-complete/#fields) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding virtualization, enhancing performance and responsiveness.
+The AutoComplete supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [groupBy](../api/auto-complete/#fields) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding virtualization, enhancing performance and responsiveness.
 
 The following sample shows the example for Grouping with Virtualization.
 
diff --git a/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/app-composition.vue b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/app-composition.vue
new file mode 100644
index 000000000..8caa1ed66
--- /dev/null
+++ b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/app-composition.vue
@@ -0,0 +1,55 @@
+<template>
+    <div id="app">
+        <div id="wrapper1">
+            <ejs-autocomplete id='autocomplete' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
+                :enableVirtualization='true' :query='query' :actionBegin='actionBegin'
+                popupHeight="200px"></ejs-autocomplete>
+        </div>
+    </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { AutoCompleteComponent as EjsAutocomplete, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
+
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+const itemData = records;
+const fields = { value: 'text' };
+const allowFiltering = true;
+const query = new Query().take(40);
+
+provide('autocomplete', [VirtualScroll]);
+
+const actionBegin = function (e) {
+    e.query = new Query().take(45);
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+
+#wrapper1 {
+    min-width: 250px;
+    float: left;
+    margin-left: 350px;
+}
+
+#wrapper2 {
+    min-width: 250px;
+    float: right;
+    margin-right: 100px;
+}
+</style>
diff --git a/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/app.vue b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/app.vue
new file mode 100644
index 000000000..5a5a33adb
--- /dev/null
+++ b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/app.vue
@@ -0,0 +1,66 @@
+<template>
+    <div id="app">
+        <div id="wrapper1">
+            <ejs-autocomplete id='autocomplete' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
+                :enableVirtualization='true' :query='query' :actionBegin='actionBegin'
+                popupHeight="200px"></ejs-autocomplete>
+        </div>
+    </div>
+</template>
+<script>
+import { AutoCompleteComponent, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
+
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+//Component registeration
+export default {
+    name: "App",
+    components: {
+        "ejs-autocomplete": AutoCompleteComponent
+    },
+    data() {
+        return {
+            itemData: records,
+            fields: { value: 'text' },
+            allowFiltering: true,
+            query: new Query().take(40),
+        }
+    },
+    provide: {
+        autocomplete: [VirtualScroll]
+    },
+    methods: {
+        actionBegin: function (e) {
+            e.query = new Query().take(45);
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+
+#wrapper1 {
+    min-width: 250px;
+    float: left;
+    margin-left: 350px;
+}
+
+#wrapper2 {
+    min-width: 250px;
+    float: right;
+    margin-right: 100px;
+}
+</style>
diff --git a/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.css b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.css
new file mode 100644
index 000000000..5ecb7207e
--- /dev/null
+++ b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.css
@@ -0,0 +1,14 @@
+
+
+
+
+#wrapper1{
+  min-width: 250px;
+    float: left;
+    margin-left: 100px;
+}
+#wrapper2{
+  min-width: 250px;
+    float: right;
+     margin-right: 100px;
+}
diff --git a/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.html b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.js b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.js
new file mode 100644
index 000000000..ecae1b90d
--- /dev/null
+++ b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.js
@@ -0,0 +1,37 @@
+
+import Vue from 'vue';
+import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
+import { DropDownList, VirtulScroll } from '@syncfusion/ej2-dropdowns';
+DropDownList.Inject(VirtulScroll);
+Vue.use(DropDownListPlugin);
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+new Vue({
+	el: '#app',
+	template: `
+<div id="app">
+    <div id="wrapper1">
+      <ejs-dropdownlist id='dropdownlist' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields' :enableVirtualization='true' :allowFiltering='false' popupHeight="200px"></ejs-dropdownlist>
+    </div>
+</div>
+`,
+
+  name: 'app',
+   data () {
+    return {
+      itemData: records,
+      fields: { value: 'id', text: 'text' }
+    }
+  }
+
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/systemjs.config.js b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/systemjs.config.js
new file mode 100644
index 000000000..59e29f29e
--- /dev/null
+++ b/ej2-vue/code-snippet/auto-complete/virtual-scroll-items/systemjs.config.js
@@ -0,0 +1,39 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+        "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+        "@syncfusion/ej2-vue-notifications": "syncfusion:ej2-vue-notifications/dist/ej2-vue-notifications.umd.min.js",
+        "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+        "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/combobox/virtual-scroll-items/app-composition.vue b/ej2-vue/code-snippet/combobox/virtual-scroll-items/app-composition.vue
new file mode 100644
index 000000000..4934b0ed2
--- /dev/null
+++ b/ej2-vue/code-snippet/combobox/virtual-scroll-items/app-composition.vue
@@ -0,0 +1,55 @@
+<template>
+    <div id="app">
+        <div id="wrapper1">
+            <ejs-combobox id='combobox' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
+                :enableVirtualization='true' :query='query' :allowFiltering='false' :actionBegin='actionBegin'
+                popupHeight="200px"></ejs-combobox>
+        </div>
+    </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { ComboBoxComponent as EjsCombobox, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
+
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+const itemData = records;
+const fields = { value: 'id', text: 'text' };
+const allowFiltering = true;
+const query = new Query().take(40);
+
+provide('combobox', [VirtualScroll]);
+
+const actionBegin = function (e) {
+    e.query = new Query().take(45);
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+
+#wrapper1 {
+    min-width: 250px;
+    float: left;
+    margin-left: 350px;
+}
+
+#wrapper2 {
+    min-width: 250px;
+    float: right;
+    margin-right: 100px;
+}
+</style>
diff --git a/ej2-vue/code-snippet/combobox/virtual-scroll-items/app.vue b/ej2-vue/code-snippet/combobox/virtual-scroll-items/app.vue
new file mode 100644
index 000000000..67262aeb3
--- /dev/null
+++ b/ej2-vue/code-snippet/combobox/virtual-scroll-items/app.vue
@@ -0,0 +1,66 @@
+<template>
+    <div id="app">
+        <div id="wrapper1">
+            <ejs-combobox id='combobox' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
+                :enableVirtualization='true' :query='query' :allowFiltering='false' :actionBegin='actionBegin'
+                popupHeight="200px"></ejs-combobox>
+        </div>
+    </div>
+</template>
+<script>
+import { ComboBoxComponent, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
+
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+//Component registeration
+export default {
+    name: "App",
+    components: {
+        "ejs-combobox": ComboBoxComponent
+    },
+    data() {
+        return {
+            itemData: records,
+            fields: { value: 'id', text: 'text' },
+            allowFiltering: true,
+            query: new Query().take(40),
+        }
+    },
+    provide: {
+        combobox: [VirtualScroll]
+    },
+    methods: {
+        actionBegin: function (e) {
+            e.query = new Query().take(45);
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+
+#wrapper1 {
+    min-width: 250px;
+    float: left;
+    margin-left: 350px;
+}
+
+#wrapper2 {
+    min-width: 250px;
+    float: right;
+    margin-right: 100px;
+}
+</style>
diff --git a/ej2-vue/code-snippet/combobox/virtual-scroll-items/index.css b/ej2-vue/code-snippet/combobox/virtual-scroll-items/index.css
new file mode 100644
index 000000000..5ecb7207e
--- /dev/null
+++ b/ej2-vue/code-snippet/combobox/virtual-scroll-items/index.css
@@ -0,0 +1,14 @@
+
+
+
+
+#wrapper1{
+  min-width: 250px;
+    float: left;
+    margin-left: 100px;
+}
+#wrapper2{
+  min-width: 250px;
+    float: right;
+     margin-right: 100px;
+}
diff --git a/ej2-vue/code-snippet/combobox/virtual-scroll-items/index.html b/ej2-vue/code-snippet/combobox/virtual-scroll-items/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/combobox/virtual-scroll-items/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/combobox/virtual-scroll-items/index.js b/ej2-vue/code-snippet/combobox/virtual-scroll-items/index.js
new file mode 100644
index 000000000..ecae1b90d
--- /dev/null
+++ b/ej2-vue/code-snippet/combobox/virtual-scroll-items/index.js
@@ -0,0 +1,37 @@
+
+import Vue from 'vue';
+import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
+import { DropDownList, VirtulScroll } from '@syncfusion/ej2-dropdowns';
+DropDownList.Inject(VirtulScroll);
+Vue.use(DropDownListPlugin);
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+new Vue({
+	el: '#app',
+	template: `
+<div id="app">
+    <div id="wrapper1">
+      <ejs-dropdownlist id='dropdownlist' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields' :enableVirtualization='true' :allowFiltering='false' popupHeight="200px"></ejs-dropdownlist>
+    </div>
+</div>
+`,
+
+  name: 'app',
+   data () {
+    return {
+      itemData: records,
+      fields: { value: 'id', text: 'text' }
+    }
+  }
+
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/combobox/virtual-scroll-items/systemjs.config.js b/ej2-vue/code-snippet/combobox/virtual-scroll-items/systemjs.config.js
new file mode 100644
index 000000000..59e29f29e
--- /dev/null
+++ b/ej2-vue/code-snippet/combobox/virtual-scroll-items/systemjs.config.js
@@ -0,0 +1,39 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+        "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+        "@syncfusion/ej2-vue-notifications": "syncfusion:ej2-vue-notifications/dist/ej2-vue-notifications.umd.min.js",
+        "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+        "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/app-composition.vue b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/app-composition.vue
new file mode 100644
index 000000000..aee72f57c
--- /dev/null
+++ b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/app-composition.vue
@@ -0,0 +1,55 @@
+<template>
+    <div id="app">
+        <div id="wrapper1">
+            <ejs-dropdownlist id='dropdownlist' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
+                :enableVirtualization='true' :query='query' :allowFiltering='false' :actionBegin='actionBegin'
+                popupHeight="200px"></ejs-dropdownlist>
+        </div>
+    </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { DropDownListComponent as EjsDropdownlist, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
+
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+const itemData = records;
+const fields = { value: 'id', text: 'text' };
+const allowFiltering = true;
+const query = new Query().take(40);
+
+provide('dropdownlist', [VirtualScroll]);
+
+const actionBegin = function (e) {
+    e.query = new Query().take(45);
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+
+#wrapper1 {
+    min-width: 250px;
+    float: left;
+    margin-left: 350px;
+}
+
+#wrapper2 {
+    min-width: 250px;
+    float: right;
+    margin-right: 100px;
+}
+</style>
diff --git a/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/app.vue b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/app.vue
new file mode 100644
index 000000000..c3e38fe7b
--- /dev/null
+++ b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/app.vue
@@ -0,0 +1,66 @@
+<template>
+    <div id="app">
+        <div id="wrapper1">
+            <ejs-dropdownlist id='dropdownlist' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
+                :enableVirtualization='true' :query='query' :allowFiltering='false' :actionBegin='actionBegin'
+                popupHeight="200px"></ejs-dropdownlist>
+        </div>
+    </div>
+</template>
+<script>
+import { DropDownListComponent, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
+
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+//Component registeration
+export default {
+    name: "App",
+    components: {
+        "ejs-dropdownlist": DropDownListComponent
+    },
+    data() {
+        return {
+            itemData: records,
+            fields: { value: 'id', text: 'text' },
+            allowFiltering: true,
+            query: new Query().take(40),
+        }
+    },
+    provide: {
+        dropdownlist: [VirtualScroll]
+    },
+    methods: {
+        actionBegin: function (e) {
+            e.query = new Query().take(45);
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+
+#wrapper1 {
+    min-width: 250px;
+    float: left;
+    margin-left: 350px;
+}
+
+#wrapper2 {
+    min-width: 250px;
+    float: right;
+    margin-right: 100px;
+}
+</style>
diff --git a/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/index.css b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/index.css
new file mode 100644
index 000000000..5ecb7207e
--- /dev/null
+++ b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/index.css
@@ -0,0 +1,14 @@
+
+
+
+
+#wrapper1{
+  min-width: 250px;
+    float: left;
+    margin-left: 100px;
+}
+#wrapper2{
+  min-width: 250px;
+    float: right;
+     margin-right: 100px;
+}
diff --git a/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/index.html b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/index.js b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/index.js
new file mode 100644
index 000000000..ecae1b90d
--- /dev/null
+++ b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/index.js
@@ -0,0 +1,37 @@
+
+import Vue from 'vue';
+import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
+import { DropDownList, VirtulScroll } from '@syncfusion/ej2-dropdowns';
+DropDownList.Inject(VirtulScroll);
+Vue.use(DropDownListPlugin);
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+new Vue({
+	el: '#app',
+	template: `
+<div id="app">
+    <div id="wrapper1">
+      <ejs-dropdownlist id='dropdownlist' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields' :enableVirtualization='true' :allowFiltering='false' popupHeight="200px"></ejs-dropdownlist>
+    </div>
+</div>
+`,
+
+  name: 'app',
+   data () {
+    return {
+      itemData: records,
+      fields: { value: 'id', text: 'text' }
+    }
+  }
+
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/systemjs.config.js b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/systemjs.config.js
new file mode 100644
index 000000000..59e29f29e
--- /dev/null
+++ b/ej2-vue/code-snippet/drop-down-list/virtual-scroll-items/systemjs.config.js
@@ -0,0 +1,39 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+        "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+        "@syncfusion/ej2-vue-notifications": "syncfusion:ej2-vue-notifications/dist/ej2-vue-notifications.umd.min.js",
+        "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+        "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/multi-select/virtual-scroll-items/app-composition.vue b/ej2-vue/code-snippet/multi-select/virtual-scroll-items/app-composition.vue
index faeb673f5..58fc5f96c 100644
--- a/ej2-vue/code-snippet/multi-select/virtual-scroll-items/app-composition.vue
+++ b/ej2-vue/code-snippet/multi-select/virtual-scroll-items/app-composition.vue
@@ -26,12 +26,12 @@ dataSource();
 const itemData = records;
 const fields = { value: 'id', text: 'text' };
 const allowFiltering = true;
-const query = new Query().take(20);
+const query = new Query().take(40);
 
 provide('multiselect', [VirtualScroll]);
 
 const actionBegin = function (e) {
-    e.query = new Query().take(25);
+    e.query = new Query().take(45);
 }
 
 </script>
diff --git a/ej2-vue/code-snippet/multi-select/virtual-scroll-items/app.vue b/ej2-vue/code-snippet/multi-select/virtual-scroll-items/app.vue
index 2b687b7f4..074e0e7f4 100644
--- a/ej2-vue/code-snippet/multi-select/virtual-scroll-items/app.vue
+++ b/ej2-vue/code-snippet/multi-select/virtual-scroll-items/app.vue
@@ -33,7 +33,7 @@ export default {
             itemData: records,
             fields: { value: 'id', text: 'text' },
             allowFiltering: true,
-            query: new Query().take(20),
+            query: new Query().take(40),
         }
     },
     provide: {
@@ -41,7 +41,7 @@ export default {
     },
     methods: {
         actionBegin: function (e) {
-            e.query = new Query().take(25);
+            e.query = new Query().take(45);
         }
     }
 }
diff --git a/ej2-vue/code-snippet/multi-select/virtual-scroll-remote/app-composition.vue b/ej2-vue/code-snippet/multi-select/virtual-scroll-remote/app-composition.vue
index b182910d6..b043aea14 100644
--- a/ej2-vue/code-snippet/multi-select/virtual-scroll-remote/app-composition.vue
+++ b/ej2-vue/code-snippet/multi-select/virtual-scroll-remote/app-composition.vue
@@ -9,11 +9,11 @@
 <script setup>
 import { provide } from "vue";
 import { MultiSelectComponent as EjsMultiselect, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
-import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
+import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
 
 let remoteData = new DataManager({
-    url: 'https://services.syncfusion.com/vue/production/api/Orders',
-    adaptor: new WebApiAdaptor,
+    url: 'https://services.syncfusion.com/vue/production/api/VirtualDropdownData',
+    adaptor: new UrlAdaptor,
     crossDomain: true
 });
 
diff --git a/ej2-vue/code-snippet/multi-select/virtual-scroll-remote/app.vue b/ej2-vue/code-snippet/multi-select/virtual-scroll-remote/app.vue
index 367fca9fb..3c8b284a1 100644
--- a/ej2-vue/code-snippet/multi-select/virtual-scroll-remote/app.vue
+++ b/ej2-vue/code-snippet/multi-select/virtual-scroll-remote/app.vue
@@ -8,11 +8,11 @@
 </template>
 <script>
 import { MultiSelectComponent, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
-import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
+import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
 
 let remoteData = new DataManager({
-    url: 'https://services.syncfusion.com/vue/production/api/Orders',
-    adaptor: new WebApiAdaptor,
+    url: 'https://services.syncfusion.com/vue/production/api/VirtualDropdownData',
+    adaptor: new UrlAdaptor,
     crossDomain: true
 });
 
diff --git a/ej2-vue/combo-box/virtual-scroll.md b/ej2-vue/combo-box/virtual-scroll.md
index dfec1802d..4fe3e9590 100644
--- a/ej2-vue/combo-box/virtual-scroll.md
+++ b/ej2-vue/combo-box/virtual-scroll.md
@@ -54,6 +54,23 @@ The following sample displays the OrderId from the `Orders` Data Service.
         
 {% previewsample "page.domainurl/code-snippet/combobox/virtual-scroll-remote" %}
 
+## Customizing items count in virtualization 
+
+When the `enableVirtualization` property is enabled, the `take` property provided by the user within the Query parameter at the initial state or during the `actionBegin` event will be considered. Internally, it calculates the items that fit onto the current page (i.e., probably twice the amount of the popup's height). If the user-provided take value is less than the minimum number of items that fit into the popup, the user-provided take value will not be considered.
+
+The following sample shows the example for Customizing items count in virtualization.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/combobox/virtual-scroll-remote/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/combobox/virtual-scroll-remote/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/combobox/virtual-scroll-remote" %}
+
 ## Grouping
 
 The Combobox component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [groupBy](../api/combo-box/#fields) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding virtualization, enhancing performance and responsiveness.
diff --git a/ej2-vue/drop-down-list/virtual-scroll.md b/ej2-vue/drop-down-list/virtual-scroll.md
index d5dd33e32..97084c58e 100644
--- a/ej2-vue/drop-down-list/virtual-scroll.md
+++ b/ej2-vue/drop-down-list/virtual-scroll.md
@@ -54,6 +54,23 @@ The following sample displays the OrderId from the `Orders` Data Service.
         
 {% previewsample "page.domainurl/code-snippet/drop-down-list/virtual-scroll-remote" %}
 
+## Customizing items count in virtualization 
+
+When the `enableVirtualization` property is enabled, the `take` property provided by the user within the Query parameter at the initial state or during the `actionBegin` event will be considered. Internally, it calculates the items that fit onto the current page (i.e., probably twice the amount of the popup's height). If the user-provided take value is less than the minimum number of items that fit into the popup, the user-provided take value will not be considered.
+
+The following sample shows the example for Customizing items count in virtualization.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/drop-down-list/virtual-scroll-remote/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/drop-down-list/virtual-scroll-remote/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/drop-down-list/virtual-scroll-remote" %}
+
 ## Grouping
 
 The DropDownList component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [groupBy](../api/drop-down-list/#fields) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding on virtualization. 
diff --git a/ej2-vue/multi-select/virtual-scroll.md b/ej2-vue/multi-select/virtual-scroll.md
index 654f02e57..8eafa127c 100644
--- a/ej2-vue/multi-select/virtual-scroll.md
+++ b/ej2-vue/multi-select/virtual-scroll.md
@@ -37,7 +37,7 @@ In the following example, `id` column and `text` column from complex data have b
 
 ## Binding remote data
 
-The MultiSelect supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well.
+The MultiSelect component supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well.
 
 The following sample displays the OrderId from the `Orders` Data Service.
 
@@ -123,7 +123,7 @@ The following sample shows the example for checkbox with Virtualization.
 
 ## Custom value with virtualization
 
-The MultiSelect component supports custom value with Virtualization. When the [`allowCustomValue`](../api/multi-select/#allowcustomvalue) property is enabled, the MultiSelect enables users to include a new option not currently available in the component value. Upon selecting this newly added custom value, the MultiSelect triggers the [`customValueSelection`](../api/multi-select/#customvalueselection) event and also custom value will be added to the end of the complete list.
+The MultiSelect supports custom value with Virtualization. When the [`allowCustomValue`](../api/multi-select/#allowcustomvalue) property is enabled, the MultiSelect enables users to include a new option not currently available in the component value. Upon selecting this newly added custom value, the MultiSelect triggers the [`customValueSelection`](../api/multi-select/#customvalueselection) event and also custom value will be added to the end of the complete list.
 
 The following sample shows the example for custom value with Virtualization.
 
diff --git a/ej2-vue/pdfviewer/getting-started.md b/ej2-vue/pdfviewer/getting-started.md
index cbf143115..1ab2b91e8 100644
--- a/ej2-vue/pdfviewer/getting-started.md
+++ b/ej2-vue/pdfviewer/getting-started.md
@@ -268,16 +268,4 @@ export default {
 
 [View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/Getting%20Started%20-%20Standalone)
 
-> You can refer to our [Vue PDF Viewer](https://www.syncfusion.com/vue-components/vue-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [Vue PDF Viewer example](https://ej2.syncfusion.com/vue/demos/#/material/pdfviewer/default.html) to understand how to explains core features of PDF Viewer.
-
-## Limitation over Server-Backed PDF Viewer to Standalone PDF Viewer control
-
-When comparing a Standalone PDF Viewer to a Server-Backed PDF Viewer control, it's crucial to understand the limitations that the Standalone PDF Viewer may have in comparison. These limitations are important to consider.
-
-### Local File Access
-
-* The Standalone PDF Viewer control does not have the capability to directly access and load local physical files from a user's device. As a result, it is not possible to use a documentPath to load a PDF file directly from a local server within the viewer.
-
-* The Standalone PDF Viewer allows users to export annotations and form fields from the viewer, it's important to be aware that the viewer does not support the direct import of annotations and form fields from a locally specified file path. In other words, you can extract annotations and form fields from the viewer, but you cannot reintroduce them into the viewer from external sources by specifying a file path located on your local device.
-
-N> These limitations are temporary and are expected to be addressed in the near future.
+> You can refer to our [Vue PDF Viewer](https://www.syncfusion.com/vue-components/vue-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [Vue PDF Viewer example](https://ej2.syncfusion.com/vue/demos/#/material/pdfviewer/default.html) to understand how to explains core features of PDF Viewer.
\ No newline at end of file
diff --git a/ej2-vue/pdfviewer/toolbar.md b/ej2-vue/pdfviewer/toolbar.md
index 9b537757b..a0b8a9769 100644
--- a/ej2-vue/pdfviewer/toolbar.md
+++ b/ej2-vue/pdfviewer/toolbar.md
@@ -28,9 +28,9 @@ The following table shows built-in toolbar items and its actions:-
 | AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer.|
 | FormDesignerEditTool | This tool provides options to enable or disable the edit mode of form fields in the PDF Viewer.|
 
-## Show/Hide the default toolbar
+## Show/Hide the built-in toolbar
 
-The PDF Viewer has an option to show or hide the complete default toolbar. You can achieve this by using following two ways.,
+The PDF Viewer has an option to show or hide the complete built-in toolbar. You can achieve this by using following two ways.,
 
 * **Show/Hide toolbar using enableToolbar API as in the following code snippet**
 
@@ -190,9 +190,9 @@ Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serv
 
 {% previewsample "page.domainurl/code-snippet/pdfviewer/toolbar/toolbar-method-cs1" %}
 
-## Show/Hide the default toolbaritem
+## Show/Hide the built-in toolbaritem
 
-The PDF Viewer has an option to show or hide these grouped items in the default toolbar.
+The PDF Viewer has an option to show or hide these grouped items in the built-in toolbar.
 
 * **Show/Hide toolbaritem using toolbarSettings as in the following code snippet.**
 
@@ -712,7 +712,7 @@ N> When customizing toolbar items, you have the flexibility to include either ic
 
 ## Custom Toolbar
 
-The PDF Viewer provides API for user interactions options provided in it's built-in toolbar. Using this we can create our own User Interface for toolbar actions in application level by hiding the default toolbar. The following steps are used to create the custom toolbar for PDF Viewer,
+The PDF Viewer provides API for user interactions options provided in it's built-in toolbar. Using this we can create our own User Interface for toolbar actions in application level by hiding the built-in toolbar. The following steps are used to create the custom toolbar for PDF Viewer,
 
 **Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/vue/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
 
@@ -819,7 +819,7 @@ The PDF Viewer provides API for user interactions options provided in it's built
 
 ```
 
-**Step 4:** Hide the default toolbar of PDF Viewer using below code snippet,
+**Step 4:** Hide the built-in toolbar of PDF Viewer using below code snippet,
 
 
 {% tabs %}
diff --git a/ej2-vue/spreadsheet/accessibility.md b/ej2-vue/spreadsheet/accessibility.md
index 5b9631241..37da9794a 100644
--- a/ej2-vue/spreadsheet/accessibility.md
+++ b/ej2-vue/spreadsheet/accessibility.md
@@ -116,4 +116,4 @@ The accessibility compliance of the Spreadsheet component is shown in the follow
 
 ## See also
 
-* [Accessibility in Syncfusion Vue components](../common/accessibility)
+* [Accessibility in Syncfusion Vue components](https://ej2.syncfusion.com/vue/documentation/common/accessibility)
diff --git a/ej2-vue/spreadsheet/cell-range.md b/ej2-vue/spreadsheet/cell-range.md
index a71c8bb88..c93399215 100644
--- a/ej2-vue/spreadsheet/cell-range.md
+++ b/ej2-vue/spreadsheet/cell-range.md
@@ -94,7 +94,7 @@ You can apply data validation to restrict the type of data or the values that us
 You can apply data validation by using one of the following ways,
 
 * Select the Data tab in the Ribbon toolbar, and then choose the Data Validation item.
-* Use the [`addDataValidation()`](../api/spreadsheet/#adddatavalidation) method programmatically.
+* Use the [`addDataValidation()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#adddatavalidation) method programmatically.
 
 ### Clear Validation
 
@@ -103,7 +103,7 @@ Clear validation feature is used to remove data validations from the specified r
 You can clear data validation rule by one of the following ways,
 
 * Select the Data tab in the Ribbon toolbar, and then choose the Clear Validation item.
-* Use the [`removeDataValidation()`](../api/spreadsheet/#removedatavalidation) method programmatically.
+* Use the [`removeDataValidation()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#removedatavalidation) method programmatically.
 
 ### Highlight Invalid Data
 
@@ -112,7 +112,7 @@ Highlight invalid data feature is used to highlight the previously entered inval
 You can highlight an invalid data by using one of the following ways,
 
 * Select the Data tab in the Ribbon toolbar, and then choose the Highlight Invalid Data item.
-* Use the [`addInvalidHighlight()`](../api/spreadsheet/#addinvalidhighlight) method programmatically.
+* Use the [`addInvalidHighlight()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#addinvalidhighlight) method programmatically.
 
 ### Clear Highlighted Invalid Data
 
@@ -121,7 +121,7 @@ Clear highlight feature is used to remove the highlight from invalid cells.
 You can clear the highlighted invalid data by using the following ways,
 
 * Select the Data tab in the Ribbon toolbar, and then choose the Clear Highlight item.
-* Use the [`removeInvalidHighlight()`](../api/spreadsheet/#removeinvalidhighlight) method programmatically.
+* Use the [`removeInvalidHighlight()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#removeinvalidhighlight) method programmatically.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -152,7 +152,7 @@ Clear feature helps you to clear the cell contents (formulas and data), formats
 You can apply clear feature by using one of the following ways,
 
 * Select the clear icon in the Ribbon toolbar under the Home Tab.
-* Using the [`clear()`](../api/spreadsheet/#clear) method to clear the values.
+* Using the [`clear()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#clear) method to clear the values.
 
 Clear has the following types in the spreadsheet,
 
diff --git a/ej2-vue/spreadsheet/data-binding.md b/ej2-vue/spreadsheet/data-binding.md
index 4b883dffa..0590697c6 100644
--- a/ej2-vue/spreadsheet/data-binding.md
+++ b/ej2-vue/spreadsheet/data-binding.md
@@ -156,5 +156,4 @@ You can refer to our [Vue Spreadsheet](https://www.syncfusion.com/vue-ui-compone
 
 * [Filtering](./filter)
 * [Sorting](./sort)
-* [Hyperlink](./link)
-* [`Collaborative Editing`](use-cases/collaborative-editing)
\ No newline at end of file
+* [Hyperlink](./link)
\ No newline at end of file
diff --git a/ej2-vue/spreadsheet/filter.md b/ej2-vue/spreadsheet/filter.md
index 6484de613..4e01a5c55 100644
--- a/ej2-vue/spreadsheet/filter.md
+++ b/ej2-vue/spreadsheet/filter.md
@@ -22,14 +22,14 @@ In the active sheet, select a range of cells to filter by value of the cell. The
 
 * Select the filter item in the Ribbon toolbar.
 * Right-click the sheet, select the filter item in the context menu.
-* Use the [`applyFilter()`](../api/spreadsheet/#applyfilter) method programmatically.
+* Use the [`applyFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#applyfilter) method programmatically.
 * Use `Ctrl + Shift + L` keyboard shortcut to apply the filter.
 
 > * Use `Alt + Up/Down` keyboard shortcut to open the filter dialog.
 
 ## Filter by criteria
 
-The [`applyFilter()`](../api/spreadsheet/#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments.
+The [`applyFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments.
 
 > * The [`beforeFilter`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforefilter) event will be triggered before filtering the specified range.
 > * The [`filterComplete`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#filtercomplete) event will be triggered after the filter action is completed successfully.
@@ -57,7 +57,7 @@ After applying filter to a certain column, you may want to clear it to make all
 
 * Choose `Clear` option in ribbon toolbar under `Filter and Sort`. It clears the filters applied in the spreadsheet for all fields.
 
-* Use the [`clearFilter()`](../api/spreadsheet/#clearfilter) method programmatically, to clear the applied filters in spreadsheet for all fields.
+* Use the [`clearFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#clearfilter) method programmatically, to clear the applied filters in spreadsheet for all fields.
 
 ## Clear filter on a field
 
@@ -65,7 +65,7 @@ After filtering, you can clear/reset the filter for a field alone. It can be don
 
 * Click filter icon in the column’s header and then choose `Clear Filter` option from the filter dialog.
 * You can right-click on a filtered column cell and choose `Clear Filter from <Column Name>.` option from the context menu.
-* Use the [`clearFilter(field)`](../api/spreadsheet/#clearfilter) method programmatically, to clear the filter in a particular column.
+* Use the [`clearFilter(field)`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#clearfilter) method programmatically, to clear the filter in a particular column.
 
 ## Reapply filter
 
diff --git a/ej2-vue/spreadsheet/formatting.md b/ej2-vue/spreadsheet/formatting.md
index e52fbe418..33e6cd08c 100644
--- a/ej2-vue/spreadsheet/formatting.md
+++ b/ej2-vue/spreadsheet/formatting.md
@@ -143,7 +143,7 @@ Conditional formatting helps you to format a cell or range of cells based on the
 You can apply conditional formatting by using one of the following ways,
 
 * Select the conditional formatting icon in the Ribbon toolbar under the Home Tab.
-* Using the [`conditionalFormat()`](../api/spreadsheet/#conditionalformat) method to define the condition.
+* Using the [`conditionalFormat()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#conditionalformat) method to define the condition.
 * Using the `conditionalFormats` in sheets model.
 
 Conditional formatting has the following types in the spreadsheet,
@@ -209,7 +209,7 @@ In the MAY and JUN columns, we have applied conditional formatting custom format
 You can clear the defined rules by using one of the following ways,
 
 * Using the “Clear Rules” option in the Conditional Formatting button of HOME Tab in the ribbon to clear the rule from selected cells.
-* Using the [`clearConditionalFormat()`](../api/spreadsheet/#clearconditionalformat) method to clear the defined rules.
+* Using the [`clearConditionalFormat()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#clearconditionalformat) method to clear the defined rules.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -241,4 +241,4 @@ You can refer to our [Vue Spreadsheet](https://www.syncfusion.com/vue-ui-compone
 * [Hyperlink](./link)
 * [Sorting](./sort)
 * [Filtering](./filter)
-* [`Ribbon customization`](./ribbon#ribbon-customization)
+* [`Ribbon customization`](./ribbon#ribbon-customization)
\ No newline at end of file
diff --git a/ej2-vue/spreadsheet/global-local.md b/ej2-vue/spreadsheet/global-local.md
index 0320a741e..fa8bd8f62 100644
--- a/ej2-vue/spreadsheet/global-local.md
+++ b/ej2-vue/spreadsheet/global-local.md
@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
 
 ## Localization
 
-The [`Localization`](../common/localization) library allows you to localize the default text content of the Spreadsheet. The Spreadsheet has static text on some features (cell formatting, Merge, Data validation, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the
+The [`Localization`](https://ej2.syncfusion.com/vue/documentation/common/localization) library allows you to localize the default text content of the Spreadsheet. The Spreadsheet has static text on some features (cell formatting, Merge, Data validation, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the
 [`locale`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#locale) value and translation object.
 
 The following list of properties and their values are used in the Spreadsheet.
@@ -378,7 +378,7 @@ IsProtected | is protected
 
 ### Loading translations
 
-To load translation object in an application, use [`load`](../common/internationalization/#load) function of the [`L10n`](../common/internationalization) class.
+To load translation object in an application, use [`load`](https://ej2.syncfusion.com/vue/documentation/common/localization#loading-translations) function of the [`L10n`](https://ej2.syncfusion.com/vue/documentation/common/internationalization) class.
 
 The following example demonstrates the Spreadsheet in `French` culture. In the below sample we have translated the ribbon tab names and Home tab content (clipboard, cell style).
 
@@ -627,4 +627,4 @@ You can refer to our [Vue Spreadsheet](https://www.syncfusion.com/vue-ui-compone
 
 ## See Also
 
-* [Localization](../common/localization)
\ No newline at end of file
+* [Localization](https://ej2.syncfusion.com/vue/documentation/common/localization)
\ No newline at end of file
diff --git a/ej2-vue/spreadsheet/illustrations.md b/ej2-vue/spreadsheet/illustrations.md
index 0720609df..0fdfc2498 100644
--- a/ej2-vue/spreadsheet/illustrations.md
+++ b/ej2-vue/spreadsheet/illustrations.md
@@ -109,9 +109,9 @@ The following types of charts are available in the Spreadsheet.
 You can insert the chart by using one of the following ways,
 
 * Select the chart icon in the Ribbon toolbar under the Insert Tab.
-* Use the [`insertChart()`](../api/spreadsheet/#insertchart) method programmatically.
+* Use the [`insertChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#insertchart) method programmatically.
 
-The available parameter in the [`insertChart()`](../api/spreadsheet/#insertchart) method is,
+The available parameter in the [`insertChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#insertchart) method is,
 
 | Parameter | Type | Description |
 |-----|------|----|
@@ -140,9 +140,9 @@ The available arguments in the `ChartModel` are:
 ### Delete Chart
 
 * If you want to delete the chart, just select the chart, and then press the Delete key.
-* Use the [`deleteChart()`](../api/spreadsheet/#deletechart) method programmatically.
+* Use the [`deleteChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#deletechart) method programmatically.
 
-The available parameter in the [`deleteChart()`](../api/spreadsheet/#deletechart) method is,
+The available parameter in the [`deleteChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#deletechart) method is,
 
 | Parameter | Type | Description |
 |-----|------|----|
@@ -169,7 +169,7 @@ Chart feature allows you to view and insert a chart in a spreadsheet, and you ca
 
 #### Customization of line chart markers
 
-Using the [`actionBegin`](../api/spreadsheet/#actionbegin) event, you can change the shape, size, fill color, and border of the line chart marker. In the following example, you can see the modified marker appearance, such as shape and size, while creating the line chart with UI interaction.
+Using the [`actionBegin`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#actionbegin) event, you can change the shape, size, fill color, and border of the line chart marker. In the following example, you can see the modified marker appearance, such as shape and size, while creating the line chart with UI interaction.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/spreadsheet/link.md b/ej2-vue/spreadsheet/link.md
index 27460aa34..53838e31d 100644
--- a/ej2-vue/spreadsheet/link.md
+++ b/ej2-vue/spreadsheet/link.md
@@ -25,7 +25,7 @@ In the active spreadsheet, click the cell where you want to create a hyperlink.
 * Select the INSERT tab in the Ribbon toolbar and choose the `Link` item.
 * Right-click the cell and then click Hyperlink item in the context menu.
 * Use `Ctrl + K` keyboard shortcut to apply the hyperlink.
-* Use the [`addHyperlink`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#hyperlink) method programmatically.
+* Use the [`addHyperlink`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#addhyperlink) method programmatically.
 
 ## Edit Hyperlink
 
@@ -48,7 +48,7 @@ Performing this operation remove a single hyperlink without losing the display t
 
 In the active spreadsheet, click the cell where you want to remove a hyperlink. remove hyperlink can be done by any of the following ways:
 * Right-click the cell and then click Remove Hyperlink item in the context menu.
-* Use the [`removeHyperlink()`](../api/spreadsheet/#hyperlink) method programmatically.
+* Use the [`removeHyperlink()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#removehyperlink) method programmatically.
 
 ## How to change target attribute
 
diff --git a/ej2-vue/spreadsheet/open-save.md b/ej2-vue/spreadsheet/open-save.md
index a11e6d12f..98f027350 100644
--- a/ej2-vue/spreadsheet/open-save.md
+++ b/ej2-vue/spreadsheet/open-save.md
@@ -76,7 +76,7 @@ You can add your own custom header to the open action in the Spreadsheet. For pr
 
 ### Open excel file into a read-only mode
 
-You can open excel file into a read-only mode by using the [`openComplete`](../api/spreadsheet/#opencomplete) event. In this event, you must protect all the sheets and lock its used range cells by using [`protectSheet`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#protectsheet) and [`lockCells`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#lockcells) methods
+You can open excel file into a read-only mode by using the [`openComplete`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#opencomplete) event. In this event, you must protect all the sheets and lock its used range cells by using [`protectSheet`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#protectsheet) and [`lockCells`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#lockcells) methods
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -108,7 +108,7 @@ The following code example shows how to import an excel document using file uplo
 
 ### Configure JSON deserialization options
 
-Previously, when opening a workbook JSON object into the Spreadsheet using the [openFromJson](../api/spreadsheet/#openfromjson) method, the entire workbook, including all features specified in the JSON object, was processed and loaded into the Spreadsheet. 
+Previously, when opening a workbook JSON object into the Spreadsheet using the [openFromJson](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#openfromjson) method, the entire workbook, including all features specified in the JSON object, was processed and loaded into the Spreadsheet. 
 
 Now, you have the option to selectively ignore some features during the opening of the JSON object by configuring deserialization options and passing them as arguments to the `openFromJson` method. This argument is optional, and if not configured, the entire workbook JSON object will be loaded without ignoring any features.
 
@@ -145,7 +145,7 @@ The following code snippet demonstrates how to configure the deserialization opt
 
 ### Open an excel file from Base64 string data
 
-In the Syncfusion Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](../api/spreadsheet/#open) method in the spreadsheet.
+In the Syncfusion Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#open) method in the spreadsheet.
 
 The following code example shows how to save the spreadsheet data as base64 string.
 
@@ -288,7 +288,7 @@ The possible values are:
 
 ### Configure JSON serialization options
 
-Previously, when saving the Spreadsheet as a workbook JSON object using the [saveAsJson](../api/spreadsheet/#saveasjson) method, the entire workbook with all loaded features were processed and saved as a JSON object. 
+Previously, when saving the Spreadsheet as a workbook JSON object using the [saveAsJson](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#saveasjson) method, the entire workbook with all loaded features were processed and saved as a JSON object. 
 
 Now, you have the option to selectively ignore some features while saving the Spreadsheet as a JSON object by configuring serialization options and passing them as arguments to the `saveAsJson` method. This argument is optional, and if not configured, the entire workbook JSON object will be saved without ignoring any features.
 
@@ -410,6 +410,7 @@ Open and save helper functions are shipped in the Syncfusion.EJ2.Spreadsheet pac
 
 And also refer [this](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save/#server-dependencies) for more information.
 
+
 ## Note
 
 You can refer to our [Vue Spreadsheet](https://www.syncfusion.com/vue-ui-components/vue-spreadsheet) feature tour page for its groundbreaking feature representations. You can also explore our [Vue Spreadsheet example](https://ej2.syncfusion.com/vue/demos/#/material/spreadsheet/default.html) to knows how to present and manipulate data.
diff --git a/ej2-vue/spreadsheet/overview.md b/ej2-vue/spreadsheet/overview.md
index b3c0fd161..56d9cc0b0 100644
--- a/ej2-vue/spreadsheet/overview.md
+++ b/ej2-vue/spreadsheet/overview.md
@@ -27,7 +27,6 @@ The Vue Spreadsheet is an user interactive component to organize and analyze dat
 * [Sorting](sort): Helps you to arrange the data to particular order in a selected range of cells.
 * [Filtering](filter): Helps you to view specific rows in the Spreadsheet by hiding the other rows.
 * [Undo Redo](undo-redo): Provides the option to perform undo redo operations in Spreadsheet.
-* [Collaborative editing](use-cases/collaborative-editing): Provides the option for real time changes across multiple users in the Spreadsheet.
 * [Hyperlink](link): Provides the option to navigate to web link or cell reference within the sheet or to other sheet in Spreadsheet.
 * [Resize](mobile-responsiveness): Allows you to change the row height and column width. Auto fit the rows and columns based on its content.
 * [Wrap text](cell-range#wrap-text): Provides the option to display the large content as multiple lines in a single cell.
@@ -48,7 +47,7 @@ The Vue Spreadsheet is an user interactive component to organize and analyze dat
 * [Password protection](protect-sheet#protect-workbook): Allows you to protect the workbook with a password.
 * [Multi-line editing](editing): Allows you to insert a line break between paragraphs of the text within a cell in a Spreadsheet.
 * [Calculate range selection](selection): Helps you to select a range or multiple ranges when editing a formula in a cell.
-* [Right-to-left (RTL)](right-to-left): Aligns content in the Spreadsheet component from right to left.
+* [Right-to-left (RTL)](global-local#right-to-left-rtl): Aligns content in the Spreadsheet component from right to left.
 * [Templates](template): Templates can be used to create custom user experiences in the Spreadsheet.
 * [Globalization](global-local): Personalize the Spreadsheet component with different languages, as well as culture-specific number, date, and time formatting.
 * [Accessibility](accessibility): Provides with built-in accessibility support which helps to access all the Spreadsheet component features through the keyboard, screen readers, or other assistive technology devices.
diff --git a/ej2-vue/spreadsheet/protect-sheet.md b/ej2-vue/spreadsheet/protect-sheet.md
index 1d2554ec8..fb143fbd2 100644
--- a/ej2-vue/spreadsheet/protect-sheet.md
+++ b/ej2-vue/spreadsheet/protect-sheet.md
@@ -41,7 +41,7 @@ In the active Spreadsheet, the sheet protection can be done by any of the follow
 
 * Select the Protect Sheet item in the Ribbon toolbar under the Data Tab, and then select your desired options.
 * Right-click the sheet tab, select the Protect Sheet item in the context menu, and then select your desired options.
-* Use the [`protectSheet()`](../api/spreadsheet/#protectsheet) method programmatically.
+* Use the [`protectSheet()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#protectsheet) method programmatically.
 
 The following example shows `Protect Sheet` functionality in the Spreadsheet control.
 
@@ -70,11 +70,11 @@ In the active Spreadsheet, the sheet Unprotection can be done by any of the foll
 
 * Select the `Unprotect Sheet` item in the Ribbon toolbar under the Data Tab.
 * Right-click the sheet tab, select the `Unprotect Sheet` item in the context menu.
-* Use the [`unprotectSheet()`](../api/spreadsheet/#unprotectsheet) method programmatically.
+* Use the [`unprotectSheet()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#unprotectsheet) method programmatically.
 
 ## Unlock the particular cells in the protected sheet
 
-In protected spreadsheet, to make some particular cell or range of cells are editable, you can use [`lockCells()`](../api/spreadsheet/#lockcells) method, with the parameter `range` and `isLocked` property as false.
+In protected spreadsheet, to make some particular cell or range of cells are editable, you can use [`lockCells()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#lockcells) method, with the parameter `range` and `isLocked` property as false.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -89,9 +89,9 @@ In protected spreadsheet, to make some particular cell or range of cells are edi
 
 ## Make cells read-only without protecting worksheet
 
-Previously, you could make cells read-only by protecting the entire sheet using the [protectSheet](../api/spreadsheet/#protectsheet) method or through the UI option. Meanwhile, to make a specific range of cells editable within a protected sheet, you needed to use the [lockCells](../api/spreadsheet/#lockcells) method, passing the `range` parameter and setting the `isLocked` property to **false**. 
+Previously, you could make cells read-only by protecting the entire sheet using the [protectSheet](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#protectsheet) method or through the UI option. Meanwhile, to make a specific range of cells editable within a protected sheet, you needed to use the [lockCells](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#lockcells) method, passing the `range` parameter and setting the `isLocked` property to **false**. 
 
-Now, you can make an entire row, an entire column, or a specific range of cells read-only using the [setRangeReadOnly](../api/spreadsheet/#setrangereadonly) method without protecting the entire sheet. This method accepts three parameters, as detailed in the following table:
+Now, you can make an entire row, an entire column, or a specific range of cells read-only using the [setRangeReadOnly](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#setrangereadonly) method without protecting the entire sheet. This method accepts three parameters, as detailed in the following table:
 
 | Parameter | Description |
 |-----|------|
@@ -205,4 +205,4 @@ You can refer to our [Vue Spreadsheet](https://www.syncfusion.com/vue-ui-compone
 
 ## See Also
 
-* [Hyperlink](./link)
+* [Hyperlink](./link)
\ No newline at end of file
diff --git a/ej2-vue/spreadsheet/ribbon.md b/ej2-vue/spreadsheet/ribbon.md
index 73720d093..6dad52175 100644
--- a/ej2-vue/spreadsheet/ribbon.md
+++ b/ej2-vue/spreadsheet/ribbon.md
@@ -48,4 +48,4 @@ You can refer to our [Vue Spreadsheet](https://www.syncfusion.com/vue-ui-compone
 ## See Also
 
 * [Worksheet](./worksheet)
-* [Rows and columns](./rows-and-columns)
+* [Rows and columns](./rows-and-columns)
\ No newline at end of file
diff --git a/ej2-vue/spreadsheet/searching.md b/ej2-vue/spreadsheet/searching.md
index a8c3f6945..c0ab13488 100644
--- a/ej2-vue/spreadsheet/searching.md
+++ b/ej2-vue/spreadsheet/searching.md
@@ -31,7 +31,7 @@ Find can be done by any of the following ways:
    > * `Match case`: To find the matched value with case sensitive.
    > * `Match exact cell contents`: To find the exact matched cell value with entire match cases.
 
-* Using [`find()`](../api/spreadsheet/#find) method to perform find operation.
+* Using [`find()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#find) method to perform find operation.
 
 ## Replace
 
@@ -44,8 +44,8 @@ Replace can be done by any of the following ways:
 * Use `Ctrl + H` key to open the Find and Replace dialog.
 * Use Replace button to change the found value in sheet or workbook.
 * Using Replace All button, all the matched criteria can be replaced with find value based on sheet or workbook.
-* Using [`replace()`](../api/spreadsheet/#replace) method to perform replace operation by passing the argument `args.replaceby` as `replace`.
-* Using [`replace()`](../api/spreadsheet/#replace) method to perform replace all operation by passing the argument `args.replaceby` as `replaceall`.
+* Using [`replace()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#replace) method to perform replace operation by passing the argument `args.replaceby` as `replace`.
+* Using [`replace()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#replace) method to perform replace all operation by passing the argument `args.replaceby` as `replaceall`.
 
 ## Go to
 
@@ -54,7 +54,7 @@ Go to feature is used to navigate to a specific cell address in the sheet or wor
 **User Interface**:
 
 * Use `Ctrl + G` key to open the Go To dialog.
-* Use [`goTo()`](../api/spreadsheet/#goto) method to perform Go To operation.
+* Use [`goTo()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#goto) method to perform Go To operation.
 
     In the following sample, searching can be done by following ways:
 
diff --git a/ej2-vue/spreadsheet/sort.md b/ej2-vue/spreadsheet/sort.md
index af620c70a..9cb0aad50 100644
--- a/ej2-vue/spreadsheet/sort.md
+++ b/ej2-vue/spreadsheet/sort.md
@@ -21,7 +21,7 @@ By default, the `sort` module is injected internally into Spreadsheet to perform
 In the active Spreadsheet, select a range of cells to sort by cell value. The range sort can be done by any of the following ways:
 * Select the sort item in the Ribbon toolbar and choose the ascending or descending item.
 * Right-click the sheet, select the sort item in the context menu and choose the ascending/descending item.
-* Use the [`sort()`](../api/spreadsheet/#sort) method programmatically.
+* Use the [`sort()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#sort) method programmatically.
 
 The cell values can be sorted in the following orders:
 * Ascending
@@ -168,4 +168,4 @@ You can refer to our [Vue Spreadsheet](https://www.syncfusion.com/vue-ui-compone
 
 * [Hyperlink](./link)
 * [Filtering](./filter)
-* [Undo Redo](./undo-redo)
+* [Undo Redo](./undo-redo)
\ No newline at end of file
diff --git a/ej2-vue/spreadsheet/template.md b/ej2-vue/spreadsheet/template.md
index c1050fcc9..e8a5f33d2 100644
--- a/ej2-vue/spreadsheet/template.md
+++ b/ej2-vue/spreadsheet/template.md
@@ -167,4 +167,4 @@ You can refer to our [Vue Spreadsheet](https://www.syncfusion.com/vue-ui-compone
 ## See Also
 
 * [Worksheet](./worksheet)
-* [Rows and columns](./rows-and-columns)
+* [Rows and columns](./rows-and-columns)
\ No newline at end of file
diff --git a/ej2-vue/textbox/groups.md b/ej2-vue/textbox/groups.md
index 7b41757d9..95431a9c5 100644
--- a/ej2-vue/textbox/groups.md
+++ b/ej2-vue/textbox/groups.md
@@ -75,7 +75,7 @@ You can add the clear button to the TextBox by using [showClearButton](https://e
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
 {% include code-snippet/textbox/clear-icon-samples-cs1/app-composition.vue %}
 {% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue) %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
 {% include code-snippet/textbox/clear-icon-samples-cs1/app.vue %}
 {% endhighlight %}
 {% endtabs %}