DOCINFRA-2341_merged_using_automation

ej2-vue/code-snippet/grid/column/frozen-column-cs5/app-composition.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="app">
+    <ejs-grid ref='grid' :dataSource="data" :editSettings="editSettings" :toolbar="toolbar" :frozenColumns="2" allowPaging="true" :pageSettings="pageSettings">
+      <e-columns>
+        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 isPrimaryKey="true"></e-column>
+        <e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right' :edit="datePickerParams"></e-column>
+        <e-column field='CustomerID' headerText='Customer ID' width=100 freeze='Left'></e-column>
+        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
+      </e-columns>
+    </ejs-grid>
+  </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, Edit, Freeze, Page } from "@syncfusion/ej2-vue-grids";
+import { data } from './datasource.js';
+import { DatePicker } from '@syncfusion/ej2-calendars';
+let datepickerObj;
+function createDatePicker() {
+  return document.createElement('input');
+}
+function destroyDatePicker() {
+  if (datepickerObj) {
+    datepickerObj.destroy();
+  }
+}
+function readDatePicker() {
+  return datepickerObj ? datepickerObj.value : null;
+}
+function writeDatePicker(args) {
+  datepickerObj = new DatePicker({
+    value: new Date(args.rowData[args.column.field]),
+    floatLabelType: 'Never',
+  });
+  datepickerObj.appendTo(args.element);
+}
+const datePickerParams = {
+  create: createDatePicker,
+  destroy: destroyDatePicker,
+  read: readDatePicker,
+  write: writeDatePicker
+};
+const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
+const toolbar = ["Add", "Edit", "Delete", "Update", "Cancel"];
+const pageSettings={ pageCount: 5 };
+provide('grid',  [Toolbar, Edit, Freeze, Page]);
+</script>
+<style>
+  @import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
+</style>

ej2-vue/code-snippet/grid/column/frozen-column-cs5/app.vue

@@ -0,0 +1,74 @@
+<template>
+  <div id="app">
+    <ejs-grid ref='grid' :dataSource="data" :editSettings="editSettings" :toolbar="toolbar" :frozenColumns="2" allowPaging="true" :pageSettings="pageSettings">
+      <e-columns>
+        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 isPrimaryKey="true"></e-column>
+        <e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right' :edit="datePickerParams"></e-column>
+        <e-column field='CustomerID' headerText='Customer ID' width=100 freeze='Left'></e-column>
+        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
+      </e-columns>
+    </ejs-grid>
+  </div>
+</template>
+<script>
+
+import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, Edit, Freeze, Page } from "@syncfusion/ej2-vue-grids";
+import { data } from './datasource.js';
+import { DatePicker } from '@syncfusion/ej2-calendars';
+export default {
+  name: "App",
+  components: {
+    "ejs-grid":GridComponent,
+    "e-columns":ColumnsDirective,
+    "e-column":ColumnDirective
+  },
+  data() {
+    return {
+      data: data,
+      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
+      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
+      pageSettings:{ pageCount: 5 },
+      datePickerParams: {
+        create: this.createDatePicker,
+        destroy: this.destroyDatePicker,
+        read: this.readDatePicker,
+        write: this.writeDatePicker,
+      },
+    };
+  },
+  methods: {
+    createDatePicker() {
+      return document.createElement('input');
+    },
+    destroyDatePicker() {
+      if (this.datepickerObj) {
+        this.datepickerObj.destroy();
+      }
+    },
+    readDatePicker() {
+      return this.datepickerObj.value;
+    },
+    writeDatePicker(args) {
+      this.datepickerObj = new DatePicker({
+        value: new Date(args.rowData[args.column.field]),
+        floatLabelType: 'Never',
+      });
+      this.datepickerObj.appendTo(args.element);
+    },
+  },
+  provide: {
+    grid: [Toolbar, Edit, Freeze, Page]
+  }
+}
+</script>
+<style>
+  @import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
+  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
+</style>

ej2-vue/code-snippet/grid/column/frozen-column-cs5/datasource.js

@@ -0,0 +1,81 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.data = [
+       {
+          OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
+          ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
+          ShipRegion: 'CJ', Mask: '1111', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
+       },
+       {
+          OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
+          ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
+          ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
+       },
+       {
+          OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
+          ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+          ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
+       },
+       {
+          OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
+          ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
+          ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
+       },
+       {
+          OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
+          ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
+          ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
+       },
+       {
+          OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
+          ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+          ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
+       },
+       {
+          OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
+          ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
+          ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
+       },
+       {
+          OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
+          ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
+          ShipRegion: 'CJ', Mask: '8888', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
+       },
+       {
+          OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
+          ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
+          ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
+       },
+       {
+          OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
+          ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
+          ShipRegion: 'Táchira', Mask: '1234', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
+       },
+       {
+          OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
+          ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
+          ShipRegion: 'CJ', Mask: '2345', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
+       },
+       {
+          OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
+          ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
+          ShipRegion: 'CJ', Mask: '3456', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
+       },
+       {
+          OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
+          ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
+          ShipRegion: 'CJ', Mask: '4567', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
+       },
+       {
+          OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
+          ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
+          ShipRegion: 'RJ', Mask: '5678', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
+       },
+       {
+          OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
+          ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
+          ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
+       }
+   ];
+ });

ej2-vue/code-snippet/grid/column/frozen-column-cs5/index.css

@@ -0,0 +1,15 @@
+.e-grid .e-fixedfreeze.e-freezeleftborder{
+    border-left-color: rgb(9, 209, 9) !important; 
+}
+
+.e-grid .e-fixedfreeze.e-freezerightborder{
+    border-right-color: rgb(10, 224, 10) !important;
+}
+
+.e-grid .e-rightfreeze.e-freezerightborder {
+    border-left-color: rgb(19, 228, 243) !important;
+}
+
+.e-grid .e-leftfreeze.e-freezeleftborder {
+    border-right-color: rgb(198, 30, 204) !important;
+}

ej2-vue/code-snippet/grid/column/frozen-column-cs5/index.html

@@ -0,0 +1,21 @@
+<!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/25.1.35/tailwind.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>

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

@@ -0,0 +1,58 @@
+import Vue from "vue";
+import { GridPlugin, Freeze,Toolbar, Edit, Page } from "@syncfusion/ej2-vue-grids";
+import { data } from './datasource.js';
+import { DatePicker } from '@syncfusion/ej2-calendars';
+Vue.use(GridPlugin);
+
+new Vue({
+  el: '#app',
+  template: `
+  <div id="app">
+    <ejs-grid ref='grid' :dataSource="data" :editSettings="editSettings" :toolbar="toolbar" :frozenColumns="2" allowPaging="true" :pageSettings="pageSettings">
+      <e-columns>
+        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 isPrimaryKey="true"></e-column>
+        <e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right' :edit="datePickerParams"></e-column>
+        <e-column field='CustomerID' headerText='Customer ID' width=100 freeze='Left'></e-column>
+        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
+      </e-columns>
+    </ejs-grid>
+  </div>`,
+
+  data() {
+    return {
+      data: data,
+      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
+      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
+      pageSettings:{ pageCount: 5 },
+      datePickerParams: {
+        create: this.createDatePicker,
+        destroy: this.destroyDatePicker,
+        read: this.readDatePicker,
+        write: this.writeDatePicker,
+      },
+    };
+  },
+  methods: {
+    createDatePicker() {
+      return document.createElement('input');
+    },
+    destroyDatePicker() {
+      if (this.datepickerObj) {
+        this.datepickerObj.destroy();
+      }
+    },
+    readDatePicker() {
+      return this.datepickerObj.value;
+    },
+    writeDatePicker(args) {
+      this.datepickerObj = new DatePicker({
+        value: new Date(args.rowData[args.column.field]),
+        floatLabelType: 'Never',
+      });
+      this.datepickerObj.appendTo(args.element);
+    },
+  },
+  provide: {
+    grid: [Toolbar, Edit, Freeze, Page]
+  }
+});

ej2-vue/code-snippet/grid/column/frozen-column-cs5/systemjs.config.js

@@ -0,0 +1,41 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/25.1.35/"
+    },
+    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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.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-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js",
+    }
+});
+
+System.import('index.js');