How to: Create a Gantt Chart Using the JS Grid Control

Article
10/20/2016

Applies to: SharePoint Foundation 2010

This how-to demonstrates how to create a Gantt chart by using the JS Grid control. In this topic, which builds upon How to: Create a Basic JS Grid Control, you will define styles for summary, standard, milestone, and percent-complete Gantt bars. Each bar style has a shape, a pattern, and a color. Each bar end has a bar end style, a color, and a pattern. The code that defines the Gantt bar styles will reside in the GanttUtilities.cs file, which will be located in the GridUtils folder that is created in How to: Create a Basic JS Grid Control. You will modify the grid data to provide data that better demonstrates the capabilities of the Gantt chart. And finally, you will use the enableGantt method of GridDataSerializer to enable the Gantt chart.

Note

Your computer might show different names or locations for some of the Visual Studio user interface elements in the following instructions. The Visual Studio edition that you have and the settings that you use determine these elements.

Prerequisites

Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
SharePoint development tools in Microsoft Visual Studio 2010
Completion of How to: Create a Basic JS Grid Control

Note

Although you can perform this procedure without using Visual Studio 2010, it is easier to use Visual Studio 2010 and the SharePoint development tools in Microsoft Visual Studio 2010.

To create the Gantt Bar Styles

In Visual Studio, open the project that you created by following the instructions in How to: Create a Basic JS Grid Control.
Open GridUtilities.cs.
The DefaultGanttBarStyleIdsColumnName stores the default Gantt bar style Id information. You do not want the DefaultGanttBarStyleIdsColumnName to be used either as a column or a field. The code to prevent this is already in GridUtilities.cs, but it is commented out.

Uncomment the following lines:
```
// && iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
// Uncomment for the Gantt how-to
```
and also
```
// && dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
// Uncomment for Gantt how-to
```
Add a reference to System.Drawing.

In Solution Explorer, right-click References, and then click Add Reference. On the .NET tab, select System.Drawing, and then click OK. System.Drawing is used to draw the bars and bar ends.
Create the GanttUtilities.cs file.
1. In Solution Explorer, right-click the GridUtils folder, point to Add, and then click New Items.
2. Select Visual C#, select Code, and then select Code File.
3. Name the file GanttUtilities.cs.

Copy the following code into GanttUtilities.cs.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing; // added for Gantt styles
using Microsoft.SharePoint.JSGrid;

namespace JSGridSample.GridUtilityLib
{
    public class GanttUtilities
    {
        public enum CustomBarStyle { Summary, Standard, Milestone, PctComplete }

        public static GanttStyleInfo GetStyleInfo()
        {
            var styleInfoObj = new GanttStyleInfo();

            /*Summary Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.Summary, BarShape.TopHalf, Color.Gray, BarPattern.Solid,
                BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled,
                BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled,
                "Start Date", "Finish Date", 1));

            /*Standard Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.Standard, BarShape.Full, Color.Blue, BarPattern.Solid,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                "Start Date", "Finish Date", 1));

            /*Milestone Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.Milestone, BarShape.None, Color.Black, BarPattern.Solid,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                BarEndShape.Diamond, Color.Black, BarShapePattern.Filled,
                "Finish Date", "Finish Date", 1));

            /*PctComplete Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.PctComplete, BarShape.MidHalf, Color.Black, BarPattern.Solid,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                "Start Date", "CompleteThrough", 1));

            return styleInfoObj;
        }
    }
}

The GanttStyleInfo class defines summary, standard, milestone, and percent-complete bar styles.

To enable the Gantt Chart

Open JSGridWebPartUserControl.ascx.cs.

Add EnableGantt to the Page_Load method.

// Point the grid serializer at the grid serializer data.
    _grid.GridDataSerializer = gds;

     // Tell the grid to listen to the GridManager controller.
    _grid.JSControllerClassName = "GridManager";

   // Enable the Gantt chart.
   gds.EnableGantt(DateTime.Now.AddDays(0), DateTime.Now.AddDays(10), GanttUtilities.GetStyleInfo(), null);

EnableGantt(DateTime, DateTime, GanttStyleInfo, String) defines the earliest date that a Gantt bar begins, the latest date a bar ends, where to find the Gantt bar styles, and a dependents column name (null in this case). For simplicity, the beginning and end dates are generated from the current date.

The next step is to modify the grid data to associate Gantt bar styles to each data row.

To modify the Grid Data file

Open GridData.cs.

The Gantt chart requires a file to store the Gantt bar style Id information. The code to do this is already in GridData.cs, only commented out. Uncomment the following line.

//data.Columns.Add(new DataColumn(GridSerializer.DefaultGanttBarStyleIdsColumnName, typeof(GanttUtilities.CustomBarStyle[]))); // uncomment for the Create a Gantt Chart Using JS Grid How-To.

Locate the code that assigns random dates to the start, complete through, and finish dates.

                dr["Start Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                dr["Finish Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                dr["CompleteThrough"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));

Replace that code with the following.

stDate = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
if (i % 10 == 0)
                {
                    parent = curKey;
                    j++;
                    dr["Start Date"] = stDate;
                    dr["Finish Date"] = stDate.AddDays(10);
                    //summary gantt bar style
                    dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[1] { (GanttUtilities.CustomBarStyle)(0) };

                }
                else if (i % 10 == 5)
                {
                    // Milestone 
                    dr["Start Date"] = stDate;
                    dr["Finish Date"] = dr["Start Date"];//  +DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                    // Milestone Gantt bar style
                    dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[1] { (GanttUtilities.CustomBarStyle)(2) };
                }
                else
                {
                    dr["Start Date"] = stDate.AddDays(i % 4); ;
                    dr["Finish Date"] = stDate.AddDays(i % 10);
                    dr["CompleteThrough"] = stDate.AddDays(1);
                    // Standard Gantt bar style
                    dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) };
                }

The first task is assigned a summary task style, the fifth is assigned a milestone style, and the others are assigned a "standard" bar style.

Gantt bar styles are set by using DefaultGanttBarStyleIdsColumnName. If more than one bar style is used, each bar style is drawn on top of the previous bar style so the order that the bar styles are applied is important. Notice that the standard bar style is created by drawing the standard bar first, and then the complete through bar. This is determined by the order of bar styles in the custom bar style array.

dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) };

To test the Web Part

In Visual Studio, press F5 to run the project.

When you run the project, deployment occurs and the SharePoint 2010 site opens. The Web Part is automatically added to the SharePoint 2010 Web Part gallery.
Open and edit any Web Parts page. You can add the Web Part to any Web Parts page.
Click Insert, click Web Part, and then select the JSWebPart from the custom category. The Web Part is displayed on the page.
When the Gantt chart appears in the browser window, modify one of the start, complete through, or finish dates.

The Gantt chart monitors for changes to the start, complete through, or end dates. If there is a change in one of those dates, the bar is redrawn.

Share via

How to: Create a Gantt Chart Using the JS Grid Control

Prerequisites

To create the Gantt Bar Styles

To enable the Gantt Chart

To modify the Grid Data file

To test the Web Part

See Also

Concepts

Additional resources