Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Gantt / Resource Histogram
    <%@ Page Title="Gantt-Resource Histogram-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This example illustrates the resource histogram view for visualizing the resource work allocation hours in a project." AutoEventWireup="true" CodeBehind="HistogramView.aspx.cs" Inherits="WebSampleBrowser.Gantt.HistogramView" MasterPageFile="~/Samplebrowser.Master" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="SampleHeading" runat="server">
        <span class="sampleName">Gantt / Resource Histogram</span>
    </asp:Content>
    
    
    <asp:Content ID="ControlContent" runat="server" ContentPlaceHolderID="ControlsSection">
        <div>
            <ej:Gantt ID="GanttContainer" ClientIDMode="Static" runat="server" ViewType="ProjectView" TaskIdMapping="TaskID" TaskNameMapping="TaskName"
                StartDateMapping="StartDate" DurationMapping="Duration" ProgressMapping="Progress" ChildMapping="SubTasks" ShowTaskNames="true"
                ResourceIdMapping="ResourceID" ResourceInfoMapping="ResourceID" ResourceNameMapping="ResourceName" ScheduleStartDate="10/15/2017"           
                AllowGanttChartEditing="true" TreeColumnIndex="1" SplitterPosition="15%" IsResponsive="true" IncludeWeekend="false"
                Load="ganttLoad" SplitterResized="splitterResized" ActionComplete="actionComplete">
                <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" EditMode="cellEditing" />
                <ScheduleHeaderSettings ScheduleHeaderType="Week" TimescaleUnitSize="150" UpdateTimescaleView="false" />
                <ToolbarSettings ShowToolbar="true" ToolbarItems="add,delete,update,cancel" />
                <SizeSettings Width="100%" Height="310px" />
            </ej:Gantt>
            <ej:Gantt ID="HistoGanttContainer" ClientIDMode="Static" runat="server" ViewType="HistogramView" TaskIdMapping="TaskID" TaskNameMapping="TaskName"
                StartDateMapping="StartDate" DurationMapping="Duration" ProgressMapping="Progress" ChildMapping="SubTasks"
                ResourceIdMapping="ResourceID" ResourceInfoMapping="ResourceID" ResourceNameMapping="ResourceName" RowHeight="50"    
                AllowGanttChartEditing="true" SplitterPosition="15%" IsResponsive="true" IncludeWeekend="false"
                Load="histoLoad" SplitterResized="splitterResized" ActionComplete="actionComplete">
                <ScheduleHeaderSettings ScheduleHeaderType="Week" TimescaleUnitSize="150"/>
                <SizeSettings Width="100%" Height="300px" />
            </ej:Gantt>
        </div>
    </asp:Content>
    
    <asp:Content ID="Content3" runat="server" ContentPlaceHolderID="ScriptSection">
        <script type="text/javascript">
            function ganttLoad(args) {
                var columns = this.getColumns();
                columns[0].visible = columns[2].visible = columns[5].visible = false;
                columns[6].visible = true;
            }
    
            function histoLoad(args) {
                this.isProjectViewData = true;
            }
    
            function splitterResized(args) {
                if (args.isOnResize == false) return;
                if (this._id == "GanttContainer") {
                    $("#HistoGanttContainer").ejGantt("setSplitterPosition", args.currentSplitterPosition);
                } else if (this._id == "HistoGanttContainer") {
                    $("#GanttContainer").ejGantt("setSplitterPosition", args.currentSplitterPosition);
                }
            }
            function actionComplete(args) {
                if (args.requestType == "scroll" && args.scrollDirection == "horizontal") {
                    var scrollLeft = args.scrollLeft;
                    if (this._id == "GanttContainer" && !args.isScrollByMethod) {
                        $("#HistoGanttContainer").ejGantt("setChartScrollLeft", scrollLeft);
                    } else if (this._id == "HistoGanttContainer" && !args.isScrollByMethod) {
                        $("#GanttContainer").ejGantt("setChartScrollLeft", scrollLeft);
                    }
                } else if (args.requestType == "recordUpdate") {
                    $("#HistoGanttContainer").ejGantt("updateHistogramTask", args.data, "update");
                    if (args.updatedRecords && args.updatedRecords.length > 0) {
                        for (var count = 0; count < args.updatedRecords.length; count++) {
                            $("#HistoGanttContainer").ejGantt("updateHistogramTask", args.updatedRecords[count], "update");
                        }
                    }
                } else if (args.requestType == "save" && args.modifiedRecord) {
                    $("#HistoGanttContainer").ejGantt("updateHistogramTask", args.modifiedRecord, "update");
                }
                else if (args.requestType == "save" && args.addedRecord) {
                    $("#HistoGanttContainer").ejGantt("updateHistogramTask", args.addedRecord, "add");
                }
                else if (args.requestType == "delete") {
                    $("#HistoGanttContainer").ejGantt("updateHistogramTask", args.data, "delete");
                }
            }
        </script>
    </asp:Content>
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using WebSampleBrowser.Gantt.Model;
    namespace WebSampleBrowser.Gantt
    {
        public partial class HistogramView : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                this.GanttContainer.DataSource = GetHistogramData();
                this.GanttContainer.Resources = ResourceHistogramData.GetResourceData();
                this.GanttContainer.DataBind();
                this.HistoGanttContainer.DataSource = GetHistogramData();
                this.HistoGanttContainer.Resources = ResourceHistogramData.GetResourceData();
                this.HistoGanttContainer.DataBind();
            }
    
            public List<HistoTaskDetails> GetHistogramData()
            {
                List<HistoTaskDetails> tasks = new List<HistoTaskDetails>();
    
                tasks.Add(new HistoTaskDetails()
                {
                    TaskID = 1,
                    TaskName = "Plan timeline",
                    StartDate = "10/23/2017",
                    Duration = 4,
                    Progress = "70"
                });
    
                tasks[0].SubTasks = new List<HistoTaskDetails>();
    
                tasks[0].SubTasks.Add(new HistoTaskDetails()
                {
                    TaskID = 2,
                    TaskName = "Plan budget",
                    StartDate = "10/23/2017",
                    Duration = 4,
                    Progress = "80",
                    ResourceID = new List<object>() { 1, 4 }
                });
                tasks[0].SubTasks.Add(new HistoTaskDetails()
                {
                    TaskID = 3,
                    TaskName = "Allocate resource",
                    StartDate = "10/24/2017",
                    Duration = 5,
                    Progress = "65",
                    ResourceID = new List<object>() { 3, 1 }
                });
                tasks[0].SubTasks.Add(new HistoTaskDetails()
                {
                    TaskID = 4,
                    TaskName = "Software Specification",
                    StartDate = "10/24/2017",
                    Duration = 5,
                    Progress = "65",
                    ResourceID = new List<object>() { 5, 4 }
                });
    
    
                tasks.Add(new HistoTaskDetails()
                {
                    TaskID = 5,
                    TaskName = "Design",
                    StartDate = "10/25/2017",
                    Duration = 6,
                });
    
                tasks[1].SubTasks = new List<HistoTaskDetails>();
    
                tasks[1].SubTasks.Add(new HistoTaskDetails()
                {
                    TaskID = 6,
                    TaskName = "Get approval",
                    StartDate = "10/28/2017",
                    Duration = 5,
                    Progress = "60",
                    ResourceID = new List<object>() { 2, 5 }
                });
                tasks[1].SubTasks.Add(new HistoTaskDetails()
                {
                    TaskID = 7,
                    TaskName = "Testing",
                    StartDate = "10/29/2017",
                    Duration = 6,
                    Progress = "77",
                    ResourceID = new List<object>() { 6, 7 }
                });
                tasks[1].SubTasks.Add(new HistoTaskDetails()
                {
                    TaskID = 8,
                    TaskName = "Final Delivery",
                    StartDate = "10/29/2017",
                    Duration = 0,
                    Progress = "77",
                    ResourceID = new List<object>() { 3 }
                });
                return tasks;
    
            }
    
    
            public class ResourceHistogramData
            {
                public class Resources
                {
                    public int ResourceID { get; set; }
                    public string ResourceName { get; set; }
                }
    
                public static List<Resources> GetResourceData()
                {
                    List<Resources> resourceDetails = new List<Resources>();
    
                    resourceDetails.Add(new Resources() { ResourceID = 1, ResourceName = "Robert King" });
                    resourceDetails.Add(new Resources() { ResourceID = 2, ResourceName = "Anne Dodsworth" });
                    resourceDetails.Add(new Resources() { ResourceID = 3, ResourceName = "David william" });
                    resourceDetails.Add(new Resources() { ResourceID = 4, ResourceName = "Nancy Davolio" });
                    resourceDetails.Add(new Resources() { ResourceID = 5, ResourceName = "Janet Leverling" });
                    resourceDetails.Add(new Resources() { ResourceID = 6, ResourceName = "Romey Wilson" });
    
                    return resourceDetails;
                }
    
            }
            public class HistoTaskDetails
            {
                public int TaskID { get; set; }
                public string TaskName { get; set; }
                public string StartDate { get; set; }
                public string EndDate { get; set; }
                public int Duration { get; set; }
                public string Progress { get; set; }
                public List<HistoTaskDetails> SubTasks { get; set; }
                public List<object> ResourceID { get; set; }
                public string Predecessors { get; set; }
            }
        }
    }