|
| 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 | + |
| 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 | + |
0 commit comments