Esta colaboración muestra dos ejemplos de como personalizar el comportamiento de el web control TreeView de Microsoft, usado habitualmente en desarrollos con ASP.NET

En la dirección http://msdn.microsoft.com/library/default.asp?url=/workshop/webcontrols/webcontrols_entry.asp está la información de como instalar los controles webs de Microsoft. Googleando se puede obtener mucha más información. 
Note: Microsoft® Internet Explorer WebControls are not currently supported.

 

Ejemplo 1: Como evitar el Postback al expandir / colapsar nodos

Cuando en un formulario ASPX de ASP.NET introducimos el control TreeView si queremos controlar desde el código de servidor cuando se selecciona un nuevo nodo, tendremos que poner al control la propiedad AutoPostBack = True. Con esta conseguimos que la página haga un Postback con el evento SelectedIndexChange, no obstante esto tiene un efecto tal vez no deseado, cuando se expande o contrae un nodo también se hace un Postback de la página.

Si queremos evitar este PostBack tendremos que modificar el comportamiento del control. Para ello tendremos que modificar el fichero treeview.htc. Este fichero debe estar en la carpeta wwwroot\webctrl_client\1.0\ o similar que se haya creado en la instalación de los controles Web.

Dentro de este fichero hay que modificar la función nodePlusMinusClick, que es la que controla el comportamiento del control cuando se pincha en el '+' o '-' de un nodo.

Todo el código es en JavaScript, yo personalmente he dejado la función así:

	function nodePlusMinusClick()
	{
	    if (g_bInteractive == false)
	        return;
	    var el = this.parentElement.treenode;
	    //Personalización
	    // 
	    // La siguientes sentencias hacen que cuando se expanda o colapse un nodo
	    // si el control tiene AutoPostback = True
	    //se hace un postback de la página
	    //
	    //if (doNodePlusMinusClick(el) == true)
	    //    fireQueuedEvents();
	    //
	    //solo expandimos o colapsamos
	    doNodePlusMinusClick(el);
	    // Fin de la personalización
	}
	

Simplemente guardamos los cambios y ejecutamos nuestro formulario ASPX. El comportamiento del control debe variar respecto al comportamiento anterior.

 

Ejemplo 2: Recuperar el foco al nodo seleccionado cuando se hace un PostBack

Otro problema que se presenta con el control TreeView es el scroll. Este control no tiene barras de scroll por lo que la solución mas fácil para que nuestra página no se dispare de tamaño es meterlo dentro de un div

por ejemplo:

<div style="VERTICAL-ALIGN: top; OVERFLOW: auto; HEIGHT: 100px"> aqui va nuestro control </div>

Hasta aquí todo bien, pero cuando tenemos un nodo seleccionado para el que nos ha echo falta usar la barra de desplazamiento del div y se hace un PostBack de la página (ya sea porque se ha pulsado un Botón, enlace, ... o simplemente porque se ha seleccionado el nodo en cuestión) al volver a cargar la página se pierde el foco del nodo y la barra de desplazamiento del div vuelve a estar arriba del todo.

Observando el fichero treeview.htc podemos observar que existe una función privada changeFocus que mueve el foco a un nodo concreto, al ser privada no podemos acceder a ella directamente sino que tenemos que crearnos un nuevo método público que haga este foco.

Modificamos el treeview.htc

En la cabecera añadimos nuestro nuevo método

	<public:component> 
		...
		<public:method name="restablecerfoco" />
	</public:component>

 

Creamos el método en el código

   // Personalización
   function restablecerfoco()
   {
      //pone el foco del arbol en el elemento seleccionado
      //
      //cuando el tree esta dentro de un scroll (por ejemplo un div) 
      //cuando se vuelve a cargar la página se pierde el foco
      //
      //llamando a esta funcion se posiciona en el elemento seleccionado
      var node = getNodeFromIndex(selectedNodeIndex);
    
      changeFocus(node, getNodeFromIndex(selectedNodeIndex));      
   }
   // Fin de la Personalización

		

Ya hemos terminado de modificar el fichero treeview.htc. Para lanzar el método en la página podemos hacerlo desde el evento Load del formulario ASPX

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        'Introducir aquí el código de usuario para inicializar la página
        If Not IsPostBack Then
            '...
        Else
            '...
            focusTreeview()
        End If
    End Sub
    
    Private Sub focusTreeview()
        Dim jScript As New System.Text.StringBuilder
        'Crea el Script que ejecuta el metodo
        jScript.Append("<script language=""JavaScript"">")
        jScript.Append("document.getElementById('TreeView1').restablecerfoco();")
        jScript.Append("</script>")
        'Registra el script en la página
        RegisterStartupScript("focusTreeview", jScript.ToString())
    End Sub

Así cada vez que se vuelva a cargar la página se recupera el foco al nodo anteriormente seleccionado

Hasta aquí la colaboración, espero que sirva de ayuda.