Skip to content

Commit 43b2ce4

Browse files
Merge remote-tracking branch 'remotes/origin/hotfix/hotfix-v26.1.35'
2 parents 0c8bbee + aca7f22 commit 43b2ce4

File tree

93 files changed

+3958
-370
lines changed

Some content is hidden

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

93 files changed

+3958
-370
lines changed

ej2-javascript-toc.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1101,14 +1101,17 @@
11011101
</li><li>
11021102
Gantt
11031103
<ul>
1104+
<li><a href="/ej2-javascript/gantt/overview">Overview</a></li>
11041105
<li><a href="/ej2-javascript/gantt/es5-getting-started">Getting Started</a></li>
1106+
<li><a href="/ej2-javascript/gantt/key-elements">Key Elements in Gantt UI</a></li>
11051107
<li><a href="/ej2-javascript/gantt/module">Feature Modules</a></li>
11061108
<li><a href="/ej2-javascript/gantt/data-binding">Data Binding</a>
11071109
<ul>
11081110
<li><a href="/ej2-javascript/gantt/immutable">Immutable Mode</a></li>
11091111
<li><a href="/ej2-javascript/gantt/loading-animation">Loading Animation</a></li>
11101112
</ul>
11111113
</li>
1114+
<li><a href="/ej2-javascript/gantt/performance">Performance Best Practices</a></li>
11121115
<li><a href="/ej2-javascript/gantt/columns/columns">Columns</a>
11131116
<ul>
11141117
<li><a href="/ej2-javascript/gantt/columns/column-reordering">Column Reordering</a></li>

ej2-javascript/appearance/css-variables.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,22 @@ Modern themes like Material 3 and Fluent 2 incorporate support for CSS variables
3131
{% if page.publishingplatform == "typescript" %}
3232

3333
{% tabs %}
34-
{% highlight ts tabtitle="material3.css" %}
35-
{% include code-snippet/common/css-value-cs1/ts/material3.css %}
34+
{% highlight css tabtitle="material3.css" %}
35+
{% include code-snippet/common/css-value-cs1/material3.css %}
3636
{% endhighlight %}
37-
{% highlight ts tabtitle="fluent2.css" %}
38-
{% include code-snippet/common/css-value-cs1/ts/fluent2.css %}
37+
{% highlight css tabtitle="fluent2.css" %}
38+
{% include code-snippet/common/css-value-cs1/fluent2.css %}
3939
{% endhighlight %}
4040
{% endtabs %}
4141

4242
{% elsif page.publishingplatform == "javascript" %}
4343

4444
{% tabs %}
45-
{% highlight js tabtitle="material3.css" %}
46-
{% include code-snippet/common/css-value-cs1/js/material3.css %}
45+
{% highlight css tabtitle="material3.css" %}
46+
{% include code-snippet/common/css-value-cs1/material3.css %}
4747
{% endhighlight %}
48-
{% highlight ts tabtitle="fluent2.css" %}
49-
{% include code-snippet/common/css-value-cs1/js/fluent2.css %}
48+
{% highlight css tabtitle="fluent2.css" %}
49+
{% include code-snippet/common/css-value-cs1/fluent2.css %}
5050
{% endhighlight %}
5151
{% endtabs %}
5252

ej2-javascript/code-snippet/common/css-value-cs1/ts/fluent2.css

Lines changed: 0 additions & 23 deletions
This file was deleted.

ej2-javascript/code-snippet/common/css-value-cs1/ts/material3.css

Lines changed: 0 additions & 19 deletions
This file was deleted.
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
export let GanttData: Object[] = [
2+
{
3+
TaskID: 1,
4+
TaskName: 'Project Initiation',
5+
StartDate: new Date('04/02/2019'),
6+
EndDate: new Date('04/21/2019'),
7+
subtasks: [
8+
{
9+
TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4,
10+
Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
11+
},
12+
{
13+
TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
14+
resources: [2], info: 'Obtain an engineered soil test of lot where construction is planned.' +
15+
'From an engineer or company specializing in soil testing'
16+
},
17+
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '3', Progress: 30, resources: [3], },
18+
]
19+
},
20+
{
21+
TaskID: 5,
22+
TaskName: 'Project Estimation',
23+
StartDate: new Date('04/02/2019'),
24+
EndDate: new Date('04/21/2019'),
25+
subtasks: [
26+
{
27+
TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),
28+
Duration: 3, Predecessor: '4', Progress: 30, resources: [4],
29+
info: 'Develop floor plans and obtain a materials list for estimations'
30+
},
31+
{
32+
TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
33+
Duration: 3, Predecessor: '6', resources: [1], info: ''
34+
},
35+
{
36+
TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),
37+
Duration: 4, Predecessor: '7',resources: [2], info: ''
38+
}
39+
]
40+
}
41+
];
42+
export let editingResources: object[] = [
43+
{ resourceId: 1, resourceName: 'Martin Tamer' },
44+
{ resourceId: 2, resourceName: 'Rose Fuller' },
45+
{ resourceId: 3, resourceName: 'Margaret Buchanan' },
46+
{ resourceId: 4, resourceName: 'Tamer Vinet' }
47+
];
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
var GanttData = [
2+
{
3+
TaskID: 1,
4+
TaskName: 'Project Initiation',
5+
StartDate: new Date('04/02/2019'),
6+
EndDate: new Date('04/21/2019'),
7+
subtasks: [
8+
{
9+
TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4,
10+
Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
11+
},
12+
{
13+
TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
14+
resources: [2], info: 'Obtain an engineered soil test of lot where construction is planned.' +
15+
'From an engineer or company specializing in soil testing'
16+
},
17+
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '3', Progress: 30, resources: [3], },
18+
]
19+
},
20+
{
21+
TaskID: 5,
22+
TaskName: 'Project Estimation',
23+
StartDate: new Date('04/02/2019'),
24+
EndDate: new Date('04/21/2019'),
25+
subtasks: [
26+
{
27+
TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),
28+
Duration: 3, Predecessor: '4', Progress: 30, resources: [4],
29+
info: 'Develop floor plans and obtain a materials list for estimations'
30+
},
31+
{
32+
TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
33+
Duration: 3, Predecessor: '6', resources: [1], info: ''
34+
},
35+
{
36+
TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),
37+
Duration: 4, Predecessor: '7',resources: [2], info: ''
38+
}
39+
]
40+
}
41+
];
42+
var editingResources = [
43+
{ resourceId: 1, resourceName: 'Martin Tamer' },
44+
{ resourceId: 2, resourceName: 'Rose Fuller' },
45+
{ resourceId: 3, resourceName: 'Margaret Buchanan' },
46+
{ resourceId: 4, resourceName: 'Tamer Vinet' }
47+
];
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
#container {
2+
visibility: hidden;
3+
}
4+
5+
#loader {
6+
color: #008cff;
7+
font-family: 'Helvetica Neue','calibiri';
8+
font-size: 14px;
9+
height: 40px;
10+
left: 45%;
11+
position: absolute;
12+
top: 45%;
13+
width: 30%;
14+
}
15+
16+
#element {
17+
display: block;
18+
height: 350px;
19+
}
20+
21+
#container #Gantt{
22+
height:450px;
23+
}
Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar,ej.gantt.Selection);
2+
3+
let style;
4+
window.Resources = function (resource) {
5+
switch(resource) {
6+
case 'Martin Tamer':
7+
style = "display: flex; padding: 1.5px 12px; gap: 10px; width: 81px; height: 24px; border-radius: 24px; background: #DFECFF " ;
8+
break;
9+
case 'Rose Fuller':
10+
style = "display: flex; padding: 1.5px 12px; gap: 10px; width: 71px; height: 24px; border-radius: 24px; background: #E4E4E7 " ;
11+
break;
12+
case 'Margaret Buchanan':
13+
style = "display: flex; padding: 1.5px 12px; gap: 10px; width: 123px; height: 24px; border-radius: 24px; background: #DFFFE2 " ;
14+
break;
15+
case 'Tamer Vinet':
16+
style = "display: flex; padding: 1.5px 12px; gap: 10px; width: 75px; height: 24px; border-radius: 24px; background: #FFEBE9 " ;
17+
break;
18+
}
19+
return style;
20+
}
21+
22+
window.ResourcesStyles = function (resource) {
23+
switch(resource) {
24+
case 'Martin Tamer':
25+
style = "width: 72px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 22px; text-align: center; color: #006AA6" ;
26+
break;
27+
case 'Rose Fuller':
28+
style = "width: 72px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 22px; text-align: center; color: #766B7C" ;
29+
break;
30+
case 'Margaret Buchanan':
31+
style = "width: 72px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 22px; text-align: center; color: #00A653" ;
32+
break;
33+
case 'Tamer Vinet':
34+
style = "width: 72px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 22px; text-align: center; color: #FF3740" ;
35+
break;
36+
}
37+
return style;
38+
}
39+
var gantt = new ej.gantt.Gantt({
40+
dataSource: GanttData,
41+
resources: editingResources,
42+
queryTaskbarInfo(args) {
43+
if (args.data.resources == 'Martin Tamer') {
44+
args.taskbarBgColor = '#DFECFF';
45+
args.progressBarBgColor = '#006AA6'
46+
}else if (args.data.resources == 'Rose Fuller') {
47+
args.taskbarBgColor = '#E4E4E7';
48+
args.progressBarBgColor = '#766B7C'
49+
}
50+
else if (args.data.resources == 'Margaret Buchanan') {
51+
args.taskbarBgColor = '#DFFFE2';
52+
args.progressBarBgColor = '#00A653'
53+
}
54+
else if (args.data.resources == 'Tamer Vinet') {
55+
args.taskbarBgColor = '#FFEBE9';
56+
args.progressBarBgColor = '#FF3740'
57+
}
58+
},
59+
taskFields: {
60+
id: 'TaskID',
61+
name: 'TaskName',
62+
resourceInfo: 'resources',
63+
startDate: 'StartDate',
64+
duration: 'Duration',
65+
progress: 'Progress',
66+
child: 'subtasks'
67+
},
68+
resourceFields: {
69+
id: 'resourceId',
70+
name: 'resourceName'
71+
},
72+
columns: [
73+
{ field: 'TaskID', visible: false },
74+
{ field: 'TaskName', headerText: 'Task Name', width: 250 },
75+
{ field: 'resources', headerText: 'Resources', width: 175, template: '#resColumnTemplate' },
76+
{ field: 'Progress', headerText: 'Progress', width: 150 },
77+
{ field: 'StartDate', headerText: 'Start Date', width: 150 },
78+
{ field: 'Duration', headerText: 'Duration', width: 150 }
79+
],
80+
splitterSettings: {
81+
columnIndex: 3
82+
},
83+
labelSettings: {
84+
rightLabel: 'resources'
85+
}
86+
});
87+
gantt.appendTo('#Gantt');
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { Gantt, Toolbar, Edit, Selection } from '@syncfusion/ej2-gantt';
2+
import { GanttData, editingResources } from 'datasource.ts';
3+
4+
Gantt.Inject(Toolbar, Edit, Selection);
5+
6+
let style: any;
7+
(<{ Resources?: Function }>window).Resources = (resource: any) => {
8+
switch(resource) {
9+
case 'Martin Tamer':
10+
style = "display: flex; padding: 1.5px 12px; gap: 10px; width: 81px; height: 24px; border-radius: 24px; background: #DFECFF " ;
11+
break;
12+
case 'Rose Fuller':
13+
style = "display: flex; padding: 1.5px 12px; gap: 10px; width: 71px; height: 24px; border-radius: 24px; background: #E4E4E7 " ;
14+
break;
15+
case 'Margaret Buchanan':
16+
style = "display: flex; padding: 1.5px 12px; gap: 10px; width: 123px; height: 24px; border-radius: 24px; background: #DFFFE2 " ;
17+
break;
18+
case 'Tamer Vinet':
19+
style = "display: flex; padding: 1.5px 12px; gap: 10px; width: 75px; height: 24px; border-radius: 24px; background: #FFEBE9 " ;
20+
break;
21+
}
22+
return style;
23+
},
24+
25+
(<{ ResourcesStyles?: Function }>window).ResourcesStyles = (resource: any) => {
26+
switch(resource) {
27+
case 'Martin Tamer':
28+
style = "width: 72px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 22px; text-align: center; color: #006AA6" ;
29+
break;
30+
case 'Rose Fuller':
31+
style = "width: 72px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 22px; text-align: center; color: #766B7C" ;
32+
break;
33+
case 'Margaret Buchanan':
34+
style = "width: 72px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 22px; text-align: center; color: #00A653" ;
35+
break;
36+
case 'Tamer Vinet':
37+
style = "width: 72px; height: 22px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 22px; text-align: center; color: #FF3740" ;
38+
break;
39+
}
40+
return style;
41+
}
42+
43+
let gantt: Gantt = new Gantt({
44+
dataSource: GanttData,
45+
resources: editingResources,
46+
queryTaskbarInfo(args: any) {
47+
if (args.data.resources == 'Martin Tamer') {
48+
args.taskbarBgColor = '#DFECFF';
49+
args.progressBarBgColor = '#006AA6'
50+
}else if (args.data.resources == 'Rose Fuller') {
51+
args.taskbarBgColor = '#E4E4E7';
52+
args.progressBarBgColor = '#766B7C'
53+
}
54+
else if (args.data.resources == 'Margaret Buchanan') {
55+
args.taskbarBgColor = '#DFFFE2';
56+
args.progressBarBgColor = '#00A653'
57+
}
58+
else if (args.data.resources == 'Tamer Vinet') {
59+
args.taskbarBgColor = '#FFEBE9';
60+
args.progressBarBgColor = '#FF3740'
61+
}
62+
},
63+
taskFields: {
64+
id: 'TaskID',
65+
name: 'TaskName',
66+
resourceInfo: 'resources',
67+
startDate: 'StartDate',
68+
duration: 'Duration',
69+
progress: 'Progress',
70+
child: 'subtasks'
71+
},
72+
resourceFields: {
73+
id: 'resourceId',
74+
name: 'resourceName'
75+
},
76+
columns: [
77+
{ field: 'TaskID', visible: false },
78+
{ field: 'TaskName', headerText: 'Task Name', width: 250 },
79+
{ field: 'resources', headerText: 'Resources', width: 175, template: '#resColumnTemplate' },
80+
{ field: 'Progress', headerText: 'Progress', width: 150 },
81+
{ field: 'StartDate', headerText: 'Start Date', width: 150 },
82+
{ field: 'Duration', headerText: 'Duration', width: 150 }
83+
],
84+
splitterSettings: {
85+
columnIndex: 3
86+
},
87+
labelSettings: {
88+
rightLabel: 'resources'
89+
}
90+
});
91+
gantt.appendTo('#Gantt');
92+

0 commit comments

Comments
 (0)