[ASP.NET][GridView] Edición usando DropDownList

 

Introducción

---

La edición de entidades directamente en el control GridView puede requerir algunas adaptaciones que adecuen la grilla a la funcionalidad requerida dependiendo de la información que se quiera mostrar.

Dos puntos importantes cuando uno utiliza el control GridView son:

- Adecuar el control usado para desplegar la información al usuario.

En el ejemplo se explicara como cambiar el control de edición por defecto, o sea un TextBox, que se desplegaría al usuario, por otro especialmente definido para la selección por medio de un ítem concreto, por medio de un DropDownList.

- La definición de un identificador para cada registro de la grilla, sin necesidad de desplegar este al usuario.

Se suele necesitar un id o clave que permita identificar el registro, pero que este no se muestre al usuario, sino que sea de uso interno.

 

Definición del ejemplo

---

El mismo consiste en una lista de contactos a los cuales se le podrá asignar el país de nacimientos.

Durante la edición se desplegara al usuario un cuadro de texto en donde podrá cambiar el nombre, pero los países estarán definidos en una lista desplegable desde la cual serán seleccionados.

 

Edición mediante un DropDownList

---

Si se analiza la definición del Gridview se notara que es por medio de un control DropDownList en el tag <EditItemTemplate> que se define la lista de países.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
     AutoGenerateEditButton="True" CellPadding="4" ForeColor="#333333" GridLines="None"
     DataKeyNames="id" 
     onrowediting="GridView1_RowEditing"
     onrowcancelingedit="GridView1_RowCancelingEdit" 
     onrowupdating="GridView1_RowUpdating">
     <RowStyle BackColor="#EFF3FB" />
     <Columns>
         <asp:BoundField DataField="nombre" HeaderText="Nombre Usuario" />
         <asp:TemplateField HeaderText="Pais Nacimiento">
             <EditItemTemplate>
                 <asp:DropDownList ID="ddlPaises" runat="server">
                 </asp:DropDownList>
             </EditItemTemplate>
             <ItemTemplate>
                 <asp:Label ID="Label1" runat="server" Text='<%# Bind("descripcion") %>'></asp:Label>
             </ItemTemplate>
         </asp:TemplateField>
     </Columns>
     <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
     <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
     <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
     <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
     <EditRowStyle BackColor="#2461BF" />
     <AlternatingRowStyle BackColor="White" />
 </asp:GridView>

Además la columna completa ha cambiado ya no es es mas BoundField, el cual mostraría un simple TextBox durante la edición, sino que se define todo un témplate, mediante el tag <TemplateField>.

Mediante la propiedad AutoGenerateEditButton se indica que en la grilla estén definidos las opciones de edición, por lo tanto habrá ciertos eventos que será necesario agregar en el código.

Es muy importante tener en cuenta que la carga de la información de la grilla solo se realice una vez al inicio de la pagina.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindData();
    }
}

private void BindData()
{
    GridView1.DataSource = DataAccess.GetAllUsuario();
    GridView1.DataBind();
}

Es por eso que el evento Load de la pagina define la carga de los datos de la grilla dentro del bloque IsPostBack, le cual tiene que estar negado, ya que solo durante la carga inicial del formulario será requerida esta operación.

La primer acción que se expone al usuario es la edición, que efectuara el cambio al edittemplate, pero antes ejecutara el evento:

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
    GridView1.EditIndex = e.NewEditIndex;

    int id = Convert.ToInt32(GridView1.DataKeys[e.NewEditIndex].Value);
    DataRow row = DataAccess.GetUsuarioById(id);

    BindData();

    DropDownList combo = GridView1.Rows[e.NewEditIndex].FindControl("ddlPaises") as DropDownList;

    if (combo != null)
    {
        combo.DataSource = DataAccess.GetAllPaises();
        combo.DataTextField = "descripcion";
        combo.DataValueField = "id";
        combo.DataBind();
    }

    combo.SelectedValue = Convert.ToString(row["pais"]);
}

En este evento se recupera el id del contacto que representa la fila en edición, se cargan los ítems en el combo para esa fila, y por ultimo se asigna la selección del país que actualmente esta definido la entidad del contacto. Un link interesante que puede ayudar es el siguiente: GridView.RowEditing Event

Debe recordarse que en principio el DropDownList no tiene registros u opciones definidas, es en este evento donde se asignan.

Es importante notar que por medio de la propiedad EditIndex del GridView, se define que fila cambia de estado.

Luego de editar el registro, se disponen de dos acciones, actualizar o cancelar, para lo cual se disponen los eventos:

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
    int id = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value);

    DropDownList combo = GridView1.Rows[e.RowIndex].FindControl("ddlPaises") as DropDownList;
    int pais = Convert.ToInt32(combo.SelectedValue);

    TextBox text = GridView1.Rows[e.RowIndex].Cells[1].Controls[0] as TextBox;
    string nombre = text.Text;

    DataAccess.UpdateUsuario(id, nombre, pais);

    GridView1.EditIndex = -1;
    BindData();

}

protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
    GridView1.EditIndex = -1;
    BindData();
}

La edición recupera la información asignada a los controles de la fila activa, y se procede a invocar a la capa de datos para actualizar la entidad.

Conociendo la fila que lanza el evento de actualización, por medio de e.RowIndex, y pudiendo buscar el control mediante su nombre, es que se recupera el valor seleccionado del combo.

En cambio el nombre al estar definido en un BoundField, se recupera mediante el acceso a la celda y a la colección de controles definidos en este, pero como es sabido que solo contendrá un control, o sea el TextBox donde se edita el nombre.

Por ultimo mediante la propiedad EditIndex de la grilla, se deja de editar la fila, es preciso notar que luego de cada operación la información se vuelve a bindear.

 

Definición del Identificador de la fila

---

Una característica importante del GridView es la posibilidad de definir que propiedad del origen de datos que actuara como identificador de la entidad.

En el ejemplo seguramente se habrá notado la definición de la propiedad DataKeyNames, la cual define el “id” como identificador de cada registro.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
       AutoGenerateEditButton="True" CellPadding="4" ForeColor="#333333" GridLines="None"
       DataKeyNames="id"
       onrowediting="GridView1_RowEditing"
       onrowcancelingedit="GridView1_RowCancelingEdit"
       onrowupdating="GridView1_RowUpdating">

Esto es clave para poder recuperar la información del contacto en cada acción realizada por el control. Por medio de DataKeys, es que se obtiene el valor asociado a una fila en particular.

En el código de cada evento se uso de la siguiente forma:

int id = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value);

Es necesario conocer que fila que se esta editando para recuperar de la colección de claves el valor concreto.

 

Acerca del ejemplo

---

El mismo fue creado usando VS2008 y Sql Server Express 2008

Sera necesario tener el servicio de Sql Server local para que pueda ejecutarse la aplicación

 

[C#]

[VB.NET]