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>