Procédure : créer une grille hiérarchique

Article
09/24/2014

Dernière modification : jeudi 16 juin 2011

S’applique à : SharePoint Foundation 2010

Cette procédure montre comment créer un Contrôle Grille JS hiérarchique. Elle repose sur le projet réalisé dans Procédure : créer une grille JS de base.

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 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.

Création d’une grille hiérarchique

Créez une grille hiérarchique en appelant EnableHierarchy(DataTable, String, String, Boolean). La méthode requiert une colonne clé parente et une colonne de texte de plan. La colonne clé parente et la colonne de texte de plan ont déjà été incluses dans les fichiers GridData.cs et GridUtilities.cs créés dans Procédure : créer une grille JS de base ; la seule opération à effectuer consiste à activer la hiérarchie.

Pour créer une grille hiérarchique

Dans les Outils de développement SharePoint dans Microsoft Visual Studio 2010, ouvrez le projet JSGrid qui a été créé conformément à la procédure indiquée dans Procédure : créer une grille JS de base.
Ouvrez JsGridWebPartUserControl.ascx.cs.
Dans la méthode Page_Load, dès que vous avez défini le contrôleur de la grille, activez la hiérarchie en utilisant EnableHierarchy(DataTable, String, String, Boolean).
```
_grid.JSControllerClassName = "GanttManager";
gds.EnableHierarchy(null, "HierarchyParentKey", "Title", false);
```
Le premier argument, s’il a pour valeur Null, définit une table de données non filtrée. Le deuxième argument est la colonne de clé parente de la hiérarchie, HierarchyParentKey, définie dans GridData.cs. Le troisième paramètre indique la colonne qui affiche l’indicateur de la hiérarchie. (En l’occurrence, il s’agit de la colonne Title, également définie dans GridData.cs.) Le dernier paramètre, s’il a pour valeur true, indique que la table de données non filtrée doit être transmise au client. Pour des raisons de simplicité, cet exemple n’utilise pas de table de données non filtrée.
Passez en revue les définitions de HierarchyParentKey et Title dans GridUtilities.cs.

Ouvrez GridUtilities.cs.

Dans GridUtilities.cs, HierarchyParentKey ne doit pas être visible. Gardez à l’esprit que les colonnes sont visibles, contrairement aux champs ; c’est la raison pour laquelle nous nous assurons que HierarchyParentKey n’est pas visible dans GridUtilities.cs.
```
if (iterator.ColumnName != "Key"
                    && iterator.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName
                    && iterator.ColumnName != "HierarchyParentKey"
                    && iterator.ColumnName.Substring(0, 5) != "costq"
                    && iterator.ColumnName.Substring(0, 5) != "Quart")
```

Ouvrez GridData.cs pour passer en revue les définitions de HierarchyParentKey et Title dans GridData.cs.

Les colonnes Title et HierarchyParentKey sont ajoutées à la méthode DataTable.

data.Columns.Add(new DataColumn("HierarchyParentKey", typeof(Guid))); // Hierarchial Grid
data.Columns.Add(new DataColumn("Title", typeof(string)));

Dans la méthode DataTable, notez le code qui remplit les colonnes HierarchyParentKey et Title avec des données.

     // used for the hierarchy grid how-to.
              dr["Key"] = curKey;
                if (i % 10 == 0)
                {
                    parent = curKey;
                    j++;
                }
                if (parent.HasValue)
                {
                    dr["HierarchyParentKey"] = parent.Value;
                }
                if (parent == null)
                {
                    parent = curKey;
                }
                dr["Tasks"] = "Task " + j + "." + i % 10;

Dans cet exemple, l’opérateur de module permet de créer 10 tâches secondaires pour chaque tâche principale. Les numéros de tâche, tels que 1.1, 1.2 et 1.3, sont stockés dans la colonne Title.

Les listes complètes de GridData.cs et GridUtilities.cs sont disponibles dans Procédure : créer une grille JS de base.

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 la page de composants WebPart de votre choix. 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.

Voir aussi

Référence

EnableHierarchy(DataTable, String, String, Boolean)

Partager via