Información general sobre TreeView (Control de servidor Web)

Artículo
10/22/2014

Actualización: noviembre 2007

El control TreeView de servidor Web se utiliza para mostrar datos jerárquicos, como una tabla de contenido o un directorio de archivo, en una estructura de árbol. Admite las características siguientes:

Enlace de datos automático, que permite enlazar los nodos del control a datos jerárquicos, como un documento XML.
Compatibilidad con la exploración del sitio a través de la integración con el control SiteMapDataSource.
El texto del nodo se puede mostrar como texto seleccionable o como hipervínculos.
Personalización del aspecto mediante temas, imágenes definidas por el usuario y estilos.
Acceso mediante programación al modelo de objetos TreeView, que permite crear árboles dinámicamente, rellenar nodos, definir propiedades, etc.
Llenado de los nodos a través de las devoluciones de llamada desde el cliente al servidor (en exploradores compatibles).
Capacidad para mostrar una casilla de verificación al lado de cada nodo.

Tipos de nodos de TreeView

El control TreeView se compone de uno o varios nodos. Cada entrada del árbol se denomina nodo y se representa mediante un objeto TreeNode. En la tabla siguiente se describen los tres tipos de nodo diferentes que existen.

Tipo de nodo	Descripción
Raíz	Un nodo que no tiene ningún nodo primario y tiene uno o varios nodos secundarios.
Principal	Un nodo que tiene un nodo primario y uno o varios nodos secundarios.
Hoja	Un nodo que no tiene ningún nodo secundario.

Aunque un árbol típico sólo tiene un nodo raíz, el control TreeView permite agregar varios nodos raíz a la estructura de árbol. Esto resulta útil cuando se quiere mostrar las listas de elementos sin mostrar un único nodo raíz principal, como en una lista de categorías de producto.

Cada nodo tiene una propiedad Text y una propiedad Value. El valor de la propiedad Text se muestra en el control TreeView, mientras que la propiedad Value se utiliza para almacenar cualquier dato adicional sobre el nodo, como los datos transferidos al evento de devolución de datos que está asociado con el nodo.

Al hacer clic en un nodo del control TreeView, esta operación puede desencadenar un evento de selección (a través de la devolución de datos) o llevar a otra página. Cuando no se define la propiedad href, al hacer clic en un nodo se desencadenará un evento SelectedNodeChanged que se puede utilizar para proporcionar una funcionalidad personalizada. Cada nodo contiene también también una propiedad SelectAction que se puede utilizar para especificar las acciones que se producen cuando se haga hace en el nodo, como expandir o contraer el nodo. En lugar de desencadenar un evento que lleve a una página cuando se haga clic en un nodo, establezca la propiedad href del nodo en un valor que no sea una cadena vacía ("").

Mostrar datos en el control TreeView

El control TreeView puede mostrar varios tipos diferentes de datos: datos estáticos, que se especifican de forma declarativa en el control; datos enlazados al control, o datos que se agregan mediante programación al control TreeView en respuesta a las acciones del usuario.

Mostrar datos estáticos

Puede mostrar datos estáticos en el control TreeView; para ello, cree una colección de elementos TreeNode que sean elementos secundarios del control TreeView. Estos elementos secundarios también se conocen como nodos secundarios.

En el ejemplo siguiente se muestra el marcado de un control TreeView que contiene tres nodos, dos de los cuales tienen nodos secundarios.

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

Enlazar datos al control TreeView

Puede enlazar un control TreeView a un origen de datos que sea compatible con la interfaz IHierarchicalDataSource, como los controles XmlDataSource y SiteMapDataSource. Además, al enlazar datos, tiene un control total sobre los campos que se están rellenando en el origen de datos. Para obtener más información, vea Enlazar datos al control TreeView de servidor Web.

Mostrar los datos mediante programación utilizando TreeNodeCollection

Puede rellenar un control TreeView con datos mediante programación; para ello, obtenga acceso a la propiedad Nodes, que devuelve una clase TreeNodeCollection. TreeNodeCollection es una colección con establecimiento inflexible de tipos de los objetos TreeNode. Dado que un objeto TreeNode contiene una propiedad denominada ChildNodes que puede contener los objetos TreeNode, la clase TreeNodeCollection es una estructura de datos jerárquica que representa todos los nodos del control TreeView.

Para obtener un ejemplo de cómo se recorre la colección de nodos, vea Nodes.

Rellenar los datos de TreeNode a petición

No resultaría práctico definir la estructura de datos estáticamente o que los datos dependieran de la información que se recopila en tiempo de ejecución. Para mostrar los datos dinámicamente, el control TreeView admite el llenado de nodos dinámico. Cuando el control TreeView se configura para que rellene los datos a petición, el control desencadena un evento si un usuario expande el nodo. El controlador de eventos recupera los datos correspondientes y, a continuación, rellena el nodo en el que el usuario ha hecho clic. Para rellenar el objeto TreeNode con datos a petición, establezca la propiedad PopulateOnDemand de un nodo en true y cree un controlador de eventos TreeNodePopulate para rellenar el objeto TreeNode con datos.

Llenado de nodos TreeView en el cliente

Cualquier explorador que tenga la propiedad SupportsCallback establecida en true en el archivo de configuración de las funciones del explorador admitirá el llenado de nodos en el cliente.

El llenado de nodos en el cliente permite que el control TreeView llene un nodo llamando al evento TreeNodePopulate del servidor desde la secuencia de comandos del cliente en lugar de solicitar una devolución de datos completa al servidor. Para obtener más información sobre el llenado de nodos en el cliente, vea PopulateNodesFromClient.

Habilitar la secuencia de comandos en el cliente

De forma predeterminada, en exploradores de nivel superior, la funcionalidad de expandir y contraer un nodo del control TreeView se realiza utilizando la secuencia de comandos del cliente. Al utilizar la secuencia de comandos del cliente, aumenta la eficacia de la representación porque el control no tiene que devolver los datos al servidor para representar la nueva configuración.

Nota:
Si la secuencia de comandos del cliente está deshabilitada en el explorador o el explorador no la admite, el control TreeView volverá al modo del nivel inferior y devolverá los datos al servidor cada vez que un usuario haga clic en el nodo.

Devolución de datos de TreeView

De forma predeterminada, el control TreeView supervisa la funcionalidad de expandir y contraer en el cliente a menos que el explorador no admita la secuencia de comandos del cliente o la propiedad EnableClientScript esté establecida en false. Si la propiedad PopulateNodesFromClient se establece como true y el explorador admite la secuencia de comandos del cliente, entonces el control TreeView recupera los datos del servidor sin enviar toda la página.

Cuando el control TreeView está en modo de selección, cada vez que un usuario hace clic en un nodo, se produce una devolución de datos al servidor y se desencadena el evento SelectedNodeChanged.

Normalmente, debería controlar los eventos de devolución de datos cuando el control TreeView está en modo de selección o los nodos se rellenan dinámicamente. Esto se debe a que la propiedad PopulateOnDemand o la propiedad PopulateNodesFromClient está establecida en true.

Representación de TreeNode

Cada objeto TreeNode contiene cuatro elementos de interfaz de usuario, que se muestran en la imagen siguiente y se describen en la tabla que aparece a continuación.

Elementos de interfaz de usuario de TreeNode

Elemento	Descripción
Imagen de expansión/contracción	Imagen opcional que indica si el nodo se puede expandir para mostrar los nodos secundarios. De forma predeterminada, esta imagen es un signo más [+] si el nodo se puede expandir, o un signo menos [-] si se puede contraer.
Casilla de verificación	También pueden habilitarse casillas de verificación, lo que permite a los usuarios seleccionar un nodo determinado.
Imagen de nodo	Puede especificar una imagen de nodo que aparezca junto al texto del nodo.
Texto de nodo	El texto del nodo es el texto real que aparece en el objeto TreeNode. El texto del nodo puede actuar como un hipervínculo en modo de exploración o como un botón en modo de selección.

Además de sus propias propiedades, el control TreeView admite las propiedades del control TreeNodeStyle de cada tipo de nodo. Estas propiedades de estilo reemplazan a la propiedad NodeStyle, que se aplica a todos los tipos de nodo.

El control TreeView también tiene una propiedad NodeIndent que especifica el nivel de sangría de todos los nodos. La sangría se aplica a los nodos desde el lateral en el que se representa el control TreeView. La sangría se aplica en el lateral izquierdo en las configuraciones regionales de izquierda a derecha y en el lateral derecho en las configuraciones regionales de derecha a izquierda.

También se puede aplicar un estilo diferente a un nodo cuando éste se selecciona o cuando el mouse (ratón) se sitúa sobre él. Cuando la propiedad Selected de un nodo se establece en true, se aplica la propiedad SelectedNodeStyle, que reemplaza todas las propiedades de estilo del nodo seleccionado que no están activadas. Cuando el mouse se sitúa sobre un nodo, se aplica la propiedad HoverNodeStyle. En la tabla y la ilustración siguiente se describen las propiedades de TreeNodeStyle.

Propiedades de TreeNodeStyle

Propiedad del nodo	Descripción
NodeSpacing	Especifica la cantidad de espaciado vertical que hay entre todo el nodo actual y los nodos adyacentes que están debajo y encima.
VerticalPadding	Especifica la cantidad de espacio que se representa en la parte superior e inferior del texto de TreeNode.
HorizontalPadding	Especifica la cantidad de espacio que se representa en la parte izquierda y derecha del texto de TreeNode.
ChildNodesPadding	Especifica la cantidad de espacio que se representa encima y debajo de los nodos secundarios del control TreeNode.
ImageUrl	Especifica la ruta de acceso de la imagen que aparece junto al control TreeNode.

Para obtener más información, vea Personalizar el aspecto y el estilo del control TreeView de servidor Web.

Mostrar una casilla de verificación junto a un nodo TreeView

Otra característica de representación personalizada del control TreeView es su capacidad de representar casillas de verificación entre el texto del nodo y la imagen mediante la propiedad ShowCheckBoxes. Las casillas de verificación permiten al usuario seleccionar varios nodos al mismo tiempo, lo que resulta especialmente útil para las interfaces, como un árbol de grupo de noticias, donde los usuarios pueden seleccionar varios grupos de noticias o suscribirse a ellos al mismo tiempo. Para obtener más información sobre cómo utilizar las casillas de verificación, vea Selección, exploración y casillas de verificación del control TreeView de servidor Web.

Utilizar la propiedad ExpandDepth

De forma predeterminada, el control TreeView muestra todos los nodos del árbol expandidos. Puede configurar el control TreeView para que inicialmente muestre un determinado nivel de profundidad. Para ello, puede establecer la propiedad ExpandDepth en un número, que reflejará el nivel del nodo que desea mostrar. Por ejemplo, si establece la propiedad ExpandDepth en 2, se mostrarán dos niveles del nodo o dos nodos secundarios cuando el sitio se represente inicialmente en el cliente.