Integrated latest changes at 11-30-2024 4:35:08 AM

Author: SyncfusionBuild

ej2-vue/code-snippet/grid/column/column-header-headertext-all/index.js

@@ -9,7 +9,7 @@ new Vue({
   el: '#app',
   template: `
     <div id="app">
-      <ejs-button cssClass="e-success" v-on:click='changeHeaderText'>Change Header Text</ejs-button>
+      <ejs-button cssClass="e-success" v-on:click.native='changeHeaderText'>Change Header Text</ejs-button>
       <div style="padding: 20px 17px 0 0">
         <ejs-grid ref="grid" :dataSource='data' height='280'>
           <e-columns>

ej2-vue/code-snippet/grid/column/column-header-height/index.js

@@ -10,9 +10,9 @@ new Vue({
   template: `
       <div id="app">
         <div style="display: flex">
-          <ejs-button id="small" v-on:click="changeHeaderHeight">Change height 20px</ejs-button>
-          <ejs-button  id="medium"  v-on:click="changeHeaderHeight">Default height 42px</ejs-button>
-          <ejs-button id="big" v-on:click="changeHeaderHeight">Change height 60px</ejs-button>
+          <ejs-button id="small" v-on:click.native="changeHeaderHeight">Change height 20px</ejs-button>
+          <ejs-button  id="medium"  v-on:click.native="changeHeaderHeight">Default height 42px</ejs-button>
+          <ejs-button id="big" v-on:click.native="changeHeaderHeight">Change height 60px</ejs-button>
         </div>
         <div style="padding-top: 20px">
           <ejs-grid ref="grid" :dataSource="data">

ej2-vue/code-snippet/grid/column/column-header-refresh/index.js

@@ -9,7 +9,7 @@ new Vue({
   el: '#app',
   template: `
     <div id="app">
-      <ejs-button  v-on:click="refreshHeader">Refresh Header</ejs-button>
+      <ejs-button  v-on:click.native="refreshHeader">Refresh Header</ejs-button>
       <div style='padding:20px 0px 0px 0px'>
         <ejs-grid ref="grid" :dataSource="data">
           <e-columns>

ej2-vue/code-snippet/grid/column/column-header-text/index.js

@@ -27,7 +27,7 @@ new Vue({
         <label style="padding: 30px 17px 0 0">Enter new header text :</label>
         <ejs-textbox ref="textbox" required placeholder="Enter new header text" width="220">
         </ejs-textbox>
-        <ejs-button style="margin-left: 10px" id="buttons"  v-on:click="changeHeaderText" >
+        <ejs-button style="margin-left: 10px" id="buttons"  v-on:click.native="changeHeaderText" >
           Change
         </ejs-button>
       </div>

ej2-vue/code-snippet/grid/column/column-reorder-cs2/index.js

@@ -11,7 +11,7 @@ new Vue({
   el: '#app',
   template: `
     <div id="app">
- <ejs-button ref='button' cssClass='e-outline' v-on:click="reorderByIndex">Reorder column by index</ejs-button>
+ <ejs-button ref='button' cssClass='e-outline' v-on:click.native="reorderByIndex">Reorder column by index</ejs-button>
         <ejs-grid ref='grid' :dataSource="data" :allowReordering='true' height='315px'>
           <e-columns>
             <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>

ej2-vue/code-snippet/grid/column/default-cs32/index.js

@@ -12,8 +12,8 @@ new Vue({
   el: '#app',
   template: `
     <div id="app">
-    <ejs-button id='show' cssClass="e-info" v-on:click='show'> Show </ejs-button>
-    <ejs-button id='hide' cssClass="e-info" v-on:click='hide'> Hide </ejs-button>
+    <ejs-button id='show' cssClass="e-info" v-on:click.native='show'> Show </ejs-button>
+    <ejs-button id='hide' cssClass="e-info" v-on:click.native='hide'> Hide </ejs-button>
         <ejs-grid ref='grid' id='grid' :dataSource="data"  height='315px'>
           <e-columns>
             <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>

ej2-vue/code-snippet/grid/column/default-cs33/index.js

@@ -12,8 +12,8 @@ new Vue({
   el: '#app',
   template: `
     <div id="app">
-    <ejs-button id='show' cssClass="e-info" v-on:click='show'> Show </ejs-button>
-    <ejs-button id='hide' cssClass="e-info" v-on:click='hide'> Hide </ejs-button>
+    <ejs-button id='show' cssClass="e-info" v-on:click.native='show'> Show </ejs-button>
+    <ejs-button id='hide' cssClass="e-info" v-on:click.native='hide'> Hide </ejs-button>
         <ejs-grid ref='grid' id='grid' :dataSource="data"  height='315px'>
           <e-columns>
             <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>

ej2-vue/code-snippet/grid/column/frozen-column-cs1/index.js

@@ -16,7 +16,7 @@ new Vue({
     <div style="display: inline-block;">
       <label> Change the frozen columns: </label> 
       <ejs-numerictextbox ref='textbox' id='textbox' :min="0" :max="3" :validateDecimalOnType="true" floatLabelType="Auto" format="n"  width='100px' :value=2></ejs-numerictextbox>
-      <ejs-button ref='button' cssClass='e-outline' v-on:click="frozenColumnFn">Update</ejs-button>
+      <ejs-button ref='button' cssClass='e-outline' v-on:click.native="frozenColumnFn">Update</ejs-button>
     </div>
     <ejs-grid ref='grid' style="padding: 5px 5px"  :dataSource="data" height='315px' :frozenColumns='2'  :enableHover='false'>
       <e-columns>

ej2-vue/code-snippet/grid/page/default-page10/app-composition.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div>
-      <label style="padding: 30px 17px 0 0;font-weight: bold">Enter page count:</label>
+      <label style="padding: 30px 17px 0 0;font-weight: bold">Enter page size:</label>
       <ejs-textbox ref="textbox" width="120"></ejs-textbox>
       <ejs-button id="button" v-on:click="clickHandler">click button</ejs-button>
     </div>

ej2-vue/code-snippet/grid/page/default-page10/app.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div>
-      <label style="padding: 30px 17px 0 0;font-weight: bold">Enter page count:</label>
+      <label style="padding: 30px 17px 0 0;font-weight: bold">Enter page size:</label>
       <ejs-textbox ref="textbox" width="120"></ejs-textbox>
       <ejs-button id="button"  v-on:click="clickHandler">click button</ejs-button>
     </div>

ej2-vue/code-snippet/grid/page/default-page10/index.js

@@ -14,9 +14,9 @@ new Vue({
   template: `
   <div id="app">
     <div>
-      <label style="padding: 30px 17px 0 0;font-weight: bold">Enter page count:</label>
+      <label style="padding: 30px 17px 0 0;font-weight: bold">Enter page size:</label>
       <ejs-textbox ref="textbox" width="120"></ejs-textbox>
-      <ejs-button id="button"  v-on:click="clickHandler">click button</ejs-button>
+      <ejs-button id="button"  v-on:click.native="clickHandler">click button</ejs-button>
     </div>
     <div style="padding:20px 0 0 0">
       <ejs-grid ref="grid" id="PagingGrid" :dataSource="data" :allowPaging="true" height="325">

ej2-vue/code-snippet/grid/page/default-page4/index.js

@@ -15,7 +15,7 @@ new Vue({
         <div>
           <label style="padding: 30px 17px 0 0;font-weight: bold">Enter page index:</label>
           <ejs-textbox ref="textbox" width="120"></ejs-textbox>
-          <ejs-button  id="button"  v-on:click="clickHandler">click button</ejs-button>
+          <ejs-button  id="button"  v-on:click.native="clickHandler">click button</ejs-button>
         </div>
         <div style="padding:20px 0 0 0">
           <ejs-grid ref="grid" id="PagingGrid" :dataSource="data" :allowPaging="true" height="325">

ej2-vue/code-snippet/grid/page/default-page8/index.js

@@ -16,7 +16,7 @@ new Vue({
     <div>
       <label style="padding: 30px 17px 0 0;font-weight: bold">Enter current page:</label>
       <ejs-textbox ref="textbox" width="120"></ejs-textbox>
-      <ejs-button ref="button" id="button"  v-on:click="clickHandler">click button</ejs-button>
+      <ejs-button ref="button" id="button"  v-on:click.native="clickHandler">click button</ejs-button>
     </div>
     <div style="padding:20px 0 0 0">
       <ejs-grid ref="grid" id="PagingGrid" :dataSource="data" :allowPaging="true" height="325">

ej2-vue/code-snippet/grid/page/default-page9/index.js

@@ -16,7 +16,7 @@ new Vue({
     <div>
       <label style="padding: 30px 17px 0 0;font-weight: bold">Enter page count:</label>
       <ejs-textbox ref="textbox" width="120"></ejs-textbox>
-      <ejs-button id="button" v-on:click="clickHandler">click button</ejs-button>
+      <ejs-button id="button" v-on:click.native="clickHandler">click button</ejs-button>
     </div>
     <div style="padding:20px 0 0 0">
       <ejs-grid ref="grid" id="PagingGrid" :dataSource="data" :allowPaging="true" height="325">

ej2-vue/code-snippet/grid/select/selection-row-records/index.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import { GridPlugin } from "@syncfusion/ej2-vue-grids";
+import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
 import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
 import { data } from './datasource.js';
 

ej2-vue/code-snippet/grid/sort/sort-columns/index.js

@@ -24,7 +24,7 @@ new Vue({
       <ejs-dropdownlist ref='directionDropDown' id='directionDropDown' index="0" width="150" :dataSource="directionData"
         :fields='fields'></ejs-dropdownlist>
     </div>
-    <ejs-button style="margin: 5px" ref='button' cssClass='e-outline' v-on:click="addSortColumn">Add sort
+    <ejs-button style="margin: 5px" ref='button' cssClass='e-outline' v-on:click.native="addSortColumn">Add sort
       column</ejs-button>
     <ejs-grid ref='grid' style="margin-top: 10px" :dataSource='data' :allowSorting='true' :sortSettings='initialSort'
       height='315px'>

ej2-vue/code-snippet/grid/toolbar/custom-cs2/index.js

@@ -39,9 +39,9 @@ new Vue({
             template: `<ejs-toolbar>
                         <div>
                           <img :src="addImageSource" id="addImage" />
-                          <ejs-button ref='button' id="addButton" class="button" cssClass='e-outline' v-on:click="editAction">Add</ejs-button>
+                          <ejs-button ref='button' id="addButton" class="button" cssClass='e-outline' v-on:click.native="editAction">Add</ejs-button>
                           <img :src="deleteImageSource" id="deleteImage" />
-                          <ejs-button ref='button'  id="deleteButton" class="button" cssClass='e-outline' v-on:click="editAction">Delete</ejs-button>
+                          <ejs-button ref='button'  id="deleteButton" class="button" cssClass='e-outline' v-on:click.native="editAction">Delete</ejs-button>
                         </div>
                       </ejs-toolbar>`,
             data: function () {

ej2-vue/code-snippet/grid/toolbar/custom-cs4/index.js

@@ -32,9 +32,9 @@ new Vue({
           template: Vue.component('custom-toolbar', {
             template: `<ejs-toolbar>
                         <div id="toolbar">
-                          <ejs-button id="excelButton" cssClass='e-outline' v-on:click="exportAction">Excel Export</ejs-button>
-                          <ejs-button id="pdfButton" cssClass='e-outline' v-on:click="exportAction">Pdf Export</ejs-button>
-                          <ejs-button id="printButton" cssClass='e-outline' v-on:click="exportAction">Print</ejs-button>
+                          <ejs-button id="excelButton" cssClass='e-outline' v-on:click.native="exportAction">Excel Export</ejs-button>
+                          <ejs-button id="pdfButton" cssClass='e-outline' v-on:click.native="exportAction">Pdf Export</ejs-button>
+                          <ejs-button id="printButton" cssClass='e-outline' v-on:click.native="exportAction">Print</ejs-button>
                         </div>
                       </ejs-toolbar>`,
             data: function () {