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