Skip to content

Commit c3a2166

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 03-22-2025 4:30:44 AM
1 parent 3610279 commit c3a2166

File tree

32 files changed

+1816
-8
lines changed

32 files changed

+1816
-8
lines changed

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div id="app">
3+
<ejs-grid ref='grid' :dataSource="data" :editSettings="editSettings" :toolbar="toolbar" :frozenColumns="2" allowPaging="true" :pageSettings="pageSettings">
4+
<e-columns>
5+
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 isPrimaryKey="true"></e-column>
6+
<e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right' :edit="datePickerParams"></e-column>
7+
<e-column field='CustomerID' headerText='Customer ID' width=100 freeze='Left'></e-column>
8+
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
9+
</e-columns>
10+
</ejs-grid>
11+
</div>
12+
</template>
13+
<script setup>
14+
import { provide } from "vue";
15+
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, Edit, Freeze, Page } from "@syncfusion/ej2-vue-grids";
16+
import { data } from './datasource.js';
17+
import { DatePicker } from '@syncfusion/ej2-calendars';
18+
let datepickerObj;
19+
function createDatePicker() {
20+
return document.createElement('input');
21+
}
22+
function destroyDatePicker() {
23+
if (datepickerObj) {
24+
datepickerObj.destroy();
25+
}
26+
}
27+
function readDatePicker() {
28+
return datepickerObj ? datepickerObj.value : null;
29+
}
30+
function writeDatePicker(args) {
31+
datepickerObj = new DatePicker({
32+
value: new Date(args.rowData[args.column.field]),
33+
floatLabelType: 'Never',
34+
});
35+
datepickerObj.appendTo(args.element);
36+
}
37+
const datePickerParams = {
38+
create: createDatePicker,
39+
destroy: destroyDatePicker,
40+
read: readDatePicker,
41+
write: writeDatePicker
42+
};
43+
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
44+
const toolbar = ["Add", "Edit", "Delete", "Update", "Cancel"];
45+
const pageSettings={ pageCount: 5 };
46+
provide('grid', [Toolbar, Edit, Freeze, Page]);
47+
</script>
48+
<style>
49+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
50+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
51+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
52+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
53+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
54+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
55+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
56+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
57+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
58+
</style>

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<div id="app">
3+
<ejs-grid ref='grid' :dataSource="data" :editSettings="editSettings" :toolbar="toolbar" :frozenColumns="2" allowPaging="true" :pageSettings="pageSettings">
4+
<e-columns>
5+
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 isPrimaryKey="true"></e-column>
6+
<e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right' :edit="datePickerParams"></e-column>
7+
<e-column field='CustomerID' headerText='Customer ID' width=100 freeze='Left'></e-column>
8+
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
9+
</e-columns>
10+
</ejs-grid>
11+
</div>
12+
</template>
13+
<script>
14+
15+
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, Edit, Freeze, Page } from "@syncfusion/ej2-vue-grids";
16+
import { data } from './datasource.js';
17+
import { DatePicker } from '@syncfusion/ej2-calendars';
18+
export default {
19+
name: "App",
20+
components: {
21+
"ejs-grid":GridComponent,
22+
"e-columns":ColumnsDirective,
23+
"e-column":ColumnDirective
24+
},
25+
data() {
26+
return {
27+
data: data,
28+
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
29+
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
30+
pageSettings:{ pageCount: 5 },
31+
datePickerParams: {
32+
create: this.createDatePicker,
33+
destroy: this.destroyDatePicker,
34+
read: this.readDatePicker,
35+
write: this.writeDatePicker,
36+
},
37+
};
38+
},
39+
methods: {
40+
createDatePicker() {
41+
return document.createElement('input');
42+
},
43+
destroyDatePicker() {
44+
if (this.datepickerObj) {
45+
this.datepickerObj.destroy();
46+
}
47+
},
48+
readDatePicker() {
49+
return this.datepickerObj.value;
50+
},
51+
writeDatePicker(args) {
52+
this.datepickerObj = new DatePicker({
53+
value: new Date(args.rowData[args.column.field]),
54+
floatLabelType: 'Never',
55+
});
56+
this.datepickerObj.appendTo(args.element);
57+
},
58+
},
59+
provide: {
60+
grid: [Toolbar, Edit, Freeze, Page]
61+
}
62+
}
63+
</script>
64+
<style>
65+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
66+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
67+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
68+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
69+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
70+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
71+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
72+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
73+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
74+
</style>

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
define(["require", "exports"], function (require, exports) {
2+
"use strict";
3+
Object.defineProperty(exports, "__esModule", { value: true });
4+
exports.data = [
5+
{
6+
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
7+
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
8+
ShipRegion: 'CJ', Mask: '1111', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
9+
},
10+
{
11+
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
12+
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
13+
ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
14+
},
15+
{
16+
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
17+
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
18+
ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
19+
},
20+
{
21+
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
22+
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
23+
ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
24+
},
25+
{
26+
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
27+
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
28+
ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
29+
},
30+
{
31+
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
32+
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
33+
ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
34+
},
35+
{
36+
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
37+
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
38+
ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
39+
},
40+
{
41+
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
42+
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
43+
ShipRegion: 'CJ', Mask: '8888', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
44+
},
45+
{
46+
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
47+
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
48+
ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
49+
},
50+
{
51+
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
52+
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
53+
ShipRegion: 'Táchira', Mask: '1234', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
54+
},
55+
{
56+
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
57+
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
58+
ShipRegion: 'CJ', Mask: '2345', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
59+
},
60+
{
61+
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
62+
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
63+
ShipRegion: 'CJ', Mask: '3456', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
64+
},
65+
{
66+
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
67+
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
68+
ShipRegion: 'CJ', Mask: '4567', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
69+
},
70+
{
71+
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
72+
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
73+
ShipRegion: 'RJ', Mask: '5678', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
74+
},
75+
{
76+
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
77+
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
78+
ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
79+
}
80+
];
81+
});

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.e-grid .e-fixedfreeze.e-freezeleftborder{
2+
border-left-color: rgb(9, 209, 9) !important;
3+
}
4+
5+
.e-grid .e-fixedfreeze.e-freezerightborder{
6+
border-right-color: rgb(10, 224, 10) !important;
7+
}
8+
9+
.e-grid .e-rightfreeze.e-freezerightborder {
10+
border-left-color: rgb(19, 228, 243) !important;
11+
}
12+
13+
.e-grid .e-leftfreeze.e-freezeleftborder {
14+
border-right-color: rgb(198, 30, 204) !important;
15+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
6+
<title>EJ2 Vue Sample</title>
7+
<meta charset="utf-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<meta name="description" content="Typescript UI Controls" />
10+
<meta name="author" content="Syncfusion" />
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
12+
<link href="https://cdn.syncfusion.com/ej2/25.1.35/tailwind.css" rel="stylesheet" />
13+
<link href="index.css" rel="stylesheet" />
14+
<script src="systemjs.config.js"></script>
15+
</head>
16+
17+
<body>
18+
<div id='app'>Loading....</div>
19+
</body>
20+
21+
</html>

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import Vue from "vue";
2+
import { GridPlugin, Freeze,Toolbar, Edit, Page } from "@syncfusion/ej2-vue-grids";
3+
import { data } from './datasource.js';
4+
import { DatePicker } from '@syncfusion/ej2-calendars';
5+
Vue.use(GridPlugin);
6+
7+
new Vue({
8+
el: '#app',
9+
template: `
10+
<div id="app">
11+
<ejs-grid ref='grid' :dataSource="data" :editSettings="editSettings" :toolbar="toolbar" :frozenColumns="2" allowPaging="true" :pageSettings="pageSettings">
12+
<e-columns>
13+
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 isPrimaryKey="true"></e-column>
14+
<e-column field='OrderDate' headerText='Order Date' width=100 format='yMd' textAlign='Right' :edit="datePickerParams"></e-column>
15+
<e-column field='CustomerID' headerText='Customer ID' width=100 freeze='Left'></e-column>
16+
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
17+
</e-columns>
18+
</ejs-grid>
19+
</div>`,
20+
21+
data() {
22+
return {
23+
data: data,
24+
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
25+
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
26+
pageSettings:{ pageCount: 5 },
27+
datePickerParams: {
28+
create: this.createDatePicker,
29+
destroy: this.destroyDatePicker,
30+
read: this.readDatePicker,
31+
write: this.writeDatePicker,
32+
},
33+
};
34+
},
35+
methods: {
36+
createDatePicker() {
37+
return document.createElement('input');
38+
},
39+
destroyDatePicker() {
40+
if (this.datepickerObj) {
41+
this.datepickerObj.destroy();
42+
}
43+
},
44+
readDatePicker() {
45+
return this.datepickerObj.value;
46+
},
47+
writeDatePicker(args) {
48+
this.datepickerObj = new DatePicker({
49+
value: new Date(args.rowData[args.column.field]),
50+
floatLabelType: 'Never',
51+
});
52+
this.datepickerObj.appendTo(args.element);
53+
},
54+
},
55+
provide: {
56+
grid: [Toolbar, Edit, Freeze, Page]
57+
}
58+
});

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/25.1.35/"
14+
},
15+
map: {
16+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
17+
vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
20+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
21+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
22+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
23+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
24+
"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
25+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
26+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
27+
"@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
28+
"@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
29+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
30+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
31+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
32+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
33+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
34+
"@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
35+
"@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
36+
"@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
37+
"@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js",
38+
}
39+
});
40+
41+
System.import('index.js');

0 commit comments

Comments
 (0)