TreeView (control)

El control TreeView sirve para mostrar datos jerárquicos, como una tabla de contenido o un directorio de archivos, en una estructura de árbol.

Para agregar un control TreeView a una página

• Arrastre el control TreeView del panel de tareas Cuadro de herramientas a la página.

Para aplicar esquemas de formato básico al control TreeView

1. En la vista Diseño, haga clic con el botón secundario en el control TreeView y, a continuación, haga clic en Mostrar tareas de control comunes.

   [!NOTA]

   También puede hacer clic en el control TreeView en la vista Diseño y en la flecha de la esquina superior derecha para mostrar el menú Tareas de TreeView. Haga clic de nuevo en la flecha para ocultar el menú.

2. En el menú Tareas de TreeView, haga clic en Autoformato.

3. En el cuadro de diálogo Autoformato, seleccione uno de los esquemas de la lista Seleccione un esquema. El efecto del esquema en el control TreeView se muestra en el área Vista previa.

4. Haga clic en Aceptar para aplicar el esquema de formato y cerrar el cuadro de diálogo, o en Aplicar para aplicar el esquema de formato sin cerrar el cuadro de diálogo.

Al igual que con todos los controles ASP.NET, puede definir la apariencia y el comportamiento si establece las propiedades en el panel de tareas Propiedades de etiqueta. Para obtener una descripción completa de todas las propiedades del control TreeView, vea TreeView (puede estar en inglés) en MSDN Library.

Tipos de nodos de TreeView

El control TreeView se compone de uno o varios nodos. Cada entrada en el árbol se conoce como nodo. En la tabla siguiente se describen los tres tipos de nodo diferentes que existen.

Tipos de nodo del control TreeView

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

Aunque un árbol típico sólo tiene un nodo raíz, el control TreeView le permite agregar varios nodos raíz a la estructura de árbol. Esto resulta útil cuando se desean mostrar las listas de elementos sin mostrar un único nodo raíz principal, como por ejemplo, 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 usa para almacenar cualquier dato adicional sobre el nodo, como los datos transferidos al evento de devolución de datos asociado con el nodo.

Para definir nodos para el control TreeView

1. En la vista Diseño, haga clic con el botón secundario en el control TreeView y, a continuación, haga clic en Mostrar tareas de control comunes.

2. En el menú Tareas de TreeView, haga clic en Editar nodos.

3. En el cuadro de diálogo Editor de nodos de TreeView, haga clic en Agregar un elemento de raíz para agregar un elemento.

4. En el área Propiedades, establezca las propiedades Text y href, así como cualquier otra propiedad que desee establecer para el nodo.

5. Agregue más elementos de raíz o elementos secundarios al elemento seleccionado; para ello, haga clic en Agregar un elemento secundario.

6. Cuando haya agregado varios elementos de menú, puede ajustar su orden o sangría si los selecciona y hace clic en Subir un elemento entre sus relacionados, Bajar un elemento entre sus relacionados, Convierta el elemento seleccionado en un relacionado de su principal, Convertir el elemento seleccionado en el secundario del elemento relacionado que le precede o Quitar un elemento.

Puede enlazar un control TreeView a los controles XmlDataSource (control) y SiteMapDataSource (control). Además, al enlazar datos, dispone de control total sobre los campos que se están rellenando desde el origen de datos. Para obtener más información, vea la página acerca de cómo enlazar datos al control TreeView del servidor web (puede estar en inglés) en la biblioteca MSDN.

Para enlazar el control TreeView a un origen de datos

1. En la vista Diseño, haga clic con el botón secundario en el control TreeView y, a continuación, haga clic en Mostrar tareas de control comunes.

2. En el menú Tareas de TreeView, seleccione un origen de datos existente o <Nuevo origen de datos> en la lista desplegable Elegir origen de datos.

3. Si elige <Nuevo origen de datos>, se abrirá Configurar un origen de datos mediante un control enlazado a datos. Haga clic en Mapa del sitio o Archivo XML en el cuadro ¿De dónde obtendrá la aplicación los datos? y asigne un identificador al origen de datos en el cuadro Especifique un identificador para el origen de datos.

4. Si elige Archivo XML, en el cuadro de diálogo Configurar origen de datos, especifique el archivo XML en el cuadro Archivo de datos y, si lo desea, un archivo de transformación XSL o una expresión XPath para el origen de datos XML.

5. Haga clic en Aceptar en el cuadro de diálogo y el asistente para volver al control en la vista Diseño.

6. Haga clic con el botón secundario en el control y haga clic en la opción Editar enlaces de datos de Tree&Node del menú contextual.

7. En la lista Enlaces de datos disponibles, seleccione el campo XML al que desea enlazar el menú y haga clic en Agregar.

8. Seleccione el campo de la lista Enlaces de datos seleccionados y establezca los valores de las propiedades del área Propiedades de enlace de datos. Por ejemplo, para especificar el texto que se mostrará en el menú, elija #InnerText en lista desplegable de la propiedad TextField para mostrar el texto entre las etiquetas inicial y final del elemento XML.

Vea también

Conceptos

Introducción a los controles de exploración de ASP.NET

Menu (control)

SiteMapPath (control)