Ordenar GridView en modo de ejecución

Normalmente al tener un GridView en nuestra aplicación, el ordenamiento lo traemos desde el código:

Select * From CargaExcel Order by iDdato Desc o Asc

Pero si un usuario final quisiera ordenarlo dándole un click al encabezado del GridView??. Eso fue un requerimiento que me pidieron para una consulta. Lo primero que pensé fue poner un DropDownList y que la lista tuviera un Ascendente y un Descendente, y con un botón mandarlo a llamar, pero eso implicaría estar haciendo llamados innecesarios a la Base de Datos.

Entonces pensé, bueno, ya tengo los datos en la pagina, ya lo mandé a llamar, ¿por qué no meto esos datos en un DataSet y con eso los ordeno?, y así fue como le hice, no se si sea la mejor solución, pero a mi me funcionó.

Vamos al ejemplo paso a paso.

En un WebForm agregamos un objeto de tipo Button, para desde allí mandar a llamar los datos de la Base de Datos, un GridView, para ahí mostrar los datos y un Label, para colocar cualquier mensaje que pudiera arrojarnos nuestra aplicación.

Entonces quedaría algo así:

 

 

Ahora vamos a darle un poco de diseño a nuestro GridView. Voy a tomar los datos de una tabla que se llama "CargaExcel".

 

 

 

Ahora vamos a "retocar" nuestro GridView, lo seleccionamos y le damos un click a la flechita que nos aparece del lado derecho y le damos click a "Editar columnas ...".

 

 

 

Listo ahora nos abrirá una ventanita como la siguiente.

 

 

 

Colocándonos en "BoundField", le damos en el botón que dice, "Agregar"

 







 

 

 

Y lo personalizamos, en HeaderText le pondré "Identificador", en la parte donde dice Datos en "DataField" le pondré el nombre de mi campo en la Base de Datos, en este caso "iDdato", podremos agregar los campos que sean necesarios, para este ejercicio solo agregué 2, "iDdato" y "DatoCargado", desmarcamos "Generar campos automáticamente" y nos quedará así nuestro Gridview.

 

 

 

Listo, ahora nos toca mostrar los datos en nuestro GridView, el código que utilizo es el siguiente.

 

protected void Button1_Click(object sender, EventArgs e)

{

try

        {

            List<CargaExcel> lista = AdminCargaExcel.RecuperaTodo();

            GridView2.DataSource = lista;

            GridView2.DataBind();

        }

        catch (Exception ex)

        {

            Label10.Visible = true;

            Label10.Text = ex.Message.ToString();

        }

}

 

El código va dentro del evento Click de nuestro Botón, y así se ve en la web.

 

 

 

 

Ahora viene la parte que nos interesa, el ordenamiento en ejecución., volvemos a seleccionar nuestro GridView y le damos click en la flechita del lado derecho y click en "Editar columnas ...", nos colocamos donde dice "SortExpression" en el área de "Comportamiento" y ponemos ahí el nombre del campo en cuestión, esto va a ser por cada Campo seleccionado o por los que necesitamos ordenar.

 

 

 

Volvemos a seleccionar nuestro GridView y nos vamos a las propiedades y en la categoría de comportamiento ubicamos "AllowSorting" y cambiamos "False" por "True"

 

 

 

Nuestro GridView lucirá así

 

 

 

 

Ahora vamos al código!!!. Nuevamente teniendo nuestro GridView seleccionado nos vamos a propiedades y nos vamos a la pestaña de eventos y le vamos a dar doble click a "Sorting".

 

 

Ya nos colocó el evento para nosotros poder poner la instrucción para reordenar.

 

 

 

 

El código que utilizo es el siguiente.

 

protected void GridView2_Sorting(object sender, GridViewSortEventArgs e)

    {

 

        DataTable dt = new DataTable();

        dt.Columns.Add("iDdato");

        dt.Columns.Add("DatoCargado");

        DataSet ds = new DataSet();

 

        ds.Tables.Add(dt);

        for (int i = 0; i < GridView2.Rows.Count; i++)

        {

            DataRow dr = dt.NewRow();

            dr["iDdato"] = HttpUtility.HtmlDecode(GridView2.Rows[i].Cells[0].Text);

            dr["DatoCargado"] = HttpUtility.HtmlDecode(GridView2.Rows[i].Cells[1].Text);

 

            dt.Rows.Add(dr);

        }

 

        if (dt != null)

        {

            DataView dataView = new DataView(dt);

            dataView.Sort = e.SortExpression + " " + DireccionOrden(e.SortExpression);

            dt.DefaultView.Sort = e.SortExpression;

 

            DataSet ds1 = new DataSet();

 

            GridView2.DataSource = dataView;

            GridView2.DataBind();

        }

    }

 

Ahora pondremos el código que define si es Ascendente o Descendente, para eso utilizaremos "ViewState" para guardar los valores de la pagina.

 

private string DireccionOrden(string column)

    {

        string sortDirection = "ASC";

        string sortExpression = ViewState["SortExpression"] as string;

        if (sortExpression != null)

        {

            if (sortExpression == column)

            {

                string lastDirection = ViewState["SortDirection"] as string;

                if ((lastDirection != null) && (lastDirection == "ASC"))

                {

                    sortDirection = "DESC";

                }

            }

        }

        // Save new values in ViewState.

        ViewState["SortDirection"] = sortDirection;

        ViewState["SortExpression"] = column;

        return sortDirection;

    }

 

Nuestra WebForm luce así

 

 

 

Nótese como los encabezados están resaltados como links, ahora veremos que pasa si le damos click a alguno de ellos

 

 



 

 

Ya ordenó por "Identificador", le daremos otro click a la columna de "Identificador" a ver que sucede

 

 



 

 

Listo, ya quedó nuestra página y podemos ordenar los datos del GridView en modo de ejecución.

 

 

Como siempre,  espero y les sirva de algo mi experiencia, les dejo a su disposición mi correo para cualquier duda, aclaración o sugerencia, ricegamo@hotmail.com

Saludos