+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs1/app.vue b/ej2-vue/code-snippet/grid/edit/edit-cs1/app.vue
new file mode 100644
index 000000000..e91416c24
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs1/app.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs10/app.vue b/ej2-vue/code-snippet/grid/edit/edit-cs10/app.vue
new file mode 100644
index 000000000..2c1748bb9
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs10/app.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs11/app.vue b/ej2-vue/code-snippet/grid/edit/edit-cs11/app.vue
new file mode 100644
index 000000000..4365e0622
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs11/app.vue
@@ -0,0 +1,121 @@
+
+
+
@@ -14,34 +19,11 @@
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, parentsUntil } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
-import { ref, createApp } from 'vue';
-const app = createApp();
+import { ref } from 'vue';
const grid = ref(null);
-const cTemplate = function () {
- return {
- template: app.component('columnTemplate', {
- template: `
-
-
`,
- data: function () {
- return {
- data: {}
- }
- },
- computed: {
- id: function () {
- return this.data.OrderID;
- },
- value: function () {
- return this.data.Freight;
- }
- }
- })
- }
-}
-const created = (args) => {
+const created = () => {
grid.value.ej2Instances.element.addEventListener('keyup', function (e) { // Bind the keyup event for the grid.
- if (e.target.classList.contains('custemp')) { // Based on this condition, you can find whether the target is an input element or not.
+ if (e.target.classList.contains('customtemplate')) { // Based on this condition, you can find whether the target is an input element or not.
var row = parentsUntil(e.target, 'e-row');
var rowIndex = row.rowIndex; // Get the row index.
var uid = row.getAttribute('data-uid');
@@ -53,5 +35,13 @@ const created = (args) => {
}
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/default-cs25/app.vue b/ej2-vue/code-snippet/grid/edit/edit-cs12/app.vue
similarity index 60%
rename from ej2-vue/code-snippet/grid/edit/default-cs25/app.vue
rename to ej2-vue/code-snippet/grid/edit/edit-cs12/app.vue
index 13fc94d45..9f9144c9f 100644
--- a/ej2-vue/code-snippet/grid/edit/default-cs25/app.vue
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs12/app.vue
@@ -5,8 +5,13 @@
-
+
+
+
`,
- data: function() {
- return {
- data: {}
- }
- },
- computed: {
- id: function() {
- return this.data.OrderID;
- },
- value: function() {
- return this.data.Freight;
- }
- }
- })}
- }
};
},
methods: {
- created(args) {
+ created() {
this.$refs.grid.ej2Instances.element.addEventListener('keyup', function (e) { // Bind the keyup event for the grid.
- if (e.target.classList.contains('custemp')) { // Based on this condition, you can find whether the target is an input element or not.
+ if (e.target.classList.contains('customtemplate')) { // Based on this condition, you can find whether the target is an input element or not.
var row = parentsUntil(e.target, 'e-row');
var rowIndex = row.rowIndex; // Get the row index.
var uid = row.getAttribute('data-uid');
diff --git a/ej2-vue/code-snippet/grid/edit/default-cs23/systemjs.config.js b/ej2-vue/code-snippet/grid/edit/edit-cs12/systemjs.config.js
similarity index 97%
rename from ej2-vue/code-snippet/grid/edit/default-cs23/systemjs.config.js
rename to ej2-vue/code-snippet/grid/edit/edit-cs12/systemjs.config.js
index 71d13857e..47b7371ce 100644
--- a/ej2-vue/code-snippet/grid/edit/default-cs23/systemjs.config.js
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs12/systemjs.config.js
@@ -10,7 +10,7 @@ System.config({
}
},
paths: {
- "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/"
},
map: {
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs2/app-composition.vue b/ej2-vue/code-snippet/grid/edit/edit-cs2/app-composition.vue
new file mode 100644
index 000000000..324b980d9
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs2/app-composition.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs2/app.vue b/ej2-vue/code-snippet/grid/edit/edit-cs2/app.vue
new file mode 100644
index 000000000..3ddae3025
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs2/app.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs3/app.vue b/ej2-vue/code-snippet/grid/edit/edit-cs3/app.vue
new file mode 100644
index 000000000..bae4c5ce4
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs3/app.vue
@@ -0,0 +1,77 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs4/app.vue b/ej2-vue/code-snippet/grid/edit/edit-cs4/app.vue
new file mode 100644
index 000000000..527cfc354
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs4/app.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs5/app.vue b/ej2-vue/code-snippet/grid/edit/edit-cs5/app.vue
new file mode 100644
index 000000000..de39717d2
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs5/app.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs6/app.vue b/ej2-vue/code-snippet/grid/edit/edit-cs6/app.vue
new file mode 100644
index 000000000..ffa8763b5
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs6/app.vue
@@ -0,0 +1,57 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs8/app.vue b/ej2-vue/code-snippet/grid/edit/edit-cs8/app.vue
new file mode 100644
index 000000000..af83308b9
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs8/app.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs8/datasource.js b/ej2-vue/code-snippet/grid/edit/edit-cs8/datasource.js
new file mode 100644
index 000000000..e81ecbdbb
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs8/datasource.js
@@ -0,0 +1,262 @@
+define(["require", "exports"], function (require, exports) {
+ "use strict";
+ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.complexData = [{
+ 'EmployeeID': 1,
+ 'Name': {
+ 'LastName': 'Davolio',
+ 'FirstName': 'Nancy'
+ },
+ 'Names': [{
+ 'LastName': 'Davolio',
+ 'FirstName': 'Nancy'
+ }],
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-664743600000),
+ 'HireDate': new Date(704692800000),
+ 'Address': '507 - 20th Ave. E.\r\nApt. 2A',
+ 'City': 'Seattle',
+ 'Region': 'WA',
+ 'PostalCode': '98122',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-9857',
+ 'Extension': '5467',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
+ \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+ },
+ {
+ 'EmployeeID': 2,
+ 'Name': {
+ 'LastName': 'Fuller',
+ 'FirstName': 'Andrew'
+ },
+ 'Names': [{
+ 'LastName': 'Fuller',
+ 'FirstName': 'Andrew'
+ }],
+ 'Title': 'Vice President, Sales',
+ 'TitleOfCourtesy': 'Dr.',
+ 'BirthDate': new Date(-563828400000),
+ 'HireDate': new Date(713764800000),
+ 'Address': '908 W. Capital Way',
+ 'City': 'Tacoma',
+ 'Region': 'WA',
+ 'PostalCode': '98401',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-9482',
+ 'Extension': '3457',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
+ Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
+ was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
+ Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
+ 'ReportsTo': 0,
+ 'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
+ },
+ {
+ 'EmployeeID': 3,
+ 'Name': {
+ 'LastName': 'Leverling',
+ 'FirstName': 'Janet'
+ },
+ 'Names': [{
+ 'LastName': 'Leverling',
+ 'FirstName': 'Janet'
+ }],
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-200088000000),
+ 'HireDate': new Date(702104400000),
+ 'Address': '722 Moss Bay Blvd.',
+ 'City': 'Kirkland',
+ 'Region': 'WA',
+ 'PostalCode': '98033',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-3412',
+ 'Extension': '3355',
+ 'Photo': { 'Length': 21722 },
+
+ 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
+ She has also completed a certificate program in food retailing management.\
+ Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
+ },
+ {
+ 'EmployeeID': 4,
+ 'Name': {
+ 'LastName': 'Peacock',
+ 'FirstName': 'Margaret'
+ },
+ 'Names': [{
+ 'LastName': 'Peacock',
+ 'FirstName': 'Margaret'
+ }],
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mrs.',
+ 'BirthDate': new Date(-1018814400000),
+ 'HireDate': new Date(736401600000),
+ 'Address': '4110 Old Redmond Rd.',
+ 'City': 'Redmond',
+ 'Region': 'WA',
+ 'PostalCode': '98052',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-8122',
+ 'Extension': '5176',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
+ Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
+ },
+ {
+ 'EmployeeID': 5,
+ 'Name': {
+ 'LastName': 'Buchanan',
+ 'FirstName': 'Steven'
+ },
+ 'Names': [{
+ 'LastName': 'Buchanan',
+ 'FirstName': 'Steven'
+ }],
+ 'Title': 'Sales Manager',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-468010800000),
+ 'HireDate': new Date(750830400000),
+ 'Address': '14 Garrett Hill',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'SW1 8JR',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-4848',
+ 'Extension': '3453',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
+ a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
+ post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
+ Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
+ },
+ {
+ 'EmployeeID': 6,
+ 'Name': {
+ 'LastName': 'Suyama',
+ 'FirstName': 'Michael'
+ },
+ 'Names': [{
+ 'LastName': 'Leverling',
+ 'FirstName': 'Janet'
+ }],
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-205185600000),
+ 'HireDate': new Date(750830400000),
+ 'Address': 'Coventry House\r\nMiner Rd.',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'EC2 7JR',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-7773',
+ 'Extension': '428',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
+ (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
+ He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+ },
+ {
+ 'EmployeeID': 7,
+ 'Name': {
+ 'LastName': 'King',
+ 'FirstName': 'Robert'
+ },
+ 'Names': [{
+ 'LastName': 'Peacock',
+ 'FirstName': 'Margaret'
+ }],
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Mr.',
+ 'BirthDate': new Date(-302731200000),
+ 'HireDate': new Date(757486800000),
+ 'Address': 'Edgeham Hollow\r\nWinchester Way',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'RG1 9SP',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-5598',
+ 'Extension': '465',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
+ University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
+ he was transferred to the London office in March 1993.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+ },
+ {
+ 'EmployeeID': 8,
+ 'Name': {
+ 'LastName': 'Callahan',
+ 'FirstName': 'Laura'
+ },
+ 'Names': [{
+ 'LastName': 'Fuller',
+ 'FirstName': 'Andrew'
+ }],
+ 'Title': 'Inside Sales Coordinator',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-377982000000),
+ 'HireDate': new Date(762843600000),
+ 'Address': '4726 - 11th Ave. N.E.',
+ 'City': 'Seattle',
+ 'Region': 'WA',
+ 'PostalCode': '98105',
+ 'Country': 'USA',
+ 'HomePhone': '(206) 555-1189',
+ 'Extension': '2344',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
+ French. She reads and writes French.',
+ 'ReportsTo': 2,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+ },
+ {
+ 'EmployeeID': 9,
+ 'Name': {
+ 'LastName': 'Dodsworth',
+ 'FirstName': 'Anne'
+ },
+ 'Names': [{
+ 'LastName': 'Fuller',
+ 'FirstName': 'Andrew'
+ }],
+ 'Title': 'Sales Representative',
+ 'TitleOfCourtesy': 'Ms.',
+ 'BirthDate': new Date(-123966000000),
+ 'HireDate': new Date(784875600000),
+ 'Address': '7 Houndstooth Rd.',
+ 'City': 'London',
+ 'Region': null,
+ 'PostalCode': 'WG2 7LT',
+ 'Country': 'UK',
+ 'HomePhone': '(71) 555-4444',
+ 'Extension': '452',
+ 'Photo': { 'Length': 21626 },
+
+ 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
+ 'ReportsTo': 5,
+ 'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
+ }];
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs8/index.html b/ej2-vue/code-snippet/grid/edit/edit-cs8/index.html
new file mode 100644
index 000000000..f9055e01d
--- /dev/null
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs8/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+ EJ2 Vue Sample
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endraw %}
{% endhighlight %}
{% endtabs %}
diff --git a/ej2-vue/grid/editing/edit.md b/ej2-vue/grid/editing/edit.md
index 8690989e6..c7cb144c6 100644
--- a/ej2-vue/grid/editing/edit.md
+++ b/ej2-vue/grid/editing/edit.md
@@ -10,131 +10,340 @@ domainurl: ##DomainURL##
# Edit in Vue Grid component
-The Grid component has options to dynamically insert, delete and update records. Editing feature requires a primary key column for CRUD operations. To define the primary key, set [`columns.isPrimaryKey`](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#isprimarykey) to **true** in particular column.
+The Grid component provides powerful options for dynamically inserting, deleting, and updating records, enabling you to modify data directly within the grid. This feature is useful when you want to enable you to perform CRUD (Create, Read, Update, Delete) operations seamlessly.
-You can start the edit action either by double clicking the particular row or by selecting the required row and click on **Edit** button in the toolbar. Similarly, you can add a new record to grid either by clicking on **Add** button in the toolbar or on an external button which is bound to invoke the [`addRecord`](https://ej2.syncfusion.com/vue/documentation/api/grid/edit/#addrecord) method of the grid, **Save** and **Cancel** while in edit mode is possible using respective toolbar icon in grid.
+To enable editing functionality directly within the grid, you need to configure the [allowEditing](https://ej2.syncfusion.com/vue/documentation/api/grid/editSettingsModel/#allowediting), [allowAdding](https://ej2.syncfusion.com/vue/documentation/api/grid/editSettingsModel/#allowadding), and [allowDeleting](https://ej2.syncfusion.com/vue/documentation/api/grid/editSettingsModel/#allowdeleting) properties within the [editSettings](https://ej2.syncfusion.com/vue/documentation/api/grid#editsettings) to **true**.
-Deletion of the record is possible by selecting the required row and click on **Delete** button in the toolbar.
+Editing feature requires a primary key column for CRUD operations. To define the primary key, set [columns.isPrimaryKey](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#isprimarykey) to **true** in particular column.
-To use CRUD, inject the [`Edit`](https://ej2.syncfusion.com/vue/documentation/api/grid/edit/) module in the **provide** section.
+You can start the edit action either by double clicking the particular row or by selecting the required row and click on **Edit** button in the toolbar. Similarly, you can add a new record to grid either by clicking on **Add** button in the toolbar or on an external button which is bound to invoke the [addRecord](https://ej2.syncfusion.com/vue/documentation/api/grid/edit/#addrecord) method of the grid, **Save** and **Cancel** while in edit mode is possible using respective toolbar icon in grid. Deletion of the record is possible by selecting the required row and click on **Delete** button in the toolbar.
-To get start quickly with Edit Options, you can check on this video:
+To use CRUD, inject the [Edit](https://ej2.syncfusion.com/vue/documentation/api/grid/edit/) module in the **provide** section.
+
+To learn about what are all the edit modes and edit types are available in Vue Grid, you can check on this video
{% youtube "https://www.youtube.com/watch?v=VUWaKKppBEg" %}
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/grid/edit/default-cs20/app-composition.vue %}
+{% include code-snippet/grid/edit/edit-cs1/app-composition.vue %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/grid/edit/default-cs20/app.vue %}
+{% include code-snippet/grid/edit/edit-cs1/app.vue %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/edit/default-cs20" %}
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs1" %}
-> * If [`columns.isIdentity`](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#isidentity) is enabled, then it will be considered as a read-only column when editing and adding a record.
-> * You can disable editing for a particular column, by specifying [`columns.allowEditing`](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#allowediting) to **false**.
+> * If [columns.isIdentity](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#isidentity) is enabled, then it will be considered as a read-only column when editing and adding a record.
+> * You can disable editing for a particular column, by specifying `columns.allowEditing` to **false**.
+>* You can use the **Insert** key to add a new row to the grid and use the **Delete** key to delete the selected row from the grid.
## Toolbar with edit option
-The grid toolbar has the [built-in items](../tool-bar#built-in-toolbar-items) to execute Editing actions.You can define this by using the [`toolbar`](https://ej2.syncfusion.com/vue/documentation/api/grid/#toolbar) property.
+The toolbar with edit option feature in the Grid component provides a [built-in toolbar](https://ej2.syncfusion.com/vue/documentation/grid/tool-bar/tool-bar-items#built-in-toolbar-items) that includes various items for executing editing actions. This feature allows you to easily perform edit operations on the grid data, such as modifying cell values, updating changes, and canceling edits.
+
+To enable this feature, you need to configure the [toolbar](https://ej2.syncfusion.com/vue/documentation/api/grid/#toolbar) property of the Grid component. This property allows you to define the items that will be displayed in the grid toolbar. By including the relevant items like **Edit**, **Add**, **Delete**, **Update**, and **Cancel** within the `toolbar` property, you can enable the edit options in the toolbar.
+
+Here's an example of how to enable the toolbar with edit option in the Grid:
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/grid/edit/default-cs21/app-composition.vue %}
+{% include code-snippet/grid/edit/edit-cs2/app-composition.vue %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/grid/edit/default-cs21/app.vue %}
+{% include code-snippet/grid/edit/edit-cs2/app.vue %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/edit/default-cs21" %}
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs2" %}
## Disable editing for particular column
-You can disable editing for particular columns by using the [`columns.allowEditing`](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#allowediting).
+In Grid component, you have an option to disable editing for a specific column. This feature is useful when you want to prevent editing certain columns, such as columns that contain calculated values or read-only data.
-In the following demo, editing is disabled for the **CustomerID** column.
+To disable editing for a particular column, you can use the [allowEditing](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#allowediting) property of the **columns** object. By setting this property to **false**, you can prevent editing for that specific column.
+
+Here's an example that demonstrates how to disable editing for the column in the Grid:
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/grid/edit/default-cs22/app-composition.vue %}
+{% include code-snippet/grid/edit/edit-cs3/app-composition.vue %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/grid/edit/default-cs22/app.vue %}
+{% include code-snippet/grid/edit/edit-cs3/app.vue %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/edit/default-cs22" %}
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs3" %}
-## Disable editing for a particular row or cell
+>* If you have set the [isPrimaryKey](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#isprimarykey) property to **true** for a column, editing will be automatically disabled for that column.
+> * You can disble the particular row using [actionBegin](https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin) event. Please refer this [link](https://ej2.syncfusion.com/vue/documentation/grid/editing/in-line-editing#disable-editing-for-a-particular-row).
+>* You can disble the particular cell using [cellEdit](https://ej2.syncfusion.com/vue/documentation/api/grid/#celledit) event. Please refer this [link](https://ej2.syncfusion.com/vue/documentation/grid/editing/batch-editing#disable-editing-for-a-particular-cell).
-You can disable the editing for a particular row by using the [`actionBegin`](https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin) event of Grid based on `requestType` as `beginEdit`.
+## Editing template column
-In the below demo, the rows which are having the value for `ShipCountry` column as "France" is prevented from editing.
+The editing template column feature in the Grid allows you to create custom editing templates for specific columns in the grid. This feature is particularly useful when you need to customize the editing experience for certain columns, such as using custom input controls or displaying additional information during editing.
+
+To enable the editing template column feature, you need to define the [field](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#field) property for the specific column in the grid's configuration. The `field` property maps the column to the corresponding field name in the data source, allowing you to edit the value of that field.
+
+In the below demo, the **ShipCountry** column is rendered with the template.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/grid/edit/default-cs23/app-composition.vue %}
+{% raw %}
+
+
+
+
+
+{% endraw %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/edit/default-cs23" %}
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs4" %}
+
+## Customize delete confirmation dialog
+
+Customizing the delete confirmation dialog in Grid allows you to personalize the appearance, content, and behavior of the dialog that appears when you attempts to delete an item. You can modify properties like header, showCloseIcon, and height to tailor the edit dialog to your specific requirements. Additionally, you can override default localization strings to provide custom text for buttons or other elements within the dialog.
-For batch mode of editing, you can use [`cellEdit`](https://ej2.syncfusion.com/vue/documentation/api/grid/filterSettings/#celledit) event of Grid. In the below demo, the cells which are having the value as "France" is prevented from editing.
+To customize the delete confirmation dialog, you can utilize the [toolbarClick](https://ej2.syncfusion.com/vue/documentation/api/grid/#toolbarclick) event. This event is triggered when a toolbar item, such as the delete button, is clicked.
+
+>* To enable the confirmation dialog for the delete operation in the Grid, you can set the [showDeleteConfirmDialog](https://ej2.syncfusion.com/vue/documentation/api/grid/editSettings/#showdeleteconfirmdialog) property of the `editSettings` configuration to **true**.
+>* You can refer the Grid [Default text](https://ej2.syncfusion.com/vue/documentation/grid/global-local) list for more localization.
+
+The following example that demonstrates how to customize the delete confirmation dialog using the `toolbarClick` event:
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/grid/edit/default-cs24/app-composition.vue %}
+{% include code-snippet/grid/edit/edit-cs5/app-composition.vue %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/grid/edit/default-cs24/app.vue %}
+{% include code-snippet/grid/edit/edit-cs5/app.vue %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/edit/default-cs24" %}
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs5" %}
-## Editing template column
+## Update boolean column value with a single click
+
+The Syncfusion Grid allows you to update a boolean column value with a single click in the normal mode of editing. This feature streamlines the process of toggling boolean values within the grid, enhancing interaction and efficiency. This can be achieved through the use of the column template feature.
+
+In the following sample, the `CheckBox` component is rendered as a template in the **Verified** column to make it editable with a single click.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/grid/edit/edit-cs6/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/grid/edit/edit-cs6/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs6" %}
+
+## Edit enum column
+
+The Syncfusion Grid provides a feature that allows you to edit enum type data in a grid column. This is particularly useful when you need to edit enumerated list data efficiently.
+
+In the following example, the `DropDownList` component is rendered within the [editTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#edittemplate) for the Employee Feedback column using **template**.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/grid/edit/edit-cs7/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/grid/edit/edit-cs7/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs7" %}
+
+## Edit complex column
+
+The edit template for complex column in Grid is used to customize the editing experience when dealing with complex data structures. This capability is particularly useful for handling nested data objects within grid columns. By default, the grid binds complex data to column fields using the dot (.) operator. However, when you render custom elements, such as input fields, in the edit template for a complex column, you must use the (___) underscore operator instead of the dot (.) operator to bind the complex object.
+
+In the following sample, the input element is rendered in the edit template of the FirstName and LastName column. The edited changes can be saved using the `name` property of the input element. Since the complex data is bound to the FirstName and LastName column, The `name` property should be defined as **Name___FirstName** and **Name___LastName**, respectively, instead of using the dot notation (**Name.FirstName** and **Name.LastName**).
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/grid/edit/edit-cs8/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/grid/edit/edit-cs8/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs8" %}
+
+## Edit foreign key column
+
+The Syncfusion Grid offers a powerful editing feature for foreign key columns, enhancing the default rendering of the DropDownList component during editing. This flexibility is particularly useful when you need to customize the editor for foreign key columns. By default, the Syncfusion Grid renders the DropDownList component as the editor for foreign key columns during editing. However, you can enhance and customize this behavior by leveraging the [editTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#edittemplate) property for the column using **template**. The `editTemplate` property allows you to specify a cell edit template that serves as an editor for a particular column, accepting either a template string or an HTML element ID.
+
+In the following code example, the Employee Name is a foreign key column. When editing, the ComboBox component is rendered instead of DropDownList.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/grid/edit/edit-cs9/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/grid/edit/edit-cs9/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs9" %}
+
+## How to perform CRUD action externally
+
+Performing CRUD (Create, Read, Update, Delete) actions externally in the Syncfusion Grid allows you to manipulate grid data outside the grid itself. This can be useful in scenarios where you want to manage data operations programmatically.
+
+### Using separate toolbar
+
+The Syncfusion Grid enables external CRUD operations, allowing you to efficiently manage data manipulation within the grid. This capability is particularly useful when you need to manage data operations using a separate toolbar.
+
+To perform CRUD operations externally, the following methods are available:
+
+[addRecord](https://ej2.syncfusion.com/vue/documentation/api/grid/#addrecord) - To add a new record. If no data is passed then add form will be shown.
+[startEdit](https://ej2.syncfusion.com/vue/documentation/api/grid/#startedit) - To edit the selected row.
+[deleteRecord](https://ej2.syncfusion.com/vue/documentation/api/grid/#deleterecord) - To delete a selected row.
+[endEdit](https://ej2.syncfusion.com/vue/documentation/api/grid/#endedit) - If the grid is in editable state, then you can save a record by invoking this method.
+[closeEdit](https://ej2.syncfusion.com/vue/documentation/api/grid/#closeedit) - To cancel the edited state.
+
+The following example demonstrates the integration of the Syncfusion Grid with a separate toolbar for external CRUD operations. The toolbar contains buttons for Add, Edit, Delete, Update, and Cancel.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/grid/edit/edit-cs10/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/grid/edit/edit-cs10/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs10" %}
+
+### Using external form
+
+Performing the edit operation in a custom external form in the Syncfusion Grid is a valuable feature when you need to customize the edit operation within a separate form rather than the default in-grid editing.
-You can edit template column value by defining `field` for that particular column.
+To enable the use of an external form for editing in Syncfusion Grid, you can make use of the `RowSelected` property. This property specifies whether the edit operation should be triggered when a row is selected.
-In the below demo, the `ShipCountry` column is rendered with the template.
+In the following example, it demonstrates how to edit the form using an external form by utilizing the `RowSelected` property:
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/grid/how-to/default-cs8/app-composition.vue %}
+{% include code-snippet/grid/edit/edit-cs11/app-composition.vue %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/grid/how-to/default-cs8/app.vue %}
+{% include code-snippet/grid/edit/edit-cs11/app.vue %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/how-to/default-cs8" %}
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs11" %}
## Troubleshoot editing works only for first row
-The Editing functionalities can be performed based upon the primary key value of the selected row. If **primaryKey** is not defined in the grid, then edit or delete action take places the first row.
+The Editing functionalities can be performed based upon the primary key value of the selected row. If [isPrimaryKey](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#isprimarykey) property is not defined in the grid, then edit or delete action take places the first row. To overcome this, ensure that you establish the `isPrimaryKey` property as **true** for the relevant column responsible for holding the unique identifier for each row.
-## How to make a Grid column always editable
+## How to make a grid column always editable
-Make the Grid column always editable using the column template feature of the Grid.
+To make a Grid column always editable, you can utilize the column template feature of the Grid. This feature is useful when you want to edit a particular column's values directly within the grid.
-In the following example, the textbox is rendered in the Freight column using a column template. The keyup event for the Grid is bound using the [created](https://ej2.syncfusion.com/vue/documentation/api/grid#created) event of the Grid, and the edited changes are saved in the data source using the [updateRow](https://ej2.syncfusion.com/vue/documentation/api/grid#updaterow) method of the Grid.
+In the following example, the textbox is rendered in the **Freight** column using a column template. The keyup event for the Grid is bound using the [created](https://ej2.syncfusion.com/vue/documentation/api/grid/#created) event of the Grid, and the edited changes are saved in the data source using the [updateRow](https://ej2.syncfusion.com/vue/documentation/api/grid/#updaterow) method of the Grid.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/grid/edit/default-cs25/app-composition.vue %}
+{% include code-snippet/grid/edit/edit-cs12/app-composition.vue %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/grid/edit/default-cs25/app.vue %}
+{% include code-snippet/grid/edit/edit-cs12/app.vue %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/grid/edit/default-cs25" %}
+{% previewsample "page.domainurl/code-snippet/grid/edit/edit-cs12" %}
## See Also
diff --git a/ej2-vue/pdfviewer/how-to/restricting-zoom-in-mobile-mode.md b/ej2-vue/pdfviewer/how-to/restricting-zoom-in-mobile-mode.md
new file mode 100644
index 000000000..7ecc32ce8
--- /dev/null
+++ b/ej2-vue/pdfviewer/how-to/restricting-zoom-in-mobile-mode.md
@@ -0,0 +1,121 @@
+---
+layout: post
+title: Restrict Zoom Percentage in Vue PDF Viewer component | Syncfusion
+description: Learn here all how to restrict zoom percentage in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more.
+control: PDF Viewer
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# How to Restrict Zoom Percentage on Mobile Devices
+
+In Syncfusion PDF Viewer, you can easily restrict the zoom percentage on mobile devices using the **maxZoom** and **minZoom** property. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading, on mobile devices.
+
+{% tabs %}
+{% highlight html tabtitle="Standalone" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+By implementing this, you ensure that the maximum zoom percentage on mobile devices is limited to 200% and the minimum zoom percentage is set to 10%. This prevents performance issues that may arise from excessive zooming on mobile platforms.
diff --git a/ej2-vue/pivotview/calculated-field.md b/ej2-vue/pivotview/calculated-field.md
index a8aec4b1d..3d983f439 100644
--- a/ej2-vue/pivotview/calculated-field.md
+++ b/ej2-vue/pivotview/calculated-field.md
@@ -19,7 +19,7 @@ Calculated field can also be included in the pivot table through code behind usi
To use calculated field option, you need to inject the `CalculatedField` module in pivot table.
-> The calculated field is applicable only for value fields. Also, calculated field created through code behind will be automatically listed in the UI dialog as well.
+> The calculated field is applicable only for value fields. 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.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -347,4 +347,4 @@ The event [`actionFailure`](https://ej2.syncfusion.com/vue/documentation/api/piv
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/pivot-grid/default-cs15" %}
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/pivot-grid/default-cs15" %}
diff --git a/ej2-vue/pivotview/getting-started.md b/ej2-vue/pivotview/getting-started.md
index 5bdd1038b..5a54781f4 100644
--- a/ej2-vue/pivotview/getting-started.md
+++ b/ej2-vue/pivotview/getting-started.md
@@ -65,7 +65,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.
@@ -122,7 +122,14 @@ Follow the below steps to add the Vue Pivotview component:
1\. First, import and register the Pivotview component in the `script` section of the **src/App.vue** file.
{% tabs %}
-{% highlight html tabtitle="~/src/App.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
{% endhighlight %}
{% endtabs %}
@@ -239,7 +247,10 @@ In-order to define each field in the respective axis, the following basic proper
In this illustration, "Year" and "Quarter" are added in column, "Country" and "Products" in row, and "Sold" and "Amount" in value section respectively.
{% tabs %}
-{% highlight html tabtitle="~/src/App.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/pivot-grid/default-cs88/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% include code-snippet/pivot-grid/default-cs88/app.vue %}
{% endhighlight %}
{% endtabs %}
@@ -253,7 +264,10 @@ Formatting defines a way in which values should be displayed. For example, forma
> Only fields from value section, which is in the form of numeric data values are applicable for formatting.
{% tabs %}
-{% highlight html tabtitle="~/src/App.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/pivot-grid/default-cs89/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% include code-snippet/pivot-grid/default-cs89/app.vue %}
{% endhighlight %}
{% endtabs %}
@@ -285,7 +299,10 @@ The field list allows to add or remove fields and also rearrange the fields betw
> If the `FieldList` module is not injected, the Field List will not be rendered with the pivot table component.
{% tabs %}
-{% highlight html tabtitle="~/src/App.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/pivot-grid/default-cs90/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% include code-snippet/pivot-grid/default-cs90/app.vue %}
{% endhighlight %}
{% endtabs %}
@@ -299,7 +316,10 @@ The grouping bar feature automatically populates fields from the bound data sour
> If the `GroupingBar` module is not injected, the grouping bar will not be rendered with the pivot table component.
{% tabs %}
-{% highlight html tabtitle="~/src/App.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/pivot-grid/default-cs91/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% include code-snippet/pivot-grid/default-cs91/app.vue %}
{% endhighlight %}
{% endtabs %}
@@ -311,7 +331,10 @@ The grouping bar feature automatically populates fields from the bound data sour
The filter axis contains collection of fields that would act as master filter over the data bound in row, column and value axes of the pivot table. The fields along with filter members could be set to filter axis either through report via code behind or by dragging and dropping fields from other axes to filter axis via grouping bar or field list at runtime.
{% tabs %}
-{% highlight html tabtitle="~/src/App.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/pivot-grid/default-cs92/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% include code-snippet/pivot-grid/default-cs92/app.vue %}
{% endhighlight %}
{% endtabs %}
@@ -322,10 +345,13 @@ The filter axis contains collection of fields that would act as master filter ov
The calculated field feature allows user to insert or add a new calculated field based on the available fields from the bound data source using basic arithmetic operators. The calculated field can be included in pivot table using the [`calculatedFieldSettings`](https://ej2.syncfusion.com/vue/documentation/api/pivotview/iCalculatedFieldSettings/) from code behind. Or else, calculated fields can be added at run time through the built-in dialog by just setting the [`allowCalculatedField`](https://ej2.syncfusion.com/vue/documentation/api/pivotview/#allowcalculatedfield) property to **true** in pivot table. You will see a button enabled in the Field List UI automatically to invoke the calculated field dialog and perform necessary operation. To know more about calculated field, [`refer`](./calculated-field) here.
-> If the `CalculatedField` module is not injected, the calculated field popup will not be rendered with the pivot table component. Moreover calculated field is applicable only for value fields.
+> 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="~/src/App.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue) %}
+{% include code-snippet/pivot-grid/default-cs93/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% include code-snippet/pivot-grid/default-cs93/app.vue %}
{% endhighlight %}
{% endtabs %}
@@ -337,17 +363,26 @@ The calculated field feature allows user to insert or add a new calculated field
The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application.
```bash
-npm run dev
+npm run serve
+```
+or
+```bash
+yarn run serve
```
Output will be displayed as follows.
{% tabs %}
-{% highlight html tabtitle="~/src/App.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/pivot-grid/default-cs94/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% include code-snippet/pivot-grid/default-cs94/app.vue %}
{% endhighlight %}
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/pivot-grid/default-cs94" %}
-> You can also explore our [Vue Pivot Table example](https://ej2.syncfusion.com/vue/demos/#/material/pivot-table/default) that shows how to rendering of the pivot table with drill-up and drill-down functionality bound to a relational report.
\ No newline at end of file
+For more information and to access the quick start project, visit: [GitHub Repository](https://github.com/SyncfusionExamples/getting-started-with-the-vue2-pivot-table-component)
+
+> You can also explore our [Vue Pivot Table example](https://ej2.syncfusion.com/vue/demos/#/material/pivot-table/default) that shows how to rendering of the pivot table with drill-up and drill-down functionality bound to a relational report.
diff --git a/ej2-vue/pivotview/images/calculatdfield-grouping-edit1.png b/ej2-vue/pivotview/images/calculatdfield-grouping-edit1.png
index 01ec4e709..7cd3f932f 100644
Binary files a/ej2-vue/pivotview/images/calculatdfield-grouping-edit1.png and b/ej2-vue/pivotview/images/calculatdfield-grouping-edit1.png differ
diff --git a/ej2-vue/pivotview/images/vue2-terminal.png b/ej2-vue/pivotview/images/vue2-terminal.png
new file mode 100644
index 000000000..39beefaa2
Binary files /dev/null and b/ej2-vue/pivotview/images/vue2-terminal.png differ