Procédure : créer un diagramme de Gantt à l’aide de la grille JS

Article
09/24/2014

Dernière modification : mardi 15 février 2011

S’applique à : SharePoint Foundation 2010

Cette procédure montre comment créer un diagramme de Gantt en utilisant le Contrôle Grille JS. Dans cette rubrique, qui est basée sur Procédure : créer une grille JS de base, vous allez définir des styles pour des barres du Gantt récapitulatives, standard, à jalons et de pourcentage achevé. Chaque style de barre possède une forme, un motif et une couleur. Chaque extrémité de barre possède un style, une couleur et un motif. Le code qui définit les styles de barres du Gantt réside dans le fichier GanttUtilities.cs, situé dans le dossier GridUtils créé dans Procédure : créer une grille JS de base. Vous allez modifier les données de la grille pour fournir des données qui illustrent mieux les fonctionnalités du diagramme de Gantt. Pour finir, vous allez utiliser la méthode enableGantt de GridDataSerializer pour activer le diagramme de Gantt.

Notes

Il est possible que votre ordinateur affiche des noms ou des emplacements différents pour certains éléments de l’interface utilisateur de Visual Studio dans les instructions suivantes. L’édition Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments.

Conditions requises

Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
Outils de développement SharePoint dans Microsoft Visual Studio 2010
Réalisation de Procédure : créer une grille JS de base

Notes

Bien que vous puissiez effectuer cette procédure pas à pas sans utiliser Visual Studio 2010, il est plus facile de recourir à Visual Studio 2010 et aux Outils de développement SharePoint dans Microsoft Visual Studio 2010.

Pour créer les styles de barres du Gantt

Dans Visual Studio, ouvrez le projet que vous avez créé conformément aux instructions indiquées dans Procédure : créer une grille JS de base.
Ouvrez GridUtilities.cs.
DefaultGanttBarStyleIdsColumnName stocke les informations de l’ID des styles de barres du Gantt par défaut. Vous ne voulez pas que DefaultGanttBarStyleIdsColumnName soit utilisé en tant que colonne ou que champ. Le code qui empêche cela se trouve déjà dans GridUtilities.cs, mais il est commenté.

Supprimez les marques de commentaire des lignes suivantes :
```
// && iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
// Uncomment for the Gantt how-to
```
ainsi que
```
// && dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
// Uncomment for Gantt how-to
```
Ajoutez une référence à System.Drawing.

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur Références, puis cliquez sur Ajouter une référence. Sous l’onglet .NET, sélectionnez System.Drawing, puis cliquez sur OK. System.Drawing permet de dessiner les barres et leurs extrémités.
Créez le fichier GanttUtilities.cs.
1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier GridUtils, pointez sur Ajouter, puis cliquez sur Nouveaux éléments.
2. Sélectionnez Visual C#, Code, puis Fichier de code.
3. Attribuez au fichier le nom GanttUtilities.cs.

Copiez le code suivant dans 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;
        }
    }
}

La classe GanttStyleInfo définit les styles de barres récapitulatives, standard, à jalons et de pourcentage achevé.

Pour activer le diagramme de Gantt

Ouvrez JSGridWebPartUserControl.ascx.cs.
Ajoutez EnableGantt à la méthode Page_Load.
```
// 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) définit la date initiale la plus ancienne d’une barre du Gantt, la date finale la plus proche d’une barre, l’emplacement des styles de barres du Gantt et un nom de colonne de dépendants (null en l’occurrence). Pour des raisons de simplicité, les dates de début et de fin sont générées à partir de la date actuelle.

L’étape suivante consiste à modifier les données de la grille pour associer des styles de barre du Gantt à chaque ligne de données.

Pour modifier le fichier des données de la grille

Ouvrez GridData.cs.
Le diagramme de Gantt requiert un fichier pour le stockage des informations de l’ID du style de barres du Gantt. Le code qui permet d’effectuer cette opération se trouve déjà dans GridData.cs, mais il a été commenté. Supprimez les marques de commentaire de la ligne ci-après.
```
//data.Columns.Add(new DataColumn(GridSerializer.DefaultGanttBarStyleIdsColumnName, typeof(GanttUtilities.CustomBarStyle[]))); // uncomment for the Create a Gantt Chart Using JS Grid How-To.
```

Recherchez le code qui attribue des dates aléatoires aux dates de début, intermédiaire d’achèvement et de fin.

                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));

Remplacez ce code par le code suivant.

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) };
                }

La première tâche se voit affecter un style de tâche récapitulative, la cinquième un style jalon et les autres un style de barre « standard ».

Les styles de barres du Gantt sont définis à l’aide de DefaultGanttBarStyleIdsColumnName. Si plusieurs styles de barres sont utilisés, chaque style est dessiné au-dessus du style précédent, d’où l’importance de l’ordre d’application des styles de barres. Notez que le style de barre standard est créé par le dessin de la barre standard, puis par celui de la barre intermédiaire d’achèvement. Cette procédure est déterminée par l’ordre des styles de barres dans le tableau des styles de barres personnalisés.

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

Pour tester le composant WebPart

Dans Visual Studio, appuyez sur la touche F5 pour exécuter le projet.

Lorsque vous exécutez le projet, le déploiement se produit et le site SharePoint 2010 s’ouvre. Le composant WebPart est automatiquement ajouté à la galerie de composants WebPart SharePoint 2010.
Ouvrez et modifiez une Page de composants WebPart. Vous pouvez ajouter le composant WebPart à n’importe quelle Page de composants WebPart.
Cliquez sur Insérer, cliquez sur Composant WebPart, puis sélectionnez le composant JSWebPart dans la catégorie personnalisée. Le composant WebPart apparaît dans la page.
Lorsque le diagramme de Gantt apparaît dans la fenêtre du navigateur, modifiez la date de début, intermédiaire d’achèvement ou de fin.

Le diagramme de Gantt détermine si des modifications ont été apportées à la date de début, intermédiaire d’achèvement ou de fin. Si tel est le cas, la barre est redessinée.

Voir aussi

Concepts

Contrôle Grille JS

Conseils pour implémenter le contrôle Grille JS

Partager via