[Asp.net] Editable Treeview I

En más de una ocasión nos ha sido de mucha utilidad un control del tipo TreeView para mostrar una jerarquía de datos, pero el control se nos puede quedar un poco limitado cuando pretendemos interactuar con los datos.


Por ese motivo he creado un control TreeView con nodos editables, y el resultado final es como este:


 


Comenzaremos creando un proyecto de librerías de clase para albergar nuestro control, a la clase le llamaremos TreeViewEdit y heredaremos de System.Web.UI.WebControls.TreeView.

[ToolboxData(“<{0}:TreeViewEdit runat=server></{0}:TreeViewEdit>”)]
public class TreeViewEdit : TreeView

Realmente toda la potencia del control no se encuentra en el TreeView, sino en los Nodos que le daremos la posibilidad de ser editados. En esta clase lo único que tenemos que hacer es un nuevo evento para capturar la información modificada del nodo.


Para eso crearemos un nuevo evento llamado TreeNodeEdit.

[Category(“Data”)]
public event TreeNodeEditEventHandler TreeNodeEdit;
protected virtual void OnTreeNodeEdit(TreeNodeEditEventArgs e)
{
if (TreeNodeEdit != null)
{
TreeNodeEdit(this, e);
}
}

Si os fijáis nuestro evento se basa en un delegado personalizado TreeNodeEditEventHandler y TreeNodeEditEventArgs para customizar el conjunto de argumentos que utilizaremos para devolver los datos del nodo modificado.


El delegado:

public delegate void TreeNodeEditEventHandler(object sender, TreeNodeEditEventArgs e);

La clase que utilizaremos para nuestros argumentos:

public class TreeNodeEditEventArgs : System.EventArgs
{
#region Variables

private string _nodoText;
private string _nodoValue;
private string _oldValue;
private string _newValue;
private bool _checked;

#endregion Variables

#region Propiedades

public string NodoText { get { return _nodoText; } }
public string NodoValue { get { return _nodoValue; } }
public string OldValue { get { return _oldValue; } }
public string NewValue { get { return _newValue; } }
public bool Checked { get { return _checked; } }

#endregion Propiedades

#region Constructor

public TreeNodeEditEventArgs(string nodotext, string nodoValue,
string oldValue, string newValue, bool check)
{
this._nodoText = nodotext;
this._nodoValue = nodoValue;
this._oldValue = oldValue;
this._newValue = newValue;
this._checked = check;
}

#endregion Constructor
}


Gracias a esta clase cuando consumamos el evento del TreeView podremos recuperar los datos:

  bool Check = e.Checked;
string Nombre = e.NodoText;
string ID = e.NodoValue;
string valorInicial = e.OldValue;
string NuevoValor = e.NewValue;

Finalmente para tener finalizada la primera parte del control tan solo nos queda sobrescribir dos eventos:




  • RaisePostBackEvent para procesar los eventos procesados por el control al enviar los datos al servidor.
protected override void RaisePostBackEvent(string eventArgument)
{
base.RaisePostBackEvent(eventArgument);

string[] args = eventArgument.Split(‘|’);
if (args.Length > 0)
{
if (args[0] == “EditNode”)
{
TreeNodeEdit node = (TreeNodeEdit)this.FindNode(args[1].ToString());

TreeNodeEditEventArgs arg = new TreeNodeEditEventArgs(node.Text,
node.Value,
node.OldValue,
args[2].ToString(),
node.Checked);

//Guardamos la modificación en el estado del control y lanzamos el evento correcto
node.TextBoxValue = args[2].ToString();
OnTreeNodeEdit(arg);
}
}
}


Esperamos una colección de argumentos separado por el caracter ‘|’ que envía el cliente al lanzar el postback.




  1. Comprobamos que los argumentos que esperamos son realmente de edición (args[0] == “EditNode”)


  2. El segundo argumento es el Path del nodo que hemos editado.


  3. Creamos un TreeNodeEditEventArgs con los datos recuperados del nodo.


  4. Invocamos el evento TreeNodeEdit a través del método OnTreeNodeEdit, con el argumento correctamente rellenado para que quien consuma nuestro evento pueda interactuar con los datos modificados.


  • OnPreRender para registrar el fichero Javascript que utilizaremos como recurso incrustado y darle una funcionalidad más ligera al interactuar con el cliente.
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
this.Page.ClientScript.RegisterClientScriptResource(GetType(), “TreeviewEditControl.Resources.JS.js”);
}

Me parece que para ser la primera parte es suficiente, en el próximo artículo entraremos a fondo con la clase TreeNodeEdit que es la clase que representan los nodos del TreeView.


Cross-Posting desde http://lonetcamp.com


 


 

8 comentarios en “[Asp.net] Editable Treeview I”

  1. Hola
    Parese que tu sabes mucho sobre el manejo de Treeview, por favor podrias decirme o enviarme el codigo para poder mantener la seleccion de un nodo ya sea padre, hijo o nieto.
    El problema es que cuando selecciono algun nodo en el treeview, al hacer el postback en la pagina se pierde el foco y la seleccion hecha anteriormente.
    Estoy trabajando en asp.net con C#. te agradeceria si me ayudas y envias cualquier opinion a mi correo
    jessicaguevara2003@yahoo.es
    Gracias.

  2. Hola, yo necesito que cuando tenga seleccionado un nodo del treeview y seleccione un segundo, se me cierren los que ya tengo abiertos, es decir, que me permita tener solo un nodo abierto, es posible hacerlo?…. he intentado varias cosas pero o me colapsa todos ó expande todos no uno… Si pudieras ayudarme te lo agradeceria!.

  3. A mi me pasa algo pareccido a lo de Jess,lo q me pasa es q yo tengo una aplicación donde en la parte izquierda de la aplicación sale un treeview con tres nodos u opciones de menú que se pueden expandir o colapsar,cada una de estas opciones o nodos tienen subnodos;lo q ocurre es cuando yo expando uno de los nodos y seleccionar un subnodo lo q yo quiero q ocurra ,es yo pueda seguir viendo el nodo q escogí ,del cual estoy clickeando en uno de sus subnodos,de manera expandida pero cuando hago el postback el treeview se vuelve a cargar y vuelve aparecer todos los nodos colapsados,y yo quiero que el nodo escogido se mantenga expandido,en otras palabra quiero q el treeview tenga memoria entre cada postback.
    Agradeceria q alguien me pudiera ayudar o al menos dar una idea de lo q puedo hacer.

    msi28@hotmail.com

    Gracias

  4. HOLA YO ESTOY TRABAJANDO EN .NET VISUAL STUDIO 2008 Y ESTOY HACIENDO UNA APLICACION UN MENU DESPLEGABLE CON TREEVIEW PERO NO SE COMO HACER PARA CARGAR EL CADA NODO QUE CUANDO LE DE DOBLE CLIC ME ENVIE A UN NUEVO FROM TENGO QUE TENER UNA CONEXION EN SQL SEVER SI ALGUIEN ME PUEDE AYUDAR ALEJOHXC@GMAIL.COM GRACIAS

  5. eas no pues muy bueno tu aporte yo solo tengo una duda… yo leno un treeview desde una consulta pero al darle el tamaño dese las propiedades no las respeta se desborda.. como puedo hacer para q me muestre scrollbars o algo asi donde me delimite el tamaño general del treeview???? si me lo pudieras responder me seria de gran utilidad, de antemando gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *