Skip to content

Commit 7ce8325

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #3166 from Syncfusion-Content/hotfix/hotfix-v26.1.35
DOCINFRA-2341_merged_using_automation
2 parents 6d39792 + e3b534a commit 7ce8325

26 files changed

+590
-34
lines changed

‎ej2-asp-core-mvc/code-snippet/gantt/resource-customization/razor

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).QueryTaskbarInfo("queryTaskbarInfo").Height("450px").
2+
TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").
3+
Child("SubTasks").ResourceInfo("Resources")).ResourceFields(rf => rf.Id("ResourceId").Name("ResourceName")).
4+
Resources((IEnumerable<object>)ViewBag.projectResources).Columns(col =>
5+
{
6+
col.Field("TaskName").HeaderText("Task Name").Width(250).Add();
7+
col.Field("Resources").HeaderText("Resources").Width(175).Template("#resColumnTemplate").Add();
8+
col.Field("StartDate").Add();
9+
col.Field("Duration").Add();
10+
col.Field("Progress").Add();
11+
}).SplitterSettings(sp => sp.ColumnIndex(2)).Render()
12+
13+
<script>
14+
function queryTaskbarInfo(args) {
15+
if(args.data.Resources === 'Martin Tamer'){
16+
args.taskbarBgColor = '#DFECFF';
17+
args.progressBarBgColor = '#006AA6'
18+
}else if(args.data.Resources === 'Rose Fuller'){
19+
args.taskbarBgColor = '#E4E4E7';
20+
args.progressBarBgColor = '#766B7C'
21+
}
22+
else if(args.data.Resources === 'Margaret Buchanan'){
23+
args.taskbarBgColor = '#DFFFE2';
24+
args.progressBarBgColor = '#00A653'
25+
}
26+
else if(args.data.Resources === 'Tamer Vinet'){
27+
args.taskbarBgColor = '#FFEBE9';
28+
args.progressBarBgColor = '#FF3740'
29+
}
30+
}
31+
</script>
32+
33+
<script type="text/x-template" id="resColumnTemplate">
34+
${if(ganttProperties.resourceNames)}
35+
${if(ganttProperties.resourceNames === 'Martin Tamer')}
36+
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #DFECFF">
37+
<span style="color: #006AA6; font-weight: 500;">${ganttProperties.resourceNames}</span>
38+
</div>
39+
${/if}
40+
41+
${if(ganttProperties.resourceNames === 'Rose Fuller')}
42+
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #E4E4E7">
43+
<span style="color: #766B7C; font-weight: 500;">${ganttProperties.resourceNames}</span>
44+
</div>
45+
${/if}
46+
47+
${if(ganttProperties.resourceNames === 'Margaret Buchanan')}
48+
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 160px; height: 24px; border-radius: 24px; background: #DFFFE2">
49+
<span style="color: #00A653; font-weight: 500;">${ganttProperties.resourceNames}</span>
50+
</div>
51+
${/if}
52+
53+
${if(ganttProperties.resourceNames === 'Tamer Vinet')}
54+
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #FFEBE9">
55+
<span style="color: #FF3740; font-weight: 500;">${ganttProperties.resourceNames}</span>
56+
</div>
57+
${/if}
58+
${/if}
59+
</script>
60+

‎ej2-asp-core-mvc/code-snippet/gantt/resource-customization/rescustomize.cs

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
public IActionResult Index()
2+
{
3+
ViewBag.DataSource = ganttData();
4+
ViewBag.projectResources = projectResources();
5+
return View();
6+
}
7+
8+
public static List<GanttResources> projectResources()
9+
{
10+
List<GanttResources> GanttResourcesCollection = new List<GanttResources>();
11+
12+
GanttResources Record1 = new GanttResources()
13+
{
14+
ResourceId = 1,
15+
ResourceName = "Martin Tamer"
16+
};
17+
GanttResources Record2 = new GanttResources()
18+
{
19+
ResourceId = 2,
20+
ResourceName = "Rose Fuller"
21+
};
22+
GanttResources Record3 = new GanttResources()
23+
{
24+
ResourceId = 3,
25+
ResourceName = "Margaret Buchanan"
26+
};
27+
GanttResources Record4 = new GanttResources()
28+
{
29+
ResourceId = 4,
30+
ResourceName = "Tamer Vinet"
31+
};
32+
GanttResourcesCollection.Add(Record1);
33+
GanttResourcesCollection.Add(Record2);
34+
GanttResourcesCollection.Add(Record3);
35+
GanttResourcesCollection.Add(Record4);
36+
return GanttResourcesCollection;
37+
}
38+
public static List<GanttDataSource> ganttData()
39+
{
40+
List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();
41+
42+
GanttDataSource Record1 = new GanttDataSource()
43+
{
44+
TaskId = 1,
45+
TaskName = "Project initiation",
46+
StartDate = new DateTime(2019, 04, 02),
47+
EndDate = new DateTime(2019, 04, 21),
48+
SubTasks = new List<GanttDataSource>(),
49+
};
50+
GanttDataSource Child1 = new GanttDataSource()
51+
{
52+
TaskId = 2,
53+
TaskName = "Identify site location",
54+
StartDate = new DateTime(2019, 04, 02),
55+
Duration = 4,
56+
Progress = 30,
57+
Resources = new List<ResourceModel>
58+
{
59+
new ResourceModel{ ResourceId = 1 }
60+
}
61+
};
62+
GanttDataSource Child2 = new GanttDataSource()
63+
{
64+
TaskId = 3,
65+
TaskName = "Perform soil test",
66+
StartDate = new DateTime(2019, 04, 02),
67+
Duration = 4,
68+
Resources = new List<ResourceModel>
69+
{
70+
new ResourceModel{ ResourceId = 2 }
71+
}
72+
};
73+
GanttDataSource Child3 = new GanttDataSource()
74+
{
75+
TaskId = 4,
76+
TaskName = "Soil test approval",
77+
StartDate = new DateTime(2019, 04, 02),
78+
Duration = 4,
79+
Progress = 30,
80+
Resources = new List<ResourceModel>
81+
{
82+
new ResourceModel{ ResourceId = 3 }
83+
}
84+
};
85+
Record1.SubTasks.Add(Child1);
86+
Record1.SubTasks.Add(Child2);
87+
Record1.SubTasks.Add(Child3);
88+
89+
GanttDataSource Record2 = new GanttDataSource()
90+
{
91+
TaskId = 5,
92+
TaskName = "Project estimation",
93+
StartDate = new DateTime(2019, 04, 02),
94+
EndDate = new DateTime(2019, 04, 21),
95+
SubTasks = new List<GanttDataSource>(),
96+
};
97+
GanttDataSource Child4 = new GanttDataSource()
98+
{
99+
TaskId = 6,
100+
TaskName = "Develop floor plan for estimation",
101+
StartDate = new DateTime(2019, 04, 04),
102+
Duration = 4,
103+
Progress = 30,
104+
Resources = new List<ResourceModel>
105+
{
106+
new ResourceModel{ ResourceId = 4 }
107+
}
108+
};
109+
GanttDataSource Child5 = new GanttDataSource()
110+
{
111+
TaskId = 7,
112+
TaskName = "List materials",
113+
StartDate = new DateTime(2019, 04, 04),
114+
Duration = 3,
115+
Resources = new List<ResourceModel>
116+
{
117+
new ResourceModel{ ResourceId = 1 }
118+
}
119+
};
120+
GanttDataSource Child6 = new GanttDataSource()
121+
{
122+
TaskId = 8,
123+
TaskName = "Estimation approval",
124+
StartDate = new DateTime(2019, 04, 01),
125+
Duration = 4,
126+
Progress = 30,
127+
Resources = new List<ResourceModel>
128+
{
129+
new ResourceModel{ ResourceId = 2}
130+
}
131+
};
132+
Record2.SubTasks.Add(Child4);
133+
Record2.SubTasks.Add(Child5);
134+
Record2.SubTasks.Add(Child6);
135+
136+
GanttDataSourceCollection.Add(Record1);
137+
GanttDataSourceCollection.Add(Record2);
138+
139+
return GanttDataSourceCollection;
140+
}
141+
public class ResourceModel
142+
{
143+
public int ResourceId { get; set; }
144+
public Nullable<int> ResourceUnit { get; set; }
145+
}
146+
public class GanttResources
147+
{
148+
public int ResourceId { get; set; }
149+
public string ResourceName { get; set; }
150+
}
151+
public class GanttDataSource
152+
{
153+
public int TaskId { get; set; }
154+
public string TaskName { get; set; }
155+
public DateTime StartDate { get; set; }
156+
public DateTime EndDate { get; set; }
157+
public int? Duration { get; set; }
158+
public int Progress { get; set; }
159+
public List<GanttDataSource> SubTasks { get; set; }
160+
public List<ResourceModel> Resources { get; set; }
161+
162+
}
163+

‎ej2-asp-core-mvc/code-snippet/gantt/resource-customization/tagHelper

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<ejs-gantt id='resAllocation' dataSource="ViewBag.dataSource" resources="ViewBag.projectResources" highlightWeekends="true"
2+
height="450px" queryTaskbarInfo="queryTaskbarInfo">
3+
<e-gantt-columns>
4+
<e-gantt-column field="TaskName" headerText="Task Name" width="270"></e-gantt-column>
5+
<e-gantt-column field="Resources" width="175" template="#resColumnTemplate"></e-gantt-column>
6+
<e-gantt-column field="StartDate"></e-gantt-column>
7+
<e-gantt-column field="Duration"></e-gantt-column>
8+
</e-gantt-columns>
9+
<e-gantt-labelSettings rightLabel="Resources"></e-gantt-labelSettings>
10+
<e-gantt-splitterSettings columnIndex="2"></e-gantt-splitterSettings>
11+
12+
<e-gantt-resourcefields id="ResourceId" name="ResourceName">
13+
</e-gantt-resourcefields>
14+
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
15+
endDate="EndDate" duration="Duration" progress="Progress"
16+
child="SubTasks" resourceInfo="Resources">
17+
</e-gantt-taskfields>
18+
</ejs-gantt>
19+
<script>
20+
function queryTaskbarInfo(args) {
21+
if(args.data.Resources === 'Martin Tamer'){
22+
args.taskbarBgColor = '#DFECFF';
23+
args.progressBarBgColor = '#006AA6'
24+
}else if(args.data.Resources === 'Rose Fuller'){
25+
args.taskbarBgColor = '#E4E4E7';
26+
args.progressBarBgColor = '#766B7C'
27+
}
28+
else if(args.data.Resources === 'Margaret Buchanan'){
29+
args.taskbarBgColor = '#DFFFE2';
30+
args.progressBarBgColor = '#00A653'
31+
}
32+
else if(args.data.Resources === 'Tamer Vinet'){
33+
args.taskbarBgColor = '#FFEBE9';
34+
args.progressBarBgColor = '#FF3740'
35+
}
36+
}
37+
</script>
38+
39+
<script type="text/x-template" id="resColumnTemplate">
40+
${if(ganttProperties.resourceNames)}
41+
${if(ganttProperties.resourceNames === 'Martin Tamer')}
42+
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #DFECFF">
43+
<span style="color: #006AA6; font-weight: 500;">${ganttProperties.resourceNames}</span>
44+
</div>
45+
${/if}
46+
47+
${if(ganttProperties.resourceNames === 'Rose Fuller')}
48+
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #E4E4E7">
49+
<span style="color: #766B7C; font-weight: 500;">${ganttProperties.resourceNames}</span>
50+
</div>
51+
${/if}
52+
53+
${if(ganttProperties.resourceNames === 'Margaret Buchanan')}
54+
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 160px; height: 24px; border-radius: 24px; background: #DFFFE2">
55+
<span style="color: #00A653; font-weight: 500;">${ganttProperties.resourceNames}</span>
56+
</div>
57+
${/if}
58+
59+
${if(ganttProperties.resourceNames === 'Tamer Vinet')}
60+
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #FFEBE9">
61+
<span style="color: #FF3740; font-weight: 500;">${ganttProperties.resourceNames}</span>
62+
</div>
63+
${/if}
64+
${/if}
65+
</script>

‎ej2-asp-core-mvc/gantt/accessibility.md

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Accessibility in ##Platform_Name## Gantt Component
3+
title: Accessibility in Syncfusion ##Platform_Name## Gantt Component
44
description: Learn here all about Accessibility in Syncfusion ##Platform_Name## Gantt component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Accessibility
@@ -9,7 +9,7 @@ documentation: ug
99
---
1010

1111

12-
# Accessibility
12+
# Accessibility in ##Platform_Name## Gantt component
1313

1414
The Gantt component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
1515

@@ -61,34 +61,45 @@ The following ARIA attributes are used in Gantt:
6161

6262
## Keyboard navigation
6363

64-
The Gantt component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Gantt component.
64+
The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns) guideline, ensuring accessibility for users of assistive technologies (AT) and those who rely solely on keyboard navigation. The following keyboard shortcuts are supported by the Gantt component:
6565

6666
| **Press** | **To do this** |
6767
| --- | --- |
68+
| <kbd>Alt + J</kbd> | Focus Gantt component. |
69+
| <kbd>Tab / Shift + Tab</kbd> | Focus the next or previous element. |
6870
| <kbd>Home</kbd> | Selects the first row. |
6971
| <kbd>End</kbd> | Selects the last row. |
70-
| <kbd>DownArrow</kbd> | Moves the cell focus/row or cell selection downward. |
71-
| <kbd>UpArrow</kbd> | Moves the cell focus/row or cell selection upward. |
72-
| <kbd>LeftArrow</kbd> | Moves the cell focus/row or cell selection left side. |
73-
| <kbd>RightArrow</kbd> | Moves the cell focus/row or cell selection right side. |
72+
| <kbd>DownArrow</kbd> | Moves the row selection downward. |
73+
| <kbd>UpArrow</kbd> | Moves the row selection upward. |
74+
| <kbd>LeftArrow</kbd> | Moves the cell focus/cell selection left side. |
75+
| <kbd>RightArrow</kbd> | Moves the cell focus/cell selection right side. |
7476
| <kbd>Ctrl + Up Arrow</kbd> | Collapses all tasks. |
7577
| <kbd>Ctrl + Down Arrow</kbd> | Expands all tasks. |
7678
| <kbd>Ctrl + Shift + Up Arrow</kbd> | Collapses the selected row. |
7779
| <kbd>Ctrl + Shift + Down Arrow</kbd> | Expands the selected row. |
78-
|<kbd>Enter</kbd> | Saves request. |
80+
| <kbd>Enter</kbd> | Saves request. |
7981
| <kbd>Esc</kbd> | Cancels request. |
8082
| <kbd>Insert</kbd> | Adds a new row. |
8183
| <kbd>Ctrl + Insert</kbd> | Opens addRowDialog. |
8284
| <kbd>Ctrl + F2</kbd> | Opens editRowDialog. |
8385
| <kbd>Delete</kbd> | Deletes the selected row. |
8486
| <kbd>Shift + F5</kbd> | FocusTask |
8587
| <kbd>Ctrl + Shift + F</kbd> | Focus search |
86-
| <kbd>Shift + DownArrow</kbd> | Extends the row/cell selection downwards. |
87-
| <kbd>Shift + UpArrow</kbd> | Extends the row/cell selection upwards. |
88+
| <kbd>Shift + DownArrow</kbd> | Extends the cell selection downwards. |
89+
| <kbd>Shift + UpArrow</kbd> | Extends the cell selection upwards. |
8890
| <kbd>Shift + LeftArrow</kbd> | Extends the cell selection to the left side. |
8991
| <kbd>Shift + RightArrow</kbd> | Extends the cell selection to the right side. |
90-
| <kbd>Tab / Shift + Tab</kbd> | To focus the close icon in the message. |
91-
| <kbd>Alt + j</kbd> | Focus Gantt component. |
92+
| <kbd>Ctrl + Z</kbd> | Undo the last action. |
93+
| <kbd>Ctrl + Y</kbd> | Redo the last action. |
94+
95+
**Navigate between toolbar items using keyboard**
96+
97+
In the Gantt component, follow these steps to navigate between toolbar items using the keyboard:
98+
99+
**Step 1**: Press `ALT + J` to focus on the gantt component.
100+
**Step 2**: Press the `Tab` key to navigate to the first item in the toolbar.
101+
**Step 3**: Use the `LeftArrow` or `RightArrow` keys to move between toolbar items.
102+
**Step 4**: Press `Tab` key again to remove focus from the toolbar and return focus to the Gantt component.
92103

93104
## Ensuring accessibility
94105

@@ -100,4 +111,4 @@ The accessibility compliance of the Gantt component is shown in the following sa
100111

101112
## See also
102113

103-
* [Accessibility in Syncfusion ##Platform_Name## components](../common/accessibility)
114+
* [Accessibility in Syncfusion ##Platform_Name## components](../common/accessibility)

‎ej2-asp-core-mvc/gantt/images/chart.png

85.8 KB
Loading

‎ej2-asp-core-mvc/gantt/images/chartedit.png

15.3 KB
Loading

‎ej2-asp-core-mvc/gantt/images/critical-path.png

50 KB
Loading

‎ej2-asp-core-mvc/gantt/images/dependency.png

19 KB
Loading

‎ej2-asp-core-mvc/gantt/images/dependencytab.png

47.3 KB
Loading

‎ej2-asp-core-mvc/gantt/images/dialogBox.png

82 KB
Loading

‎ej2-asp-core-mvc/gantt/images/drag.png

26.1 KB
Loading

‎ej2-asp-core-mvc/gantt/images/event-markers.png

44.6 KB
Loading

‎ej2-asp-core-mvc/gantt/images/gantt.png

43.1 KB
Loading

‎ej2-asp-core-mvc/gantt/images/manual-task.png

13.4 KB
Loading

‎ej2-asp-core-mvc/gantt/images/milestone-element.png

31.5 KB
Loading

‎ej2-asp-core-mvc/gantt/images/notestab.png

19.9 KB
Loading

‎ej2-asp-core-mvc/gantt/images/resourcestab.png

44.9 KB
Loading

‎ej2-asp-core-mvc/gantt/images/tabular.png

50.3 KB
Loading

0 commit comments

Comments
 (0)