Skip to content

889277: UG hotfix content changes and custom resource taskbar colour for mvc/core platform #3155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
4 commits merged into from
Jul 3, 2024
Merged

889277: UG hotfix content changes and custom resource taskbar colour for mvc/core platform #3155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a4f5c43
Merge pull request #3146 from syncfusion-content/EJ2-892508-UGmvc-core
Jun 28, 2024
06d50c1
894222: overview
DhineshSF Jul 1, 2024
abdc716
894222: sel
DhineshSF Jul 1, 2024
9058a8d
Merge branch 'hotfix/hotfix-v26.1.35' into EJ2-894222-mvcore-HT
DhineshSF Jul 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions ej2-asp-core-mvc/code-snippet/gantt/resource-customization/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).QueryTaskbarInfo("queryTaskbarInfo").Height("450px").
TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").
Child("SubTasks").ResourceInfo("Resources")).ResourceFields(rf => rf.Id("ResourceId").Name("ResourceName")).
Resources((IEnumerable<object>)ViewBag.projectResources).Columns(col =>
{
col.Field("TaskName").HeaderText("Task Name").Width(250).Add();
col.Field("Resources").HeaderText("Resources").Width(175).Template("#resColumnTemplate").Add();
col.Field("StartDate").Add();
col.Field("Duration").Add();
col.Field("Progress").Add();
}).SplitterSettings(sp => sp.ColumnIndex(2)).Render()

<script>
function queryTaskbarInfo(args) {
if(args.data.Resources === 'Martin Tamer'){
args.taskbarBgColor = '#DFECFF';
args.progressBarBgColor = '#006AA6'
}else if(args.data.Resources === 'Rose Fuller'){
args.taskbarBgColor = '#E4E4E7';
args.progressBarBgColor = '#766B7C'
}
else if(args.data.Resources === 'Margaret Buchanan'){
args.taskbarBgColor = '#DFFFE2';
args.progressBarBgColor = '#00A653'
}
else if(args.data.Resources === 'Tamer Vinet'){
args.taskbarBgColor = '#FFEBE9';
args.progressBarBgColor = '#FF3740'
}
}
</script>

<script type="text/x-template" id="resColumnTemplate">
${if(ganttProperties.resourceNames)}
${if(ganttProperties.resourceNames === 'Martin Tamer')}
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #DFECFF">
<span style="color: #006AA6; font-weight: 500;">${ganttProperties.resourceNames}</span>
</div>
${/if}

${if(ganttProperties.resourceNames === 'Rose Fuller')}
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #E4E4E7">
<span style="color: #766B7C; font-weight: 500;">${ganttProperties.resourceNames}</span>
</div>
${/if}

${if(ganttProperties.resourceNames === 'Margaret Buchanan')}
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 160px; height: 24px; border-radius: 24px; background: #DFFFE2">
<span style="color: #00A653; font-weight: 500;">${ganttProperties.resourceNames}</span>
</div>
${/if}

${if(ganttProperties.resourceNames === 'Tamer Vinet')}
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #FFEBE9">
<span style="color: #FF3740; font-weight: 500;">${ganttProperties.resourceNames}</span>
</div>
${/if}
${/if}
</script>

163 changes: 163 additions & 0 deletions ej2-asp-core-mvc/code-snippet/gantt/resource-customization/rescustomize.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
public IActionResult Index()
{
ViewBag.DataSource = ganttData();
ViewBag.projectResources = projectResources();
return View();
}

public static List<GanttResources> projectResources()
{
List<GanttResources> GanttResourcesCollection = new List<GanttResources>();

GanttResources Record1 = new GanttResources()
{
ResourceId = 1,
ResourceName = "Martin Tamer"
};
GanttResources Record2 = new GanttResources()
{
ResourceId = 2,
ResourceName = "Rose Fuller"
};
GanttResources Record3 = new GanttResources()
{
ResourceId = 3,
ResourceName = "Margaret Buchanan"
};
GanttResources Record4 = new GanttResources()
{
ResourceId = 4,
ResourceName = "Tamer Vinet"
};
GanttResourcesCollection.Add(Record1);
GanttResourcesCollection.Add(Record2);
GanttResourcesCollection.Add(Record3);
GanttResourcesCollection.Add(Record4);
return GanttResourcesCollection;
}
public static List<GanttDataSource> ganttData()
{
List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

GanttDataSource Record1 = new GanttDataSource()
{
TaskId = 1,
TaskName = "Project initiation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
};
GanttDataSource Child1 = new GanttDataSource()
{
TaskId = 2,
TaskName = "Identify site location",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 30,
Resources = new List<ResourceModel>
{
new ResourceModel{ ResourceId = 1 }
}
};
GanttDataSource Child2 = new GanttDataSource()
{
TaskId = 3,
TaskName = "Perform soil test",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Resources = new List<ResourceModel>
{
new ResourceModel{ ResourceId = 2 }
}
};
GanttDataSource Child3 = new GanttDataSource()
{
TaskId = 4,
TaskName = "Soil test approval",
StartDate = new DateTime(2019, 04, 02),
Duration = 4,
Progress = 30,
Resources = new List<ResourceModel>
{
new ResourceModel{ ResourceId = 3 }
}
};
Record1.SubTasks.Add(Child1);
Record1.SubTasks.Add(Child2);
Record1.SubTasks.Add(Child3);

GanttDataSource Record2 = new GanttDataSource()
{
TaskId = 5,
TaskName = "Project estimation",
StartDate = new DateTime(2019, 04, 02),
EndDate = new DateTime(2019, 04, 21),
SubTasks = new List<GanttDataSource>(),
};
GanttDataSource Child4 = new GanttDataSource()
{
TaskId = 6,
TaskName = "Develop floor plan for estimation",
StartDate = new DateTime(2019, 04, 04),
Duration = 4,
Progress = 30,
Resources = new List<ResourceModel>
{
new ResourceModel{ ResourceId = 4 }
}
};
GanttDataSource Child5 = new GanttDataSource()
{
TaskId = 7,
TaskName = "List materials",
StartDate = new DateTime(2019, 04, 04),
Duration = 3,
Resources = new List<ResourceModel>
{
new ResourceModel{ ResourceId = 1 }
}
};
GanttDataSource Child6 = new GanttDataSource()
{
TaskId = 8,
TaskName = "Estimation approval",
StartDate = new DateTime(2019, 04, 01),
Duration = 4,
Progress = 30,
Resources = new List<ResourceModel>
{
new ResourceModel{ ResourceId = 2}
}
};
Record2.SubTasks.Add(Child4);
Record2.SubTasks.Add(Child5);
Record2.SubTasks.Add(Child6);

GanttDataSourceCollection.Add(Record1);
GanttDataSourceCollection.Add(Record2);

return GanttDataSourceCollection;
}
public class ResourceModel
{
public int ResourceId { get; set; }
public Nullable<int> ResourceUnit { get; set; }
}
public class GanttResources
{
public int ResourceId { get; set; }
public string ResourceName { get; set; }
}
public class GanttDataSource
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int? Duration { get; set; }
public int Progress { get; set; }
public List<GanttDataSource> SubTasks { get; set; }
public List<ResourceModel> Resources { get; set; }

}

65 changes: 65 additions & 0 deletions ej2-asp-core-mvc/code-snippet/gantt/resource-customization/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<ejs-gantt id='resAllocation' dataSource="ViewBag.dataSource" resources="ViewBag.projectResources" highlightWeekends="true"
height="450px" queryTaskbarInfo="queryTaskbarInfo">
<e-gantt-columns>
<e-gantt-column field="TaskName" headerText="Task Name" width="270"></e-gantt-column>
<e-gantt-column field="Resources" width="175" template="#resColumnTemplate"></e-gantt-column>
<e-gantt-column field="StartDate"></e-gantt-column>
<e-gantt-column field="Duration"></e-gantt-column>
</e-gantt-columns>
<e-gantt-labelSettings rightLabel="Resources"></e-gantt-labelSettings>
<e-gantt-splitterSettings columnIndex="2"></e-gantt-splitterSettings>

<e-gantt-resourcefields id="ResourceId" name="ResourceName">
</e-gantt-resourcefields>
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
endDate="EndDate" duration="Duration" progress="Progress"
child="SubTasks" resourceInfo="Resources">
</e-gantt-taskfields>
</ejs-gantt>
<script>
function queryTaskbarInfo(args) {
if(args.data.Resources === 'Martin Tamer'){
args.taskbarBgColor = '#DFECFF';
args.progressBarBgColor = '#006AA6'
}else if(args.data.Resources === 'Rose Fuller'){
args.taskbarBgColor = '#E4E4E7';
args.progressBarBgColor = '#766B7C'
}
else if(args.data.Resources === 'Margaret Buchanan'){
args.taskbarBgColor = '#DFFFE2';
args.progressBarBgColor = '#00A653'
}
else if(args.data.Resources === 'Tamer Vinet'){
args.taskbarBgColor = '#FFEBE9';
args.progressBarBgColor = '#FF3740'
}
}
</script>

<script type="text/x-template" id="resColumnTemplate">
${if(ganttProperties.resourceNames)}
${if(ganttProperties.resourceNames === 'Martin Tamer')}
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #DFECFF">
<span style="color: #006AA6; font-weight: 500;">${ganttProperties.resourceNames}</span>
</div>
${/if}

${if(ganttProperties.resourceNames === 'Rose Fuller')}
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #E4E4E7">
<span style="color: #766B7C; font-weight: 500;">${ganttProperties.resourceNames}</span>
</div>
${/if}

${if(ganttProperties.resourceNames === 'Margaret Buchanan')}
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 160px; height: 24px; border-radius: 24px; background: #DFFFE2">
<span style="color: #00A653; font-weight: 500;">${ganttProperties.resourceNames}</span>
</div>
${/if}

${if(ganttProperties.resourceNames === 'Tamer Vinet')}
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; width: 110px; height: 24px; border-radius: 24px; background: #FFEBE9">
<span style="color: #FF3740; font-weight: 500;">${ganttProperties.resourceNames}</span>
</div>
${/if}
${/if}
</script>
37 changes: 24 additions & 13 deletions ej2-asp-core-mvc/gantt/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Accessibility in ##Platform_Name## Gantt Component
title: Accessibility in Syncfusion ##Platform_Name## Gantt Component
description: Learn here all about Accessibility in Syncfusion ##Platform_Name## Gantt component of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Accessibility
Expand All @@ -9,7 +9,7 @@ documentation: ug
---


# Accessibility
# Accessibility in ##Platform_Name## Gantt component

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.

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

## Keyboard navigation

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.
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:

| **Press** | **To do this** |
| --- | --- |
| <kbd>Alt + J</kbd> | Focus Gantt component. |
| <kbd>Tab / Shift + Tab</kbd> | Focus the next or previous element. |
| <kbd>Home</kbd> | Selects the first row. |
| <kbd>End</kbd> | Selects the last row. |
| <kbd>DownArrow</kbd> | Moves the cell focus/row or cell selection downward. |
| <kbd>UpArrow</kbd> | Moves the cell focus/row or cell selection upward. |
| <kbd>LeftArrow</kbd> | Moves the cell focus/row or cell selection left side. |
| <kbd>RightArrow</kbd> | Moves the cell focus/row or cell selection right side. |
| <kbd>DownArrow</kbd> | Moves the row selection downward. |
| <kbd>UpArrow</kbd> | Moves the row selection upward. |
| <kbd>LeftArrow</kbd> | Moves the cell focus/cell selection left side. |
| <kbd>RightArrow</kbd> | Moves the cell focus/cell selection right side. |
| <kbd>Ctrl + Up Arrow</kbd> | Collapses all tasks. |
| <kbd>Ctrl + Down Arrow</kbd> | Expands all tasks. |
| <kbd>Ctrl + Shift + Up Arrow</kbd> | Collapses the selected row. |
| <kbd>Ctrl + Shift + Down Arrow</kbd> | Expands the selected row. |
|<kbd>Enter</kbd> | Saves request. |
| <kbd>Enter</kbd> | Saves request. |
| <kbd>Esc</kbd> | Cancels request. |
| <kbd>Insert</kbd> | Adds a new row. |
| <kbd>Ctrl + Insert</kbd> | Opens addRowDialog. |
| <kbd>Ctrl + F2</kbd> | Opens editRowDialog. |
| <kbd>Delete</kbd> | Deletes the selected row. |
| <kbd>Shift + F5</kbd> | FocusTask |
| <kbd>Ctrl + Shift + F</kbd> | Focus search |
| <kbd>Shift + DownArrow</kbd> | Extends the row/cell selection downwards. |
| <kbd>Shift + UpArrow</kbd> | Extends the row/cell selection upwards. |
| <kbd>Shift + DownArrow</kbd> | Extends the cell selection downwards. |
| <kbd>Shift + UpArrow</kbd> | Extends the cell selection upwards. |
| <kbd>Shift + LeftArrow</kbd> | Extends the cell selection to the left side. |
| <kbd>Shift + RightArrow</kbd> | Extends the cell selection to the right side. |
| <kbd>Tab / Shift + Tab</kbd> | To focus the close icon in the message. |
| <kbd>Alt + j</kbd> | Focus Gantt component. |
| <kbd>Ctrl + Z</kbd> | Undo the last action. |
| <kbd>Ctrl + Y</kbd> | Redo the last action. |

**Navigate between toolbar items using keyboard**

In the Gantt component, follow these steps to navigate between toolbar items using the keyboard:

**Step 1**: Press `ALT + J` to focus on the gantt component.
**Step 2**: Press the `Tab` key to navigate to the first item in the toolbar.
**Step 3**: Use the `LeftArrow` or `RightArrow` keys to move between toolbar items.
**Step 4**: Press `Tab` key again to remove focus from the toolbar and return focus to the Gantt component.

## Ensuring accessibility

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

## See also

* [Accessibility in Syncfusion ##Platform_Name## components](../common/accessibility)
* [Accessibility in Syncfusion ##Platform_Name## components](../common/accessibility)
Binary file added ej2-asp-core-mvc/gantt/images/chart.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/chartedit.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/critical-path.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/dependency.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/dependencytab.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/dialogBox.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/drag.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/event-markers.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/gantt.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/manual-task.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/milestone-element.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/notestab.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/resourcestab.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-asp-core-mvc/gantt/images/tabular.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading