Skip to content

Commit 2c93861

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-13-2024 7:30:07 AM
1 parent ec84433 commit 2c93861

File tree

38 files changed

+233
-71
lines changed

38 files changed

+233
-71
lines changed

‎ej2-vue/code-snippet/floating-action-button/styles-cs3/app.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
3+
<template>
4+
<div>
5+
<div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
6+
<!-- To render Floating Action Button -->
7+
<ejs-fab id='fab' iconCss='e-icons e-people' content='Contact' cssClass='custom-css' target='#targetElement'></ejs-fab>
8+
</div>
9+
</template>
10+
11+
<script>
12+
import Vue from 'vue';
13+
import { FabPlugin } from "@syncfusion/ej2-vue-buttons";
14+
import { enableRipple } from '@syncfusion/ej2-base';
15+
16+
enableRipple(true);
17+
Vue.use(FabPlugin);
18+
19+
export default {}
20+
</script>
21+
22+
<style>
23+
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
24+
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
25+
26+
/* Outline customization of fab */
27+
.custom-css.e-fab.e-btn {
28+
border-color: darkgrey;
29+
border-width: 4px;
30+
}
31+
</style>
32+
33+

‎ej2-vue/code-snippet/floating-action-button/styles-cs3/index.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* Outline customization of fab */
2+
.custom-css.e-fab.e-btn {
3+
border-color: darkgrey;
4+
border-width: 4px;
5+
}

‎ej2-vue/code-snippet/floating-action-button/styles-cs3/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
7+
<title>EJ2 Vue Sample</title>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<meta name="description" content="Typescript UI Controls" />
11+
<meta name="author" content="Syncfusion" />
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
14+
<link href="index.css" rel="stylesheet" />
15+
<script src="systemjs.config.js"></script>
16+
</head>
17+
18+
<body>
19+
<div id='app'>Loading....</div>
20+
</body>
21+
<style>
22+
#app {
23+
color: #008cff;
24+
height: 40px;
25+
left: 45%;
26+
position: absolute;
27+
top: 45%;
28+
width: 30%;
29+
}
30+
</style>
31+
</html>
32+

‎ej2-vue/code-snippet/floating-action-button/styles-cs3/index.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
import Vue from 'vue';
3+
import { FabPlugin } from "@syncfusion/ej2-vue-buttons";
4+
import { enableRipple } from '@syncfusion/ej2-base';
5+
6+
enableRipple(true);
7+
Vue.use(FabPlugin);
8+
9+
10+
new Vue({
11+
el: '#app',
12+
template: `
13+
<div>
14+
<div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
15+
<!-- To render Floating Action Button -->
16+
<ejs-fab id='fab' iconCss='e-icons e-people' content='Contact' cssClass='custom-css' target='#targetElement'></ejs-fab>
17+
</div>
18+
`,
19+
20+
});

‎ej2-vue/code-snippet/floating-action-button/styles-cs3/systemjs.config.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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/20.3.56/"
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-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
21+
"@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
22+
}
23+
});
24+
25+
System.import('index.js');

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
</template>
1313

1414
<script setup>
15-
import { provide } from "vue";
16-
15+
import { provide, ref } from "vue";
1716
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, Edit, Group } from "@syncfusion/ej2-vue-grids";
1817
import { data } from './datasource.js';
18+
const grid = ref(null)
1919
const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
2020
const selectionSettings = { type: 'Multiple' };
2121
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
@@ -25,36 +25,36 @@ const keyPressed = function (e) {
2525
switch (key) {
2626
case 'n':
2727
e.preventDefault();
28-
this.$refs.grid.addRecord();
28+
grid.value.addRecord();
2929
break;
3030
case 's':
3131
if (e.ctrlKey) {
3232
e.preventDefault();
33-
this.$refs.grid.endEdit();
33+
grid.value.endEdit();
3434
}
3535
break;
3636
case 'd':
3737
if (e.ctrlKey) {
3838
e.preventDefault();
39-
this.$refs.grid.deleteRecord();
39+
grid.value.deleteRecord();
4040
}
4141
break;
4242
case 'a':
4343
if (e.ctrlKey) {
4444
e.preventDefault();
45-
this.$refs.grid.selectRowsByRange(0);
45+
grid.value.selectRowsByRange(0);
4646
}
4747
break;
4848
case 'g':
4949
if (e.ctrlKey) {
5050
e.preventDefault();
51-
this.$refs.grid.groupColumn('CustomerID');
51+
grid.value.groupColumn('CustomerID');
5252
}
5353
break;
5454
case 'enter':
5555
e.preventDefault();
5656
e.cancel = true;
57-
this.$refs.grid.refreshColumns();
57+
grid.value.refreshColumns();
5858
break;
5959
case 'insert':
6060
e.preventDefault();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const app = createApp();
3131
}
3232
}
3333
const customAggregateFn = function () {
34-
const distinct = DataUtil.distinct(this.data, 'ShipCountry', true);
34+
const distinct = DataUtil.distinct(data, 'ShipCountry', true);
3535
return distinct.length;
3636
}
3737
provide('grid', [Aggregate]);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
2323
import { GridComponent, ColumnsDirective, ColumnDirective, AggregatesDirective, AggregateDirective, Group, Aggregate } from "@syncfusion/ej2-vue-grids";
2424
import { data } from './datasource.js';
25+
import { createApp } from "vue";
2526
const app = createApp();
2627
2728
export default {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const ddlData = [
3232
{ text: 'None', value: 'None' },
3333
];
3434
const change = function (args) {
35-
grid.value.gridLines = args.value
35+
grid.value.ej2Instances.gridLines = args.value
3636
}
3737
</script>
3838
<style>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ components: {
4444
},
4545
methods: {
4646
change: function(args) {
47-
this.$refs.grid.gridLines= args.value
47+
this.$refs.grid.ej2Instances.gridLines= args.value
4848
}
4949
},
5050
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { ref } from 'vue';
2121
const tooltip = ref(null);
2222
const beforeRender = function (args) {
2323
if (args.target.classList.contains('e-rowcell')) {
24-
tooltip.value.content = 'The value is "' + args.target.innerText + '" ';
24+
tooltip.value.ej2Instances.content = 'The value is "' + args.target.innerText + '" ';
2525
}
2626
}
2727
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default {
3333
methods: {
3434
beforeRender: function (args) {
3535
if (args.target.classList.contains('e-rowcell')) {
36-
this.$refs.tooltip.content = 'The value is "' + args.target.innerText + '" ';
36+
this.$refs.tooltip.ej2Instances.content = 'The value is "' + args.target.innerText + '" ';
3737
}
3838
}
3939
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const alignmentData = [
3030
{ text: 'Justify', value: 'Justify' },
3131
];
3232
const change = function (args) {
33-
grid.value.columns.forEach(col => {
33+
grid.value.ej2Instances.columns.forEach(col => {
3434
col.textAlign = args.value;
3535
});
3636
grid.value.refreshColumns();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app">
3-
<ejs-grid :dataSource="data" :query="query" :allowPaging="true">
3+
<ejs-grid :dataSource="data" :query="query">
44
<e-columns>
55
<e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column>
66
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app">
3-
<ejs-grid :dataSource="data" :query='query' allowPaging=true>
3+
<ejs-grid :dataSource="data" :query='query'>
44
<e-columns>
55
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
66
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<template>
22
<div id="app">
3-
<ejs-grid ref='grid' :dataSource="data" height='315px' :rowDataBound='rowDataBound' allowPaging="true"
4-
:pageSettings="pageSettings">
3+
<ejs-grid ref='grid' :dataSource="data" height='315px' :rowDataBound='rowDataBound' allowPaging="true">
54
<e-columns>
65
<e-column headerText='S.No' width=90 textAlign='Center'></e-column>
76
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
@@ -14,16 +13,14 @@
1413
</template>
1514
<script setup>
1615
import { provide, ref } from "vue";
17-
1816
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page } from "@syncfusion/ej2-vue-grids";
1917
import { data } from './datasource.js';
2018
const grid = ref(null);
2119
const rowDataBound = function (args) {
2220
if (args.row) {
23-
let grid = grid.value.ej2Instances;
2421
var rowIndex = parseInt(args.row.getAttribute('aria-rowIndex'));
25-
var currentPageNumber = grid.pageSettings.currentPage;
26-
var pageSize = grid.pageSettings.pageSize;
22+
var currentPageNumber = grid.value.ej2Instances.pageSettings.currentPage;
23+
var pageSize = grid.value.ej2Instances.pageSettings.pageSize;
2724
var startIndex = (currentPageNumber - 1) * pageSize;
2825
args.row.querySelector('.e-rowcell').innerHTML = (
2926
startIndex + rowIndex

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<template>
22
<div id="app">
3-
<ejs-grid ref='grid' :dataSource="data" height='315px' :rowDataBound='rowDataBound' allowPaging="true"
4-
:pageSettings="pageSettings">
3+
<ejs-grid ref='grid' :dataSource="data" height='315px' :rowDataBound='rowDataBound' allowPaging="true">
54
<e-columns>
65
<e-column headerText='S.No' width=90 textAlign='Center'></e-column>
76
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,19 @@ import { provide, ref } from "vue";
1919
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Resize } from "@syncfusion/ej2-vue-grids";
2020
import { data } from './datasource.js';
2121
const grid = ref(null);
22+
const message = ref("")
2223
provide('grid', [Resize]);
2324
const resizeStart = function (args) {
24-
this.message = `resizeStart event triggered`;
25+
message.value = `resizeStart event triggered`;
2526
if (args.column.field === 'OrderID') {
2627
args.cancel = true;
2728
}
2829
}
2930
const resizing = function (args) {
30-
this.message = `resizing event triggered`;
31+
message.value = `resizing event triggered`;
3132
}
3233
const resizeStop = function (args) {
33-
this.message = `resizeStop event triggered`;
34+
message.value = `resizeStop event triggered`;
3435
const headerCell = grid.value.getColumnHeaderByField(args.column.field);
3536
headerCell.classList.add('customcss');
3637
const columnCells = grid.value.getContentTable()

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ components: {
2727
},
2828
data() {
2929
return {
30-
data: data
30+
data: data,
31+
message:""
3132
};
3233
},
3334
provide: {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const grid = ref(null);
2727
{ text: 'Auto', value: 'Auto' },
2828
]
2929
const change = function(args) {
30-
grid.value.resizeSettings = {mode: args.value}
30+
grid.value.ej2Instances.resizeSettings = {mode: args.value}
3131
}
3232
provide('grid', [Resize]);
3333
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ components: {
4040
},
4141
methods: {
4242
change: function(args) {
43-
this.$refs.grid.resizeSettings = {mode: args.value}
43+
this.$refs.grid.ej2Instances.resizeSettings = {mode: args.value}
4444
}
4545
},
4646
provide: {

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,15 @@ import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';
2323
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
2424
import { ref } from "vue";
2525
const dialog = ref(null);
26+
const selectedRecord = ref(null)
27+
const header = "Selected Row Details"
2628
const data = employeeData;
2729
const showDetails = function(rowData) {
28-
this.selectedRecord = rowData;
30+
selectedRecord.value = rowData;
2931
dialog.value.show();
3032
}
3133
const contentShow = function() {
32-
if (this.selectedRecord) {
34+
if (selectedRecord.value) {
3335
const dialogContent = `
3436
<p><b>EmployeeID:</b>${this.selectedRecord.EmployeeID}</p>
3537
<p><b>FirstName:</b>${this.selectedRecord.FirstName}</p>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { provide } from "vue";
1717
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Group } from "@syncfusion/ej2-vue-grids";
1818
import { ChipList } from '@syncfusion/ej2-buttons';
1919
import { data } from './datasource.js';
20-
const groupOptions = { columns: ['CustomerID'] };
20+
const groupOptions = { columns: ['CustomerID'], captionTemplate: captionTemplate };
2121
const captionTemplate = '<div class="groupChip">${key}</div>';
2222
const dataBound = () => {
2323
var groupCaptions = document.getElementsByClassName('groupChip');

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { provide } from "vue";
1515
1616
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Group } from "@syncfusion/ej2-vue-grids";
1717
import { data } from './datasource.js';
18-
const groupOptions = { columns: ['CustomerID'] };
18+
const groupOptions = { columns: ['CustomerID'], captionTemplate: captionTemplate };
1919
const captionTemplate = '<span class="groupItems"> ${key } - ${count } Records : ${headerText} </span>';
2020
provide('grid', [Group]);
2121
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
import { provide } from "vue";
1515
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Group } from "@syncfusion/ej2-vue-grids";
1616
import { data } from './datasource.js';
17-
const groupOptions = { columns: ['CustomerID', 'ShipCity'] };
17+
const groupOptions = { columns: ['CustomerID', 'ShipCity'], captionTemplate: captionTemplate };
1818
const captionTemplate = '<span class="groupItems"> ${headerText} - ${key } : ${count} Items </span>';
1919
provide('grid', [Group]);
2020
</script>

0 commit comments

Comments
 (0)