Integrated latest changes at 07-13-2024 4:30:07 AM

Author: SyncfusionBuild

ej2-vue/code-snippet/grid/accessibility/custom-shortcut-key/app-composition.vue

@@ -12,10 +12,10 @@
 </template>
 
 <script setup>
-import { provide } from "vue";
-
+import { provide, ref } from "vue";
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, Edit, Group } from "@syncfusion/ej2-vue-grids";
 import { data } from './datasource.js';
+const grid = ref(null)
 const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
 const selectionSettings = { type: 'Multiple' };
 const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
@@ -25,36 +25,36 @@ const keyPressed = function (e) {
   switch (key) {
     case 'n':
       e.preventDefault();
-      this.$refs.grid.addRecord();
+      grid.value.addRecord();
       break;
     case 's':
       if (e.ctrlKey) {
         e.preventDefault();
-        this.$refs.grid.endEdit();
+        grid.value.endEdit();
       }
       break;
     case 'd':
       if (e.ctrlKey) {
         e.preventDefault();
-        this.$refs.grid.deleteRecord();
+        grid.value.deleteRecord();
       }
       break;
     case 'a':
       if (e.ctrlKey) {
         e.preventDefault();
-        this.$refs.grid.selectRowsByRange(0);
+        grid.value.selectRowsByRange(0);
       }
       break;
     case 'g':
       if (e.ctrlKey) {
         e.preventDefault();
-        this.$refs.grid.groupColumn('CustomerID');
+        grid.value.groupColumn('CustomerID');
       }
       break;
     case 'enter':
       e.preventDefault();
       e.cancel = true;
-      this.$refs.grid.refreshColumns();
+      grid.value.refreshColumns();
       break;
     case 'insert':
       e.preventDefault();

ej2-vue/code-snippet/grid/aggregates/default-cs11/app-composition.vue

@@ -31,7 +31,7 @@ const app = createApp();
           }
       }
     const customAggregateFn = function () {
-      const distinct = DataUtil.distinct(this.data, 'ShipCountry', true);
+      const distinct = DataUtil.distinct(data, 'ShipCountry', true);
       return distinct.length;
     }
   provide('grid',  [Aggregate]);

ej2-vue/code-snippet/grid/aggregates/default-cs5/app.vue

@@ -22,6 +22,7 @@
 
 import { GridComponent, ColumnsDirective, ColumnDirective, AggregatesDirective, AggregateDirective, Group, Aggregate } from "@syncfusion/ej2-vue-grids";
 import { data } from './datasource.js';
+import { createApp } from "vue";
 const app = createApp();
 
 export default {

ej2-vue/code-snippet/grid/cell/autowrap-cs2/app-composition.vue

@@ -32,7 +32,7 @@ const ddlData = [
   { text: 'None', value: 'None' },
 ];
 const change = function (args) {
-  grid.value.gridLines = args.value
+  grid.value.ej2Instances.gridLines = args.value
 }
 </script>
 <style>

ej2-vue/code-snippet/grid/cell/autowrap-cs2/app.vue

@@ -44,7 +44,7 @@ components: {
   },
   methods: {
     change: function(args) {
-      this.$refs.grid.gridLines= args.value
+      this.$refs.grid.ej2Instances.gridLines= args.value
     }
   },
 }

ej2-vue/code-snippet/grid/cell/custom-tooltip/app-composition.vue

@@ -21,7 +21,7 @@ import { ref } from 'vue';
 const tooltip = ref(null);
 const beforeRender = function (args) {
   if (args.target.classList.contains('e-rowcell')) {
-    tooltip.value.content = 'The value is "' + args.target.innerText + '" ';
+    tooltip.value.ej2Instances.content = 'The value is "' + args.target.innerText + '" ';
   }
 }
 </script>

ej2-vue/code-snippet/grid/cell/custom-tooltip/app.vue

@@ -33,7 +33,7 @@ export default {
   methods: {
     beforeRender: function (args) {
       if (args.target.classList.contains('e-rowcell')) {
-        this.$refs.tooltip.content = 'The value is "' + args.target.innerText + '" ';
+        this.$refs.tooltip.ej2Instances.content = 'The value is "' + args.target.innerText + '" ';
       }
     }
   }

ej2-vue/code-snippet/grid/column/column-align-cs1/app-composition.vue

@@ -30,7 +30,7 @@ const alignmentData = [
   { text: 'Justify', value: 'Justify' },
 ];
 const change = function (args) {
-  grid.value.columns.forEach(col => {
+  grid.value.ej2Instances.columns.forEach(col => {
     col.textAlign = args.value;
   });
   grid.value.refreshColumns();

ej2-vue/code-snippet/grid/column/complex-cs3/app-composition.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <ejs-grid :dataSource="data" :query="query" :allowPaging="true">
+    <ejs-grid :dataSource="data" :query="query">
       <e-columns>
         <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column>
         <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>

ej2-vue/code-snippet/grid/column/complex-cs3/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <ejs-grid :dataSource="data" :query='query' allowPaging=true>
+    <ejs-grid :dataSource="data" :query='query'>
       <e-columns>
         <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
         <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>

ej2-vue/code-snippet/grid/column/dynamic-column-cs2/app-composition.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="app">
-    <ejs-grid ref='grid' :dataSource="data" height='315px' :rowDataBound='rowDataBound' allowPaging="true"
-      :pageSettings="pageSettings">
+    <ejs-grid ref='grid' :dataSource="data" height='315px' :rowDataBound='rowDataBound' allowPaging="true">
       <e-columns>
         <e-column headerText='S.No' width=90 textAlign='Center'></e-column>
         <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
@@ -14,16 +13,14 @@
 </template>
 <script setup>
 import { provide, ref } from "vue";
-
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page } from "@syncfusion/ej2-vue-grids";
 import { data } from './datasource.js';
 const grid = ref(null);
 const rowDataBound = function (args) {
   if (args.row) {
-    let grid = grid.value.ej2Instances;
     var rowIndex = parseInt(args.row.getAttribute('aria-rowIndex'));
-    var currentPageNumber = grid.pageSettings.currentPage;
-    var pageSize = grid.pageSettings.pageSize;
+    var currentPageNumber = grid.value.ej2Instances.pageSettings.currentPage;
+    var pageSize = grid.value.ej2Instances.pageSettings.pageSize;
     var startIndex = (currentPageNumber - 1) * pageSize;
     args.row.querySelector('.e-rowcell').innerHTML = (
       startIndex + rowIndex

ej2-vue/code-snippet/grid/column/dynamic-column-cs2/app.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="app">
-    <ejs-grid ref='grid' :dataSource="data" height='315px' :rowDataBound='rowDataBound' allowPaging="true"
-      :pageSettings="pageSettings">
+    <ejs-grid ref='grid' :dataSource="data" height='315px' :rowDataBound='rowDataBound' allowPaging="true">
       <e-columns>
         <e-column headerText='S.No' width=90 textAlign='Center'></e-column>
         <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>

ej2-vue/code-snippet/grid/column/resize-event/app-composition.vue

@@ -19,18 +19,19 @@ import { provide, ref } from "vue";
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Resize } from "@syncfusion/ej2-vue-grids";
 import { data } from './datasource.js';
 const grid = ref(null);
+const message = ref("")
   provide('grid',  [Resize]);
     const resizeStart = function (args) {
-      this.message = `resizeStart event triggered`;
+      message.value = `resizeStart event triggered`;
       if (args.column.field === 'OrderID') {
         args.cancel = true;
       }
     }
     const resizing = function (args) {
-      this.message = `resizing event triggered`;
+      message.value = `resizing event triggered`;
     }
     const resizeStop = function (args) {
-      this.message = `resizeStop event triggered`;
+      message.value = `resizeStop event triggered`;
       const headerCell = grid.value.getColumnHeaderByField(args.column.field);
       headerCell.classList.add('customcss');
       const columnCells = grid.value.getContentTable()

ej2-vue/code-snippet/grid/column/resize-event/app.vue

@@ -27,7 +27,8 @@ components: {
 },
   data() {
     return {
-      data: data
+      data: data,
+      message:""
     };
   },
   provide: {

ej2-vue/code-snippet/grid/column/resize-mode/app-composition.vue

@@ -27,7 +27,7 @@ const grid = ref(null);
         { text: 'Auto', value: 'Auto' },
       ]
     const change = function(args) {
-      grid.value.resizeSettings = {mode: args.value}
+      grid.value.ej2Instances.resizeSettings = {mode: args.value}
     }
   provide('grid',  [Resize]);
 </script>

ej2-vue/code-snippet/grid/column/resize-mode/app.vue

@@ -40,7 +40,7 @@ components: {
   },
   methods: {
     change: function(args) {
-      this.$refs.grid.resizeSettings = {mode: args.value}
+      this.$refs.grid.ej2Instances.resizeSettings = {mode: args.value}
     }
   },
   provide: {

ej2-vue/code-snippet/grid/column/template-cs2/app-composition.vue

@@ -23,13 +23,15 @@ import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';
 import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
 import { ref } from "vue";
 const dialog = ref(null);
+const selectedRecord = ref(null)
+const header = "Selected Row Details"
     const data = employeeData;
     const showDetails = function(rowData) {
-      this.selectedRecord = rowData;
+      selectedRecord.value = rowData;
       dialog.value.show();
     }
     const contentShow = function() {
-      if (this.selectedRecord) {
+      if (selectedRecord.value) {
         const dialogContent = `
           <p><b>EmployeeID:</b>${this.selectedRecord.EmployeeID}</p>
           <p><b>FirstName:</b>${this.selectedRecord.FirstName}</p>

ej2-vue/code-snippet/grid/group/component-group-caption/app-composition.vue

@@ -17,7 +17,7 @@ import { provide } from "vue";
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Group } from "@syncfusion/ej2-vue-grids";
 import { ChipList } from '@syncfusion/ej2-buttons';
 import { data } from './datasource.js';
-const groupOptions = { columns: ['CustomerID'] };
+const groupOptions = { columns: ['CustomerID'], captionTemplate: captionTemplate };
 const captionTemplate = '<div class="groupChip">${key}</div>';
 const dataBound = () => {
   var groupCaptions = document.getElementsByClassName('groupChip');

ej2-vue/code-snippet/grid/group/custom-group-caption/app-composition.vue

@@ -15,7 +15,7 @@ import { provide } from "vue";
 
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Group } from "@syncfusion/ej2-vue-grids";
 import { data } from './datasource.js';
-const groupOptions = { columns: ['CustomerID'] };
+const groupOptions = { columns: ['CustomerID'], captionTemplate: captionTemplate };
 const captionTemplate = '<span class="groupItems"> ${key } - ${count } Records : ${headerText} </span>';
 provide('grid', [Group]);
 </script>

ej2-vue/code-snippet/grid/group/default-cs1/app-composition.vue

@@ -14,7 +14,7 @@
 import { provide } from "vue";
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Group } from "@syncfusion/ej2-vue-grids";
 import { data } from './datasource.js';
-const groupOptions = { columns: ['CustomerID', 'ShipCity'] };
+const groupOptions = { columns: ['CustomerID', 'ShipCity'], captionTemplate: captionTemplate };
 const captionTemplate = '<span class="groupItems"> ${headerText} - ${key } : ${count} Items </span>';
 provide('grid', [Group]);
 </script>

ej2-vue/code-snippet/grid/group/default-cs6/app-composition.vue

@@ -12,23 +12,22 @@
   </div>
 </template>
 <script setup>
-import { provide } from "vue";
-
+import { provide, ref } from "vue";
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Group } from "@syncfusion/ej2-vue-grids";
 import { data } from './datasource.js';
-      const message = '';
-      const actionBegin = function (args) {
+    const message = ref("")
+    const actionBegin = function (args) {
       if (args.requestType === 'grouping' && args.columnName === 'OrderID') {
         args.cancel = true
-        this.message = args.requestType + ' action is cancelled for ' + args.columnName + ' column';
+        message.value = args.requestType + ' action is cancelled for ' + args.columnName + ' column';
       }
     }
     const actionComplete = function (args) {
       if (args.requestType === 'grouping') {
-        this.message = args.requestType + ' action completed for ' + args.columnName + ' column';
+        message.value = args.requestType + ' action completed for ' + args.columnName + ' column';
       }
       else {
-        this.message = ''
+        message.value = '';
       }
     }
   provide('grid',  [Group]);

ej2-vue/code-snippet/grid/how-to/foreignKey-cs2/app-composition.vue

@@ -13,14 +13,12 @@
 </template>
 <script setup>
 import { provide } from "vue";
-
 import { createElement } from '@syncfusion/ej2-base';
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Edit, Toolbar, ForeignKey, Filter } from "@syncfusion/ej2-vue-grids";
 import { DropDownList } from "@syncfusion/ej2-dropdowns";
 import { DataManager } from '@syncfusion/ej2-data';
 import { data, employeeData } from './datasource.js';
 let dropInstance;
-const employeeData = employeeData;
 const filteroption = { type: 'Menu' };
 const filter = {
   ui: {

ej2-vue/code-snippet/grid/search/search-highlight/app-composition.vue

@@ -18,8 +18,8 @@ import { provide } from "vue";
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, Search } from "@syncfusion/ej2-vue-grids";
 import { data } from './datasource.js'
 const toolbarOptions = ['Search'];
+let key = '';
 const actionBegin = function (args) {
-  let key = '';
   if (args.requestType === 'searching') {
   key = args.searchString.toLowerCase();
 }

ej2-vue/code-snippet/grid/search/search-highlight/app.vue

@@ -26,7 +26,8 @@ components: {
   data() {
     return {
       data: data,
-      toolbarOptions: ['Search']
+      toolbarOptions: ['Search'],
+      key: ''
     };
   },
   methods: {

ej2-vue/code-snippet/grid/select/selection-column/app-composition.vue

@@ -21,7 +21,7 @@
 <script setup>
 
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
-import { SwitchComponent } from "@syncfusion/ej2-vue-buttons";
+import { SwitchComponent as EjsSwitch } from "@syncfusion/ej2-vue-buttons";
 import { data } from "./datasource.js";
 import { ref } from 'vue';
 const grid = ref(null);

ej2-vue/code-snippet/grid/toolbar/custom-cs2/app-composition.vue

@@ -13,8 +13,8 @@
 <script setup>
 import { provide, createApp, ref } from "vue";
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
-import { ToolbarComponent as EjsToolbar } from "@syncfusion/ej2-vue-navigations";
-import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
+import { ToolbarComponent } from "@syncfusion/ej2-vue-navigations";
+import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
 import { addImage } from "./add.ts";
 import { deleteImage } from "./delete.ts";
 import { data } from './datasource.js';
@@ -27,6 +27,10 @@ const app = createApp();
         var deleteImageSource = `data:image/png;base64, ${deleteImage}`;
         return {
           template: app.component('custom-toolbar', {
+            components:{
+              "ejs-toolbar":ToolbarComponent,
+              "ejs-button":ButtonComponent
+            },
             template: `<ejs-toolbar>
                         <div>
                           <img :src="addImageSource" id="addImage" />
@@ -46,7 +50,7 @@ const app = createApp();
                 if (args.currentTarget.id === 'addButton') {
                   grid.value.ej2Instances.addRecord();
                 } else {
-                    var selectedRecord = grid.getSelectedRecords()[0];
+                    var selectedRecord = grid.value.ej2Instances.getSelectedRecords()[0];
                     grid.value.ej2Instances.deleteRecord(selectedRecord);
                 }
               } 

ej2-vue/code-snippet/grid/toolbar/custom-cs2/app.vue

@@ -25,9 +25,7 @@ name: "App",
 components: {
 "ejs-grid":GridComponent,
 "e-columns":ColumnsDirective,
-"e-column":ColumnDirective,
-"ejs-toolbar":ToolbarComponent,
-"ejs-button":ButtonComponent
+"e-column":ColumnDirective
 },
   data() {
     return {
@@ -39,6 +37,10 @@ components: {
         var deleteImageSource = `data:image/png;base64, ${deleteImage}`;
         return {
           template: app.component('custom-toolbar', {
+            components:{
+              "ejs-toolbar":ToolbarComponent,
+              "ejs-button":ButtonComponent
+            },
             template: `<ejs-toolbar>
                         <div>
                           <img :src="addImageSource" id="addImage" />