Skip to content

Commit 2daa093

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 06-29-2024 4:30:12 AM
1 parent f4bf228 commit 2daa093

File tree

116 files changed

+2660
-1312
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

116 files changed

+2660
-1312
lines changed

‎ej2-vue/code-snippet/gantt/how-to/draganddrop-cs1/app-composition.vue

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const editSettings = {
3939
allowEditing: true
4040
};
4141
const nodeDragStop = function (args) {
42+
args.cancel = true;
4243
var ganttChart = gantt.value.ej2Instances;
4344
var chartEle = closest(args.target, '.e-chart-row');
4445
var gridEle = closest(args.target, '.e-row');
@@ -47,8 +48,8 @@ const nodeDragStop = function (args) {
4748
ganttChart.selectRow(index);
4849
}
4950
if(chartEle){
50-
var index = chartEle.ariaRowIndex;
51-
ganttChart.selectRow(Number(index));
51+
var index = chartEle.rowIndex;
52+
ganttChart.selectRow(index);
5253
}
5354
var record= args.draggedNodeData;
5455
var selectedData = ganttChart.flatData[ganttChart.selectedRowIndex];
@@ -65,11 +66,7 @@ const nodeDragStop = function (args) {
6566
TaskID: selectedData.taskData.TaskID,
6667
resources: resources
6768
};
68-
ganttChart.updateRecordByID(data);
69-
var elements = document.querySelectorAll('.e-drag-item');
70-
while (elements.length > 0 && elements[0].parentNode) {
71-
elements[0].parentNode.removeChild(elements[0]);
72-
}
69+
ganttChart.updateRecordByID(data);
7370
}
7471
}
7572
provide('gantt', [Edit, Selection]);

‎ej2-vue/code-snippet/gantt/how-to/draganddrop-cs1/app.vue

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ components: {
5555
},
5656
methods: {
5757
nodeDragStop: function (args) {
58+
args.cancel = true;
5859
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
5960
var chartEle = closest(args.target, '.e-chart-row');
6061
var gridEle = closest(args.target, '.e-row');
@@ -63,8 +64,8 @@ components: {
6364
ganttChart.selectRow(index);
6465
}
6566
if(chartEle){
66-
var index = chartEle.ariaRowIndex;
67-
ganttChart.selectRow(Number(index));
67+
var index = chartEle.rowIndex;
68+
ganttChart.selectRow(index);
6869
}
6970
var record= args.draggedNodeData;
7071
var selectedData = ganttChart.flatData[ganttChart.selectedRowIndex];
@@ -81,11 +82,7 @@ components: {
8182
TaskID: selectedData.taskData.TaskID,
8283
resources: resources
8384
};
84-
ganttChart.updateRecordByID(data);
85-
var elements = document.querySelectorAll('.e-drag-item');
86-
while (elements.length > 0 && elements[0].parentNode) {
87-
elements[0].parentNode.removeChild(elements[0]);
88-
}
85+
ganttChart.updateRecordByID(data);
8986
}
9087
}
9188
}

‎ej2-vue/code-snippet/gantt/how-to/draganddrop-cs1/index.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,18 @@ new Vue({
5555
},
5656
methods: {
5757
nodeDragStop: function (args) {
58+
args.cancel = true;
5859
var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
5960
var chartEle = closest(args.target, '.e-chart-row');
6061
var gridEle = closest(args.target, '.e-row');
6162
if(gridEle) {
6263
var index = ganttChart.treeGrid.getRows().indexOf(gridEle);
6364
ganttChart.selectRow(index);
6465
}
66+
if(chartEle){
67+
var index = chartEle.rowIndex;
68+
ganttChart.selectRow(index);
69+
}
6570
var record= args.draggedNodeData;
6671
var selectedData = ganttChart.flatData[ganttChart.selectedRowIndex];
6772
var selectedDataResource = selectedData.taskData.resources;
@@ -78,10 +83,6 @@ new Vue({
7883
resources: resources
7984
};
8085
ganttChart.updateRecordByID(data);
81-
var elements = document.querySelectorAll('.e-drag-item');
82-
while (elements.length > 0 && elements[0].parentNode) {
83-
elements[0].parentNode.removeChild(elements[0]);
84-
}
8586
}
8687
}
8788
}

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<ejs-grid :dataSource='data' height='315'>
44
<e-columns>
55
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
6-
<e-column field='Name' headerText='Full Name' :valueAccessor= 'valueAccess' width=120></e-column>
6+
<e-column field='Name' headerText='Full Name' :valueAccessor='valueAccess' width=120></e-column>
77
<e-column field='Title' headerText='Title' width=150></e-column>
88
</e-columns>
99
</ejs-grid>
@@ -12,10 +12,18 @@
1212
<script setup>
1313
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
1414
import { data } from './datasource.js';
15-
const valueAccess = function(field, data, column) {
16-
return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
17-
}
15+
const valueAccess = function (field, data) {
16+
return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
17+
}
1818
</script>
1919
<style>
20-
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
20+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
21+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
22+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
23+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
24+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
25+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
26+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
27+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
28+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
2129
</style>

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

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
11
<template>
2-
<div id="app">
3-
<ejs-grid :dataSource='data' height='315'>
4-
<e-columns>
5-
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
6-
<e-column field='Name' headerText='Full Name' :valueAccessor= 'valueAccess' width=120></e-column>
7-
<e-column field='Title' headerText='Title' width=150></e-column>
8-
</e-columns>
9-
</ejs-grid>
10-
</div>
2+
<div id="app">
3+
<ejs-grid :dataSource='data' height='315'>
4+
<e-columns>
5+
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
6+
<e-column field='Name' headerText='Full Name' :valueAccessor='valueAccess' width=120></e-column>
7+
<e-column field='Title' headerText='Title' width=150></e-column>
8+
</e-columns>
9+
</ejs-grid>
10+
</div>
1111
</template>
1212
<script>
1313
1414
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
1515
import { data } from './datasource.js';
1616
export default {
17-
name: "App",
18-
components: {
19-
"ejs-grid":GridComponent,
20-
"e-columns":ColumnsDirective,
21-
"e-column":ColumnDirective
22-
},
17+
name: "App",
18+
components: {
19+
"ejs-grid": GridComponent,
20+
"e-columns": ColumnsDirective,
21+
"e-column": ColumnDirective
22+
},
2323
data() {
2424
return {
2525
data: data
2626
};
2727
},
2828
methods: {
29-
valueAccess: function(field, data, column) {
30-
return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
29+
valueAccess: function (field, data) {
30+
return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
3131
}
3232
}
3333
}
3434
</script>
3535
<style>
36-
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
36+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
37+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
38+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
39+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
40+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
41+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
42+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
43+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
44+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
3745
</style>

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

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
<template>
2-
<div id="app">
3-
<ejs-grid ref='grid' :dataSource="data" :allowResizing='true' height='400px' width='850px' :autoFit='true'>
4-
<e-columns>
5-
<e-column field='OrderID' headerText='Order ID' minWidth='100' width='150' maxWidth='200' textAlign='Right'></e-column>
6-
<e-column field='CustomerID' headerText='Customer ID' minWidth='8' width='150'></e-column>
7-
<e-column field='Freight' headerText='Freight' minWidth='8' width='120' format='C2' textAlign='Right'></e-column>
8-
<e-column field='ShipCity' headerText='Ship City' :allowResizing = 'false' width='150' textAlign='Right'></e-column>
9-
<e-column field='ShipCountry' headerText='Ship Country' minWidth='8' width='150'></e-column>
10-
</e-columns>
11-
</ejs-grid>
12-
</div>
2+
<div id="app">
3+
<ejs-grid ref='grid' :dataSource="data" :allowResizing='true' height='400px' width='850px' :autoFit='true'>
4+
<e-columns>
5+
<e-column field='OrderID' headerText='Order ID' minWidth='100' width='150' maxWidth='200'
6+
textAlign='Right'></e-column>
7+
<e-column field='CustomerID' headerText='Customer ID' minWidth='8' width='150'></e-column>
8+
<e-column field='Freight' headerText='Freight' minWidth='8' width='120' format='C2'
9+
textAlign='Right'></e-column>
10+
<e-column field='ShipCity' headerText='Ship City' :allowResizing='false' width='150'
11+
textAlign='Right'></e-column>
12+
<e-column field='ShipCountry' headerText='Ship Country' minWidth='8' width='150'></e-column>
13+
</e-columns>
14+
</ejs-grid>
15+
</div>
1316
</template>
1417
<script setup>
1518
import { provide } from "vue";
1619
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Resize } from "@syncfusion/ej2-vue-grids";
1720
import { data } from './datasource.js';
18-
provide('grid', [Resize]);
21+
provide('grid', [Resize]);
1922
</script>
2023
<style>
21-
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
24+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
25+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
26+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
27+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
28+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
29+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
30+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
31+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
32+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
2233
</style>

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

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,48 @@
11
<template>
2-
<div id="app">
3-
<ejs-grid ref='grid' :dataSource="data" :allowResizing='true' height='400px' width='850px' :autoFit='true'>
4-
<e-columns>
5-
<e-column field='OrderID' headerText='Order ID' minWidth='100' width='150' maxWidth='200' textAlign='Right'></e-column>
6-
<e-column field='CustomerID' headerText='Customer ID' minWidth='8' width='150'></e-column>
7-
<e-column field='Freight' headerText='Freight' minWidth='8' width='120' format='C2' textAlign='Right'></e-column>
8-
<e-column field='ShipCity' headerText='Ship City' :allowResizing = 'false' width='150' textAlign='Right'></e-column>
9-
<e-column field='ShipCountry' headerText='Ship Country' minWidth='8' width='150'></e-column>
10-
</e-columns>
11-
</ejs-grid>
12-
</div>
2+
<div id="app">
3+
<ejs-grid ref='grid' :dataSource="data" :allowResizing='true' height='400px' width='850px' :autoFit='true'>
4+
<e-columns>
5+
<e-column field='OrderID' headerText='Order ID' minWidth='100' width='150' maxWidth='200'
6+
textAlign='Right'></e-column>
7+
<e-column field='CustomerID' headerText='Customer ID' minWidth='8' width='150'></e-column>
8+
<e-column field='Freight' headerText='Freight' minWidth='8' width='120' format='C2'
9+
textAlign='Right'></e-column>
10+
<e-column field='ShipCity' headerText='Ship City' :allowResizing='false' width='150'
11+
textAlign='Right'></e-column>
12+
<e-column field='ShipCountry' headerText='Ship Country' minWidth='8' width='150'></e-column>
13+
</e-columns>
14+
</ejs-grid>
15+
</div>
1316
</template>
1417
<script>
1518
1619
import { GridComponent, ColumnsDirective, ColumnDirective, Resize } from "@syncfusion/ej2-vue-grids";
1720
import { data } from './datasource.js';
1821
export default {
19-
name: "App",
20-
components: {
21-
"ejs-grid":GridComponent,
22-
"e-columns":ColumnsDirective,
23-
"e-column":ColumnDirective
24-
},
22+
name: "App",
23+
components: {
24+
"ejs-grid": GridComponent,
25+
"e-columns": ColumnsDirective,
26+
"e-column": ColumnDirective
27+
},
2528
data() {
2629
return {
2730
data: data
2831
};
2932
},
3033
provide: {
31-
grid: [Resize]
34+
grid: [Resize]
3235
}
3336
}
3437
</script>
3538
<style>
36-
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
39+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
40+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
41+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
42+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
43+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
44+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
45+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
46+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
47+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
3748
</style>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,13 @@ const actionComplete = function (args) {
2828
provide('grid', [Resize, ColumnChooser, Toolbar]);
2929
</script>
3030
<style>
31+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
32+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
33+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
34+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
35+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
36+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
37+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
38+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
3139
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
3240
</style>

0 commit comments

Comments
 (0)