Vue d'ensemble du contrôle serveur Web TreeView

Article
10/22/2014

Mise à jour : novembre 2007

Le contrôle serveur Web TreeView est utilisé pour afficher des données hiérarchiques, telles qu'une table des matières ou un répertoire des fichiers, dans une arborescence.

Cette rubrique contient les sections suivantes :

Fonctionnalités
Contexte
Exemples de code
Référence de classe

Fonctionnalités

Le contrôle TreeView prend en charge les fonctionnalités suivantes :

Liaison de données automatique qui permet aux nœuds du contrôle d'être lié aux données hiérarchiques, telles qu'un document XML.
Prise en charge de la navigation du site via une intégration avec le contrôle SiteMapDataSource.
Texte de nœud qui peut être affiché comme texte sélectionnable ou liens hypertexte.
Apparence personnalisable grâce à des thèmes, des images définies par l'utilisateur et des styles.
Accès par programme au modèle d'objet TreeView, qui vous permet de créer dynamiquement des arborescences, de remplir des nœuds, de définir des propriétés, et ainsi de suite.
Remplissage de nœud par des rappels au serveur côté client (sur les navigateurs pris en charge).
Possibilité d'afficher une case à cocher à côté de chaque nœud.

Retour au début

Contexte

Le contrôle TreeView peut afficher plusieurs types différents de données : données statiques qui sont spécifiées de façon déclarative dans le contrôle, données qui sont liées au contrôle, ou données qui sont ajoutées par programme au contrôle TreeView, en réponse à des actions de l'utilisateur.

Affichage de données statiques

Vous pouvez afficher des données statiques dans le contrôle TreeView en créant une collection d'éléments TreeNode qui sont enfants du contrôle TreeView. Ces éléments enfants sont également connus comme nœuds enfants.

L'exemple suivant affiche le balisage pour un contrôle TreeView qui contient trois nœuds, dont deux possèdent des nœuds enfants.

<asp:TreeView ID="MyTreeView" Runat="server">
  <Nodes>
    <asp:TreeNode Value="Child1" Expanded="True" Text="1">
      <asp:TreeNode Value="Grandchild1" Text="A" />
      <asp:TreeNode Value="Grandchild2" Text="B" />
    </asp:TreeNode>
    <asp:TreeNode Value="Child2" Text="2" />
    <asp:TreeNode Value="Child3" Expanded="True" Text="3">
      <asp:TreeNode Value="Grandchild1" Text="A" />
    </asp:TreeNode>
  </Nodes>
</asp:TreeView>

Liaison de données au contrôle TreeView

Vous pouvez lier un contrôle TreeView à une source de données qui prend en charge l'interface IHierarchicalDataSource, comme les contrôles XmlDataSource et SiteMapDataSource. En outre, lors de la liaison de données, vous contrôlez entièrement les champs qui sont remplis à partir de la source de données. Pour plus d'informations, consultez Liaison de données au contrôle serveur Web TreeView.

Affichage par programme de données en utilisant TreeNodeCollection

Vous pouvez remplir par programme un contrôle TreeView avec des données en accédant à la propriété Nodes qui retourne une classe TreeNodeCollection. TreeNodeCollection est une collection fortement typée d'objets TreeNode. Étant donné qu'un objet TreeNode contient une propriété appelée ChildNodes qui peut contenir des objets TreeNode, la classe TreeNodeCollection est une structure de données hiérarchique qui représente tous les nœuds du contrôle TreeView.

Pour obtenir un exemple de parcours de la collection Nodes, consultez Nodes.

Types de nœuds TreeView

Le contrôle TreeView se compose d'un ou de plusieurs nœuds. Chaque entrée dans l'arborescence est appelée un nœud et est représentée par un objet TreeNode. Le tableau suivant décrit les trois types de nœuds différents.

Type de nœud	Description
Racine	Nœud qui n'a pas de nœud parent, mais qui possède un ou plusieurs nœuds enfants.
Parent	Nœud qui a un nœud parent et un ou plusieurs nœuds enfants.
Feuille	Nœud qui n'a pas de nœuds enfants.

Bien qu'une arborescence typique ne possède qu'un seul nœud racine, le contrôle TreeView vous permet d'y ajouter plusieurs nœuds racine. C'est utile lorsque vous souhaitez afficher des listes d'éléments sans afficher un nœud racine principal unique, comme dans une liste de catégories de produits.

Chaque nœud a une propriété Text et une propriété Value. La valeur de la propriété Text est affichée dans le contrôle TreeView, tandis que la propriété Value sert à stocker les données supplémentaires relatives au nœud, telles que les données passées à l'événement de publication qui est associé au nœud.

Lorsqu'un utilisateur clique sur un nœud du contrôle TreeView, ce nœud peut soit déclencher un événement de sélection (via publication), soit afficher une autre page. Lorsque la propriété href n'est pas définie, cliquer sur un nœud déclenche un événement SelectedNodeChanged qui peut être géré pour fournir des fonctionnalités personnalisées. Chaque nœud a également une propriété SelectAction qui peut être utilisée pour déterminer les actions spécifiques qui se produisent lorsqu'un utilisateur clique sur le nœud, comme le développement ou la réduction du nœud. Au lieu de déclencher un événement de sélection pour afficher une page lorsqu'un utilisateur clique sur un nœud, affectez à la propriété href du nœud une valeur autre qu'une chaîne vide ("").

Remplissage de données TreeNode à la demande

Il peut ne pas être pratique de définir votre structure de données statiquement, ou les données peuvent dépendre d'informations qui sont recueillies au moment de l'exécution. Pour afficher des données dynamiquement, le contrôle TreeView prend en charge le remplissage de nœud dynamique. Lorsque le contrôle TreeView est configuré pour remplir à la demande, il déclenche un événement dès qu'un utilisateur développe le nœud. Le gestionnaire d'événements récupère les données appropriées puis remplit le nœud sur lequel l'utilisateur a cliqué. Pour remplir l'objet TreeNode avec des données à la demande, affectez à la propriété PopulateOnDemand d'un nœud la valeur true, puis créez un gestionnaire d'événements TreeNodePopulate pour remplir l'objet TreeNode avec des données.

Remplissage de nœud TreeView côté client

Tout navigateur dont la propriété SupportsCallback a la valeur true dans le fichier de configuration de ses fonctionnalités prend en charge le remplissage de nœud côté client.

Le remplissage de nœud côté client permet au contrôle TreeView de remplir un nœud en appelant l'événement TreeNodePopulate du serveur depuis le script client au lieu de requérir une publication complète sur le serveur. Pour plus d'informations sur le remplissage de nœuds côté client, consultez PopulateNodesFromClient.

Activation du script client

Par défaut, dans les navigateurs de haut niveau, la fonctionnalité de développement-réduction d'un nœud sur le contrôle TreeView est appliquée à l'aide d'un script client. L'utilisation d'un script client augmente l'efficacité du rendu parce que le contrôle ne doit pas publier sur le serveur pour restituer la nouvelle configuration.

Remarque :
Si le script client est désactivé dans le navigateur ou si le navigateur ne prend pas en charge le script client, le contrôle TreeView repasse en mode bas niveau et publie sur le serveur chaque fois qu'un utilisateur clique sur le nœud.

Publication TreeView

Par défaut, le contrôle TreeView gère la fonctionnalité de développement-réduction sur le client sauf si le navigateur ne prend pas en charge le script client ou si la valeur false est affectée à la propriété EnableClientScript. Si la propriété PopulateNodesFromClient a la valeur true et que le navigateur prend en charge le script client, le contrôle TreeView récupère les données du serveur sans republier la page complète.

Lorsque le contrôle TreeView est en mode sélection, chaque fois qu'un utilisateur clique sur un nœud, une publication sur le serveur se produit et l'événement SelectedNodeChanged est déclenché.

En général, vous devez gérer les événements de publication lorsque le contrôle TreeView est en mode sélection ou que les nœuds sont remplis dynamiquement. La raison en est que la propriété PopulateOnDemand ou PopulateNodesFromClient a la valeur true.

Utilisation du contrôle TreeView avec les contrôles UpdatePanel

Les contrôles UpdatePanel permettent de mettre à jour des zones sélectionnées sur une page plutôt que la page entière avec une publication. Le contrôle TreeView peut être utilisé à l'intérieur d'un contrôle UpdatePanel avec les restrictions suivantes :

Les rappels TreeView doivent être associés aux publications asynchrones, ou la validation d'événement de rappel échoue. Lorsque vous affectez à la propriété PopulateOnDemand des contrôles TreeNode la valeur true, les rappels sont activés. Vous pouvez utiliser l'une des approches suivantes pour garantir que les rappels TreeView fonctionnent avec le contrôle UpdatePanel :
- Si le contrôle TreeView n'est pas situé à l'intérieur d'un contrôle UpdatePanel, désactivez les rappels sur les contrôles TreeNode qui ne font pas partie d'une publication asynchrone. Pour ce faire, attribuez à la propriété PopulateOnDemand la valeur false.
- Par programme, actualisez tous les contrôles qui enregistrent des rappels durant la publication asynchrone. Par exemple, vous pouvez placer le contrôle TreeView à l'intérieur d'un contrôle UpdatePanel. Il n'est pas nécessaire que le contrôle TreeView soit situé à l'intérieur du contrôle UpdatePanel d'où provient la publication asynchrone, à condition que le contrôle UpdatePanel qui contient le contrôle TreeView soit actualisé.
Vous devez appliquer des styles à l'aide d'une référence à une classe Cascading Style Sheet (CSS). Par exemple, au lieu de définir la propriété NodeStyle à l'aide d'un attribut property-subproperty, vous pouvez définir le style à l'aide de l'attribut property-CssClass. De même, lorsque vous utilisez le modèle NodeStyle pour définir le style, vous pouvez utiliser l'attribut CssClass de ce modèle.
La propriété EnableClientScript doit être true (valeur par défaut). De plus, si les rappels sont activés pour le contrôle TreeView, vous ne pouvez pas modifier la propriété EnableClientScript entre des publications asynchrones.

Pour plus d'informations sur l'utilisation des contrôles UpdatePanel, consultez Vue d'ensemble du contrôle UpdatePanel et Vue d'ensemble du rendu de page partielle.

Rendu TreeNode

Chaque objet TreeNode contient quatre éléments d'interface qui s'affichent dans l'image suivante et sont décrit dans la table ci-dessous.

Éléments d'interface TreeNode

Élément	Description
Image de développement/réduction	Image facultative qui indique si le nœud peut être développé pour afficher des nœuds enfants. Par défaut, il s'agit d'un signe plus [+] si le nœud peut être développé, ou d'un signe moins [-] si le nœud peut être réduit.
Case à cocher	Les cases à cocher peuvent être éventuellement activées, ce qui permet aux utilisateurs de sélectionner un nœud particulier.
Image de nœud	Vous pouvez spécifier une image de nœud à afficher en regard du texte de nœud.
Texte de nœud	Le texte de nœud est le texte réel qui est affiché sur l'objet TreeNode. Il peut se comporter comme un lien hypertexte en mode navigation, ou comme un bouton en mode sélection.

En plus de ses propres propriétés, le contrôle TreeView prend en charge les propriétés du contrôle TreeNodeStyle pour chaque type de nœud. Ces propriétés de style se substituent à la propriété NodeStyle qui s'applique à tous les types de nœuds.

Le contrôle TreeView a également une propriété NodeIndent qui spécifie le niveau de mise en retrait pour tous les nœuds. Les nœuds sont mis en retrait par rapport au côté sur lequel le contrôle TreeView est restitué. Il s'agit du côté gauche pour les paramètres régionaux qui restituent de gauche à droite, et du côté droit pour les paramètres régionaux qui restituent de droite à gauche.

Un nœud peut avoir également un style différent appliqué selon qu'il est sélectionné ou que la souris passe dessus. Lorsque la valeur true est affectée à la propriété Selected d'un nœud, la propriété SelectedNodeStyle est appliquée à la place des éventuelles propriétés de style non sélectionnées pour le nœud sélectionné. Lorsque la souris passe sur un nœud, la propriété HoverNodeStyle est appliquée. L'image et le tableau suivants décrivent les propriétés TreeNodeStyle.

Propriétés TreeNodeStyle

Propriété de nœud	Description
NodeSpacing	Spécifie l'espacement vertical entre le nœud actuel entier et les nœuds adjacents situés au-dessus et au-dessous.
VerticalPadding	Spécifie la quantité d'espace restituée au-dessus et au-dessous du texte TreeNode.
HorizontalPadding	Spécifie la quantité d'espace restituée sur la gauche et la droite du texte TreeNode.
ChildNodesPadding	Spécifie la quantité d'espace au-dessus et au-dessous des nœuds enfants du contrôle TreeNode.
ImageUrl	Spécifie le chemin d'accès à l'image qui est affichée en regard du contrôle TreeNode.

Pour plus d'informations, consultez Personnalisation de l'apparence du contrôle serveur Web TreeView.

Affichage d'une case à cocher en regard d'un nœud TreeView

Une autre fonctionnalité de rendu personnalisé du contrôle TreeView est sa capacité à restituer des cases à cocher entre le texte et l'image du nœud en utilisant la propriété ShowCheckBoxes. L'affichage de cases à cocher permet à l'utilisateur de sélectionner plusieurs nœuds à la fois, ce qui est particulièrement utile pour les interfaces du type d'une arborescence de groupe de discussion, où les utilisateurs peuvent sélectionner plusieurs groupes de discussion à la fois et s'y abonner. Pour plus d'informations sur l'utilisation de cases à cocher, consultez Sélection, navigation et cases à cocher dans le contrôle serveur Web TreeView.

Utilisation de la propriété ExpandDepth

Par défaut, le contrôle TreeView affiche tous les nœuds de l'arborescence développée. Vous pouvez configurer le contrôle TreeView pour afficher initialement le niveau de développement souhaité. Pour ce faire, vous pouvez affecter à la propriété ExpandDepth un nombre reflétant le niveau de nœud que vous souhaitez afficher. Par exemple, si vous affectez la valeur 2 à la propriété ExpandDepth, deux niveaux du nœud, ou deux nœuds enfants, sont affichés lorsque le site est initialement restitué sur le client.