Skip to content

Commit 58012a5

Browse files
bharathmarimuthubharathmarimuthu
committed
Merge branch 'JS-58066_MVCHistogram' into 'development'
MVCHistogram See merge request content/asp.netmvc-docs!1198
2 parents 2faae75 + e4d5858 commit 58012a5

File tree

6 files changed

+268
-0
lines changed

6 files changed

+268
-0
lines changed

‎aspnetmvc-toc.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -933,6 +933,9 @@
933933
</li>
934934
<li>
935935
<a href="/aspnetmvc/gantt/Resource-Allocation-View">Resource Allocation View</a>
936+
</li>
937+
<li>
938+
<a href="/aspnetmvc/gantt/histogramview">Resource Histogram View</a>
936939
</li>
937940
<li>
938941
<a href="/aspnetmvc/gantt/editing">Editing</a>

‎aspnetmvc/Gantt/HistogramView.md‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
---
2+
layout: post
3+
title: Resource Histogram View | Gantt | ASP.NET MVC | Syncfusion
4+
description: resource histogram view
5+
platform: ejmvc
6+
control: Gantt
7+
documentation: ug
8+
---
9+
10+
# Resource Histogram
11+
12+
Resource histogram displays the scheduled working time range of resources for its assigned tasks. Using this, you can easily identify the resource availability and it’s working time. The resource histogram is used to allocate the resources properly throughout the project and find the details about allocated resources and allocated time range of specific resource.
13+
14+
## DataBinding
15+
You can render the histogram view for both project view Gantt and resource view Gantt by using the `ViewType` as `GanttViewType.HistogramView`.
16+
The following code example explains how to bind the resource histogram view for project view Gantt.
17+
{% highlight CSHTML %}
18+
@(Html.EJ().Gantt("GanttContainer")
19+
.TaskIdMapping("TaskID")
20+
.TaskNameMapping("TaskName")
21+
.StartDateMapping("StartDate")
22+
.DurationMapping("Duration")
23+
.ProgressMapping("Progress")
24+
.ResourceInfoMapping("ResourceID")
25+
.ResourceNameMapping("ResourceName")
26+
.ResourceIdMapping("ResourceID")
27+
.ChildMapping("SubTasks")
28+
.ViewType(GanttViewType.ProjectView)
29+
//..
30+
.Resources(ViewBag.resources)
31+
.Datasource(ViewBag.datasource)
32+
)
33+
34+
@(Html.EJ().Gantt("HistogramContainer")
35+
.ViewType(GanttViewType.HistogramView)
36+
.TaskIdMapping("TaskID")
37+
.TaskNameMapping("TaskName")
38+
.StartDateMapping("StartDate")
39+
.DurationMapping("Duration")
40+
.ProgressMapping("Progress")
41+
.ChildMapping("SubTasks")
42+
.ResourceInfoMapping("ResourceID")
43+
.ResourceNameMapping("ResourceName")
44+
.ResourceIdMapping("ResourceID")
45+
//..
46+
.Resources(ViewBag.resources)
47+
.Datasource(ViewBag.histogramData)
48+
)
49+
@(Html.EJ().ScriptManager())
50+
{% endhighlight %}
51+
N> You should bind the data source and necessary mapping properties to render the histogram view. You can differentiate whether the bound data source is project view data or resource view data using the `ganttObject.isProjectViewData` boolean property and `Load` event. Set this property to `true` if the provided data is project view and set to `false` for resource view data.
52+
53+
## Synchronize resource histogram view Gantt with other views
54+
55+
You can synchronize the splitter position and horizontal scroller position in chart side and task values of the project view/resource view Gantt control with resource histogram view Gantt by using the `ActionComplete` and `SplitterResized` events.
56+
57+
### Synchronize with project view
58+
59+
The following code snippet shows how to synchronize the resource histogram view Gantt with project view Gantt.
60+
61+
{% highlight CSHTML %}
62+
@(Html.EJ().Gantt("GanttContainer")
63+
.TaskIdMapping("TaskID")
64+
.TaskNameMapping("TaskName")
65+
.StartDateMapping("StartDate")
66+
.DurationMapping("Duration")
67+
.ProgressMapping("Progress")
68+
.ResourceInfoMapping("ResourceID")
69+
.ResourceNameMapping("ResourceName")
70+
.ResourceIdMapping("ResourceID")
71+
.ChildMapping("SubTasks")
72+
.ViewType(GanttViewType.ProjectView)
73+
.ClientSideEvents(cs => {
74+
cs.SplitterResized("splitterResized").ActionComplete("actionComplete");
75+
})
76+
//..
77+
.Resources(ViewBag.resources)
78+
.Datasource(ViewBag.datasource)
79+
)
80+
81+
@(Html.EJ().Gantt("HistogramContainer")
82+
.ViewType(GanttViewType.HistogramView)
83+
.TaskIdMapping("TaskID")
84+
.TaskNameMapping("TaskName")
85+
.StartDateMapping("StartDate")
86+
.DurationMapping("Duration")
87+
.ProgressMapping("Progress")
88+
.ChildMapping("SubTasks")
89+
.ResourceInfoMapping("ResourceID")
90+
.ResourceNameMapping("ResourceName")
91+
.ResourceIdMapping("ResourceID")
92+
.ClientSideEvents(cs => {
93+
cs.Load("load").SplitterResized("splitterResized").ActionComplete("actionComplete");
94+
})
95+
//..
96+
.Resources(ViewBag.resources)
97+
.Datasource(ViewBag.histogramData)
98+
)
99+
@(Html.EJ().ScriptManager())
100+
<script type="text/javascript">
101+
function load(args) {
102+
this.isProjectViewData = true;
103+
}
104+
function splitterResized(args) {
105+
if (args.isOnResize == false) return;
106+
if (this._id == "GanttContainer") {
107+
$("#HistogramContainer").ejGantt("setSplitterPosition", args.currentSplitterPosition);
108+
} else if (this._id == "HistogramContainer") {
109+
$("#GanttContainer").ejGantt("setSplitterPosition", args.currentSplitterPosition);
110+
}
111+
}
112+
function actionComplete(args) {
113+
if (args.requestType == "scroll" && args.scrollDirection == "horizontal") {
114+
var scrollLeft = args.scrollLeft;
115+
if (this._id == "GanttContainer" && !args.isScrollByMethod) {
116+
$("#HistogramContainer").ejGantt("setChartScrollLeft", scrollLeft);
117+
} else if (this._id == "HistogramContainer" && !args.isScrollByMethod) {
118+
$("#GanttContainer").ejGantt("setChartScrollLeft", scrollLeft);
119+
}
120+
} else if (args.requestType == "recordUpdate") {
121+
$("#HistogramContainer").ejGantt("updateHistogramTask", args.data, "update");
122+
if (args.updatedRecords && args.updatedRecords.length > 0) {
123+
for (var count = 0; count < args.updatedRecords.length; count++) {
124+
$("#HistogramContainer").ejGantt("updateHistogramTask", args.updatedRecords[count], "update");
125+
}
126+
}
127+
} else if (args.requestType == "save" && args.modifiedRecord) {
128+
$("#HistogramContainer").ejGantt("updateHistogramTask", args.modifiedRecord, "update");
129+
} else if (args.requestType == "save" && args.addedRecord) {
130+
$("#HistogramContainer").ejGantt("updateHistogramTask", args.addedRecord, "add");
131+
} else if (args.requestType == "delete") {
132+
$("#HistogramContainer").ejGantt("updateHistogramTask", args.data, "delete");
133+
}
134+
}
135+
</script>
136+
{% endhighlight %}
137+
138+
The following screenshot shows the resource histogram with project view Gantt.
139+
![](HistogramView_images/HistogramView_1.png)
140+
141+
Please find our online demo sample for further reference
142+
[ResourceHistogram](https://mvc.syncfusion.com/demos/web/gantt/histogramview)
143+
144+
### Synchronize with resource view
145+
The following code snippet shows how to synchronize the resource histogram view Gantt with resource view Gantt.
146+
147+
{% highlight CSHTML %}
148+
@(Html.EJ().Gantt("GanttContainer")
149+
.TaskIdMapping("TaskID")
150+
.TaskNameMapping("TaskName")
151+
.StartDateMapping("StartDate")
152+
.EndDateMapping("EndDate")
153+
.DurationMapping("Duration")
154+
.ProgressMapping("Progress")
155+
.GroupNameMapping("TeamName")
156+
.GroupIdMapping("TeamId")
157+
.ViewType(GanttViewType.ResourceView)
158+
.ResourceIdMapping("ResourceId")
159+
.ResourceInfoMapping("ResourceID")
160+
.ResourceNameMapping("ResourceName")
161+
//..
162+
.ClientSideEvents(cs => {
163+
cs.ActionComplete("actionComplete");
164+
cs.SplitterResized("splitterResized");
165+
})
166+
.GroupCollection(ViewBag.groups)
167+
.Resources(ViewBag.resources)
168+
.Datasource(ViewBag.datasource)
169+
)
170+
@(Html.EJ().Gantt("HistogramContainer")
171+
.TaskIdMapping("TaskID")
172+
.TaskNameMapping("TaskName")
173+
.StartDateMapping("StartDate")
174+
.EndDateMapping("EndDate")
175+
.DurationMapping("Duration")
176+
.ProgressMapping("Progress")
177+
.GroupNameMapping("TeamName")
178+
.GroupIdMapping("TeamId")
179+
.ViewType(GanttViewType.HistogramView)
180+
.ResourceIdMapping("ResourceId")
181+
.ResourceInfoMapping("ResourceID")
182+
.ResourceNameMapping("ResourceName")
183+
//..
184+
.ClientSideEvents(cs => {
185+
cs.Load("load");
186+
cs.ActionComplete("actionComplete");
187+
cs.SplitterResized("splitterResized");
188+
})
189+
.GroupCollection(ViewBag.groups)
190+
.Resources(ViewBag.resources)
191+
.Datasource(ViewBag.datasource)
192+
)
193+
@(Html.EJ().ScriptManager())
194+
<script type="text/javascript">
195+
function load(args) {
196+
this.isProjectViewData = false;
197+
}
198+
function splitterResized(args) {
199+
if (args.isOnResize == false) return;
200+
if (this._id == "GanttContainer") {
201+
$("#HistogramContainer").ejGantt("setSplitterPosition", args.currentSplitterPosition);
202+
} else if (this._id == "HistogramContainer") {
203+
$("#GanttContainer").ejGantt("setSplitterPosition", args.currentSplitterPosition);
204+
}
205+
}
206+
function actionComplete(args) {
207+
if (args.requestType == "scroll" && args.scrollDirection == "horizontal") {
208+
var scrollLeft = args.scrollLeft;
209+
if (this._id == "GanttContainer" && !args.isScrollByMethod) {
210+
$("#HistogramContainer").ejGantt("setChartScrollLeft", scrollLeft);
211+
} else if (this._id == "HistogramContainer" && !args.isScrollByMethod) {
212+
$("#GanttContainer").ejGantt("setChartScrollLeft", scrollLeft);
213+
}
214+
}
215+
//task drag and drop action and edit action
216+
else if (args.requestType == "save" && args.modifiedRecord || args.requestType == "recordUpdate") {
217+
var data = args.requestType == "save" ? args.modifiedRecord : args.item ? args.item : args.data;
218+
$("#HistogramContainer").ejGantt("updateHistogramTask", data, "update");
219+
//row delete & group delete
220+
if (args.updatedRecords) {
221+
for (var i = 0; i < args.updatedRecords.length; i++) {
222+
var data = args.updatedRecords[i];
223+
$("#HistogramContainer").ejGantt("updateHistogramTask", data, "update");
224+
}
225+
}
226+
}
227+
//add row
228+
else if (args.requestType == "save" && args.addedRecord) {
229+
$("#HistogramContainer").ejGantt("updateHistogramTask", args.addedRecord, "add");
230+
}
231+
//task delete
232+
else if (args.requestType == "delete") {
233+
$("#HistogramContainer").ejGantt("updateHistogramTask", args.data, "delete");
234+
}
235+
}
236+
</script>
237+
{% endhighlight %}
238+
239+
The following screenshot shows the resource histogram for resource view Gantt.
240+
![](HistogramView_images/HistogramView_2.png)

‎aspnetmvc/Gantt/HistogramView_images/HistogramView_1.PNG‎

30.9 KB
Loading

‎aspnetmvc/Gantt/HistogramView_images/HistogramView_2.PNG‎

32 KB
Loading

‎aspnetmvc/Gantt/Working-time-range.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,28 @@ The below demo explains the working time range in Gantt.
3838
The following screen shot shows working time range in Gantt control.
3939

4040
![](Working-time-range_images/Working-time-range_img1.png)
41+
42+
## Highlight working time range
43+
44+
Highlight the working time range with background color by using the `DayWorkingTime.Background` property. You can highlight the non-working time ranges in a day. To do this, set the `HighlightNonWorkingTime` property to `true`. To customize the non-working time background, use the `NonWorkingBackground` property.
45+
46+
The following code snippet explains how to define the working time range with background in Gantt.
47+
48+
{% highlight CSHTML %}
49+
@(Html.EJ().Gantt("Gantt")
50+
// ...
51+
.HighlightNonWorkingTime(true)
52+
.NonWorkingBackground("#B7C3D0")
53+
.DayWorkingTime(dt => {
54+
dt.From("08:00 AM").To("12:00 PM").Background("#EBF5FB").Add();
55+
dt.From("01:00 PM").To("05:00 PM").Background("#EBF5FB").Add();
56+
})
57+
)
58+
@(Html.EJ().ScriptManager())
59+
{% endhighlight %}
60+
61+
N> The background colors of working time range are highlighted only when the `ScheduleHeaderSettings.ScheduleHeaderType` value as `day`.
62+
63+
The following screenshot shows the working time range with background colors.
64+
65+
![](Working-time-range_images/Working-time-range_img2.png)

‎aspnetmvc/Gantt/Working-time-range_images/Working-time-range_img2.PNG‎

19.8 KB
Loading

0 commit comments

Comments
 (0)