search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Scheduler: Multiple Tasks Per Row Where ViewMode=Gantt

Asked by JP
9 years ago.

I'm using the DayPilot Pro Scheduler control as a Gantt chart.

In addition to showing Pct Complete, I need to represent tasks that exceed the estimated effort by breaking out the estimated effort vs. the overage.

For lack of a better idea, I attempted to split tasks that exceed the estimate into two (identical) tasks that will appear one after the other on the same row: the first has a duration of the estimated effort and the second has a duration of the overage.

If you look at the attachment, you can see the results. The good news is that in the case of Test Assignment and Test Assignment #2 (see Note 1 in the attachment), the tasks are correctly rendered. The bad news is there are two rows for each of these split tasks and in both cases, the scond row shows no bar.

Another issue is that in the case where there is an overage, I'd like to make the color of the portion of the task that is the estimated effort green and the color of the overage portion red. If you look at Note 2 in the attachment, they both go to red. When I break in BeforeEventRender() at the point where I check if it is an overage or not, the first time e.CssClass is null and I set it to the green class. The second time it is set to the green class and I make it red; it seems to be setting the css class on both events to the same color.

I've also attached a text file of the pertinant code.

Any light you can shed on this would be appreciated.


Answer posted by Dan Letecky [DayPilot]
9 years ago.

The problem #1 can be solved by generating the rows manually (it's really simple) as demonstrated in the Gantt tutorial at

You need to switch to ViewType=Resources and call LoadResources() in Page_Load:


    private void LoadResources()
        DataTable locations = new DataManager().GetTasks();
        DayPilotScheduler1.Resources.Add("New Task", "NEW");
        foreach (DataRow dr in locations.Rows)
            DayPilotScheduler1.Resources.Add((string)dr["TaskName"], Convert.ToString(dr["TaskId"]));

Problem #2: The way you check the isOverage in BeforeEventRender seems to be incorrect: You look up the status by searching the datasource but remember that you have created two items for each event that exceeds the estimate.

The original data item can be reached using e.DataItem in BeforeEventRender so you can just load that:
You can use something like this instead:

protected void DayPilotCalendar1_BeforeEventRender( object sender, BeforeEventRenderEventArgs e )
  int complete = (int) e.DataItem["ProjectPercentComplete"];
  bool isOverage = (bool) e.DataItem["isOverage"];

  e.PercentComplete = complete;

  if ( isOverage )
    e.BackgroundColor = "red";
    e.CssClass = "status_red";
    e.BackgroundColor = "lightgreen";
    e.CssClass = "status_green";

  e.InnerHTML = Server.HtmlEncode( e.PercentComplete + "%" );
  e.EventMoveVerticalEnabled = false;
  e.StaticBubbleHTML = String.Format( "<b>{0}</b><br/>Start: {1}<br/>End: {2}<br/>Percent Complete: {3}%", e.Text, e.Start.ToShortDateString( ), e.End.ToShortDateString( ), e.PercentComplete );

Comment posted by JP
9 years ago.

Thanks for your reply Dan!

I was able to get Problem #2 resolved with your advice above.

Problem #1 is still outstanding.

My code was - essentailly - already doing what you suggested (I believe). When I switch ViewMode from Gantt to Resources, the display loses all rows. It's odd because BeforeEventRender() is firing and completes, the chart is simply row-less when it renders.

Comment posted by Dan Letecky [DayPilot]
9 years ago.

Apologies for the delay.

I've checked your code again and yes, it seems to be fine (it's adding the correct values to Resources collection).

It's strange that it doesn't display the rows.

Can you please do the following:

1. Let me know how you call loadGanttChart() method (in Page_Load?)
2. Let me know what DayPilot version you are using
3. Check how the resources collection is serialized in the output HTML page. In the main Scheduler demo page ( it looks like this:

v.resources = [{"id":"GroupLocations","innerHTML":"Locations","areas":null,"name":"Locations","loaded":true,"expanded":true,"children":[{"id":"A","innerHTML":"Room 1","areas":null,"name":"Room 1","loaded":true,"contextMenu":"cmSpecial"},{"name":"Room 2","innerHTML":"Room 2","areas":null,"id":"B","loaded":true},{"name":"Room 3","innerHTML":"Room 3","areas":null,"id":"C","loaded":true},{"name":"Room 4","innerHTML":"Room 4","areas":null,"id":"D","loaded":true}]},{"id":"GroupPeople","innerHTML":"People","areas":null,"name":"People","loaded":true,"expanded":true,"children":[{"name":"Person 1","innerHTML":"Person 1","areas":null,"id":"E","loaded":true},{"id":"F","innerHTML":"Person 2","areas":null,"name":"Person 2","loaded":true,"toolTip":"Test"},{"id":"G","innerHTML":"Person 3","areas":null,"name":"Person 3","loaded":true,"toolTip":"Test"},{"id":"H","innerHTML":"Person 4","areas":null,"name":"Person 4","loaded":true,"toolTip":"Test"}]},{"id":"GroupTools","innerHTML":"Tools","areas":null,"name":"Tools","loaded":true,"expanded":true,"children":[{"name":"Tool 1","innerHTML":"Tool 1","areas":null,"id":"I","loaded":true},{"id":"J","innerHTML":"Tool 2","areas":null,"name":"Tool 2","loaded":true,"toolTip":"Test"},{"id":"K","innerHTML":"Tool 3","areas":null,"name":"Tool 3","loaded":true,"toolTip":"Test"},{"id":"L","innerHTML":"Tool 4","areas":null,"name":"Tool 4","loaded":true,"toolTip":"Test"}]}];

4. You can also try to force full update by using


in loadGanttChart() method.

Answer posted by Anonymous
9 years ago.

Got it!!

PICNIC (Problem In Chair, Not In Computer) ....

My call to getGanttChartDate( ) contained an unnecessary and as it turns out undesirable call to DayPilotScheduler1.Resources.Clear( ).

This function is called by getGanttChartStartDate( ) and getGanttChartEndDate( ) which are called in the load.

Odd, they are called before the Resources are loaded so I'm unclear why this would have any effect (perhaps Clear( ) is async?). None the less, commenting out the DayPilotScheduler1.Resources.Clear( ) call in getGanttChartDate( ) fixed the problem.

The key was looking at how v.resources was rendered. In this case it was v.resources = [ ];

I KNEW I was loading it so that told me that I had to be clearing it out again someplace.



Comment posted by RB
8 years ago.

Hi JP,
I am trying to do the same thing I believe you are trying to do. Each task can have multiple start and end dates and I want them to appear on the same row like you have it, without the added blank row below.

Were you able to achieve this?

Comment posted by JP
8 years ago.

Wow RB, that was a while ago.

It looks to me like the answer is in the notes above.

If that doesn't do it, or if it is just not working for you, I'd post some code in a new thread.

I'm by no means an expert with this product; there are a lot of very helpful people who know a lot more about this than I.

Good luck!


This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.