Gantt Chart isn't displaying my values

[Eric Pilati]

I'm trying to follow the documentation and have worked with both <SfDataGrid> and <SfScheduler>, so I thought I understood how a number of things worked. I've called in an IEnumerable that holds all of my values and then parsed that into a list of type <ProjectSummary> to create a row for all the different phases of each project. When I load the page, none of my values are loading as they should into the columns.

 What's more, when I tried creating a dummy page using the code found here, The Blazor components didn't seem to work (the parent rows would not open when clicking on them and the chart itself wouldn't load). 

I'd like to figure out what it is that I'm missing so that I can get my chart running.

Here's the Code for my .razor page


@page "/LookAheadSchedule"
@using Microsoft.AspNetCore.DataProtection
@using Microsoft.EntityFrameworkCore
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Gantt
@using Syncfusion.Blazor.Grids
@using System.Collections
@using System.Dynamic
@using System.IO
@using System.Text.Json
@using TestBlazor.Services
@using TestBlazor.Components.Models
@using TestBlazor.Components.Pages
@using TestBlazor.Utility




@inject ProjectService projectService


<SfGantt DataSource="@ProjectPhases"
         ProjectStartDate="StartDate"
         ProjectEndDate="EndDate"
         AllowSorting="true">

    @* <GanttResource DataSource="ResourceCollection"
                   Id="1"
                   Name="Name"
                   MaxUnits="100"></GanttResource> *@


    <GanttResource DataSource="Projects"
                   Id="@nameof(ProjectSummary.Id)"
                   Name="@nameof(ProjectSummary.ProjectTitle)"
                   MaxUnits="100"
                   TValue="ProjectSummary"
                   TResources="ProjectSummary"></GanttResource>




    <GanttTaskFields Id="@nameof(ProjectSummary.ProjectId)"
                     Name="@nameof(ProjectSummary.ProjectTitle)"
                     StartDate="@nameof(ProjectSummary.StartDate)"
                     EndDate="@nameof(ProjectSummary.EndDate)"
                     Duration="@nameof(ProjectSummary.Duration)"
                     ParentID="@nameof(ProjectSummary.ProjectTitle)"
                     Progress="100"></GanttTaskFields>


       @*  <GanttTaskFields Id="@nameof(GanttModel.TaskInfoModel.Id)" Name="@nameof(GanttModel.TaskInfoModel.Name)" StartDate="@nameof(GanttModel.TaskInfoModel.StartDate)" EndDate="@nameof(GanttModel.TaskInfoModel.EndDate)" Duration="@nameof(GanttModel.TaskInfoModel.Duration)" Progress="@nameof(GanttModel.TaskInfoModel.Progress)"
                     ParentID="@nameof(GanttModel.TaskInfoModel.ParentId)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)"></GanttTaskFields> *@



    <GanttTaskbarSettings EnableMultiTaskbar="true"></GanttTaskbarSettings>



    <GanttTimelineSettings TimelineUnitSize="45">
        <GanttTopTierSettings Unit="TimelineViewMode.Month"></GanttTopTierSettings>
        <GanttBottomTierSettings Unit="TimelineViewMode.Week"></GanttBottomTierSettings>
    </GanttTimelineSettings>

    <GanttColumns>
        <GanttColumn Field="@nameof(ProjectSummary.ProjectTitle)"
                     HeaderText="Project Title"></GanttColumn>
        <GanttColumn Field="@nameof(ProjectSummary.StartDate)"
                     HeaderText="Start Date"></GanttColumn>
        <GanttColumn Field="@nameof(ProjectSummary.EndDate)"
                     HeaderText="End Date"></GanttColumn>
    </GanttColumns>


</SfGantt>



@code {

    #region Variables
    public IEnumerable<ProjectSummary> Projects { get; set; }
    private List<GanttModel.TaskInfoModel> TaskCollection { get; set; } = new();
    private List<GanttModel.ResourceInfoModel> ResourceCollection { get; set; } = new();
    private static List<GanttModel.AssignmentModel> AssignmentCollection { get; set; } = new();
    public DateTime StartDate { get; set; } = DateTime.Today;
    public DateTime EndDate { get; set; }


    private DateTime ProjectStart = new DateTime(2021, 3, 28);
    private DateTime ProjectEnd = new DateTime(2021, 7, 28);


    public List<ProjectSummary> ProjectPhases { get; set; } = new List<ProjectSummary>();
    #endregion



    protected override async Task OnInitializedAsync()
    {
        Projects = projectService.LookAheadSchedules();
        TaskCollection = GanttModel.GetTaskCollection();
        ResourceCollection = GanttModel.GetResources;

        if (Projects.Any()) EndDate = projectService.LastScheduleDate();

        //Function to break phases up into different lines
        SeperatePhases();
    }








    public void SeperatePhases()
    {
        foreach (var row in Projects)
        {
            if (row.PrelimPlanDuration == 0 ||
                (row.PrelimPlanEndDate < DateTime.Now &&
                 row.PrelimPlanApprovalEndDate < DateTime.Now &&
                 row.WorkDrawEndDate < DateTime.Now &&
                 row.ApprovalsEndDate < DateTime.Now &&
                 row.BidAndAwardEndDate < DateTime.Now &&
                 row.ConstructionEndDate < DateTime.Now &&
                 row.CampusMoveInEndDate < DateTime.Now))
            {
                continue;
            }
            else
            {
                ProjectPhases.Add(new ProjectSummary() { ProjectTitle = row.ProjectTitle,
                                                         ProjectId = row.Id,
                                                         Duration = row.PrelimPlanDuration,
                                                         StartDate = row.PrelimPlanStartDate,
                                                         EndDate = row.PrelimPlanEndDate,
                                                         PhaseType = "00-Funding Pending",
                                                         //ADD PROGRESS WHICH IS THE DIFFERENT FIELDS IN THE PROJECT TABLE WITH THE DATES THAT END IN NOTES
                                                         });
            }
            if (row.PrelimPlanApprovalDuration > 0)
            {
                ProjectPhases.Add(new ProjectSummary() { ProjectTitle = row.ProjectTitle,
                                                         ProjectId = row.Id,
                                                         Duration = row.PrelimPlanApprovalDuration,
                                                         StartDate = row.PrelimPlanApprovalStartDate,
                                                         EndDate = row.PrelimPlanApprovalEndDate,
                                                         PhaseType = "01-Planning",
                                                         });
            }
            if (row.WorkDrawDuration > 0)
            {
                ProjectPhases.Add(new ProjectSummary() { ProjectTitle = row.ProjectTitle,
                                                         ProjectId = row.Id,
                                                         Duration = row.WorkDrawDuration,
                                                         StartDate = row.WorkDrawStartDate,
                                                         EndDate = row.WorkDrawEndDate,
                                                         PhaseType = "02-Design",
                                                         });
            }
            if (row.ApprovalsDuration > 0)
            {
                ProjectPhases.Add(new ProjectSummary() { ProjectTitle = row.ProjectTitle,
                                                         ProjectId = row.Id,
                                                         Duration = row.ApprovalsDuration,
                                                         StartDate = row.ApprovalsStartDate,
                                                         EndDate = row.ApprovalsEndDate,
                                                         PhaseType = "03-Design Approval",
                                                         });
            }
            if (row.BidAndAwardDuration > 0)
            {
                ProjectPhases.Add(new ProjectSummary() { ProjectTitle = row.ProjectTitle,
                                                         ProjectId = row.Id,
                                                         Duration = row.BidAndAwardDuration,
                                                         StartDate = row.BidAndAwardStartDate,
                                                         EndDate = row.BidAndAwardEndDate,
                                                         PhaseType = "04-Procurement",
                                                         });
            }
            if (row.ConstructionDuration > 0)
            {
                ProjectPhases.Add(new ProjectSummary() { ProjectTitle = row.ProjectTitle,
                                                         ProjectId = row.Id,
                                                         Duration = row.ConstructionDuration,
                                                         StartDate = row.ConstructionStartDate,
                                                         EndDate = row.ConstructionEndDate,
                                                         PhaseType = "05-Construction",
                                                         });
            }
            if (row.CampusMoveInDuration > 0)
            {
                ProjectPhases.Add(new ProjectSummary() { ProjectTitle = row.ProjectTitle,
                                                         ProjectId = row.Id,
                                                         Duration = row.CampusMoveInDuration,
                                                         StartDate = row.CampusMoveInStartDate,
                                                         EndDate = row.CampusMoveInEndDate,
                                                         PhaseType = "06-Close-Out",
                                                         });
            }
        }
    }
}

[Ajithkumar Gopalakrishnan]

Hi Eric,

Greetings from Syncfusion Support,

Query 1- What's more, when I tried creating a dummy page using the code found here, The Blazor components didn't seem to work (the parent rows would not open when clicking on them and the chart itself wouldn't load).

We were also able to replicate the issue on our end, where the chart fails to render properly when the script is not referenced or the renderMode is not set in the application. To resolve this, we recommend updating the script reference in your application.

CDN Reference:

https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference

Static web assets:

https://blazor.syncfusion.com/documentation/common/adding-script-references#refer-script-from-static-web-assets

Additionally, ensure that the Gantt chart triggers the script side correctly during the initial render, which may depend on the renderMode of your application. For a server app, use InteractiveServer since script-side calls need to render and perform CRUD operations in the Gantt chart. We have attached a code snippet and a link to the UG document for your reference.

@using Syncfusion.Blazor.Gantt

@using Syncfusion.Blazor.Buttons

 

@rendermode InteractiveServer

 

<SfGantt @ref="Gantt"

         >

  …
</SfGantt>

For more information, you may refer to the following link:

https://blazor.syncfusion.com/documentation/gantt-chart/getting-started-with-web-app

Query 2- I'm trying to follow the documentation and have worked with both <SfDataGrid> and <SfScheduler>, so I thought I understood how a number of things worked. I've called in an IEnumerable that holds all of my values and then parsed that into a list of type <ProjectSummary> to create a row for all the different phases of each project. When I load the page, none of my values are loading as they should into the columns.

We can use the IEumerable list of collection in Gantt chart. We noticed in the shared code snippet that you're using a single overall model class in your sample. This is not the correct approach for the resource view in the Gantt chart. When using the resource view, you need to use separate model classes for the different fields: one for task fields, one for the resource collection, and another for the assignment class. We have attached a code snippet and provided a link to the UG document for your reference.

<SfGantt @ref="Gantt" ShowOverallocation="true" TreeColumnIndex="1" RowHeight="38"  DataSource="@TaskCollection" Height="450px" Width="100%" ViewType="ViewType.ResourceView" CollapseAllParentTasks=true

         Toolbar="@(new List<Object>() { "Add", "Cancel", "Update" , "Delete", "Edit", "CollapseAll", "ExpandAll" })" AllowResizing="true">

    <GanttTaskFields Id="@nameof(MultiTaskbarData.TaskInfoModel.Id)" Name="@nameof(MultiTaskbarData.TaskInfoModel.Name)" StartDate="@nameof(MultiTaskbarData.TaskInfoModel.StartDate)" EndDate="@nameof(MultiTaskbarData.TaskInfoModel.EndDate)" Duration="@nameof(MultiTaskbarData.TaskInfoModel.Duration)" Progress="@nameof(MultiTaskbarData.TaskInfoModel.Progress)"

                     ParentID="@nameof(MultiTaskbarData.TaskInfoModel.ParentId)" Work="@nameof(MultiTaskbarData.TaskInfoModel.Work)" Dependency="@nameof(MultiTaskbarData.TaskInfoModel.Predecessor)">

    </GanttTaskFields>

    <GanttResource DataSource="ResourceCollection" Id="@nameof(MultiTaskbarData.ResourceInfoModel.Id)" Name="@nameof(MultiTaskbarData.ResourceInfoModel.Name)" MaxUnits="@nameof(MultiTaskbarData.ResourceInfoModel.MaxUnit)" Group="@nameof(MultiTaskbarData.ResourceInfoModel.Group)" TValue="MultiTaskbarData.TaskInfoModel" TResources="MultiTaskbarData.ResourceInfoModel"></GanttResource>

    <GanttAssignmentFields DataSource="AssignmentCollection" PrimaryKey="@nameof(MultiTaskbarData.AssignmentModel.Id)" TaskID="@nameof(MultiTaskbarData.AssignmentModel.TaskId)" ResourceID="@nameof(MultiTaskbarData.AssignmentModel.ResourceId)" Units="@nameof(MultiTaskbarData.AssignmentModel.Unit)" TValue="MultiTaskbarData.TaskInfoModel" TAssignment="MultiTaskbarData.AssignmentModel"></GanttAssignmentFields>

…

</SfGantt>

private IEnumerable<MultiTaskbarData.TaskInfoModel> TaskCollection { get; set; }

private IEnumerable<MultiTaskbarData.ResourceInfoModel> ResourceCollection { get; set;

private static IEnumerable<MultiTaskbarData.AssignmentModel> AssignmentCollection { get; set; }

protected override void OnInitialized()

{

    TaskCollection = MultiTaskbarData.GetTaskCollection();

    ResourceCollection = MultiTaskbarData.GetResources;

    AssignmentCollection = MultiTaskbarData.GetAssignmentCollection();

}

public class ResourceInfoModel

{

    public int Id { get; set; }

    public string Name { get; set; }

    public double MaxUnit { get; set; }

    public string? Group { get; set; }

}

public class AssignmentModel

{

    public int Id { get; set; }

    public int TaskId { get; set; }

    public int ResourceId { get; set; }

    public double Unit { get; set; }

}
public class TaskInfoModel

{

    public int Id { get; set; }

    public string Name { get; set; }

    public DateTime StartDate { get; set; }

    public DateTime EndDate { get; set; }

    public string Duration { get; set; }

    public int Progress { get; set; }

    public int? ParentId { get; set; }

    public string Predecessor { get; set; }

    public string Notes { get; set; }

    public double? Work { get; set; }

    public string TaskType { get; set; }

}

For more information, you may refer to the following link:

https://blazor.syncfusion.com/documentation/gantt-chart/resource-view

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G