Ordenar y paginar un GridView (Paging, Sorting)

Una de las preguntas más comunes en el uso del GridView es como automatizar el proceso de paginación y ordenación de los elementos de un GridView.

Lo primero que haremos sea poner a "true" las propiedades AllowPaging y AllowSorting. Tras esto tendremos que manejar los eventos Sorting y PageIndexChanging.

El código es el siguiente y no es muy complejo

protected void Page_Load(object sender, EventArgs e)
{
    // Dummy load
    DataTable table = new DataTable();
    table.Columns.Add("Id");
    table.Columns.Add("Code");

    table.Rows.Add(new string[] { "1", "Codigo1" });
    table.Rows.Add(new string[] { "2", "Codigo2" });

    GridView1.DataSource = table;
    GridView1.DataBind();
}

public string SortExpression
{
    get { return (ViewState["SortExpression"] == null ? string.Empty : ViewState["SortExpression"].ToString()); }
    set { ViewState["SortExpression"] = value; }
}

public string SortDirection
{
    get { return (ViewState["SortDirection"] == null ? string.Empty : ViewState["SortDirection"].ToString()); }
    set { ViewState["SortDirection"] = value; }
}

private string GetSortDirection(string sortExpression)
{
    if (SortExpression == sortExpression)
    {
        if (SortDirection == "ASC")
            SortDirection = "DESC";
        else if (SortDirection == "DESC")
            SortDirection = "ASC";
        return SortDirection;
    }
    else
    {
        SortExpression = sortExpression;
        SortDirection = "ASC";
        return SortDirection;
    }
}

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
    DataTable dataTable = GridView1.DataSource as DataTable;

    if (dataTable != null)
    {
        DataView dataView = new DataView(dataTable);
        dataView.Sort = e.SortExpression + " " + GetSortDirection(e.SortExpression);

        GridView1.DataSource = dataView;
        GridView1.DataBind();
    }
}

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView1.PageIndex = e.NewPageIndex;
    GridView1.DataBind();
}

 

Con muy poco esfuerzo tenemos un GridView que permite la paginación y la ordenación. Hay que tener en cuenta que este ejemplo se está recargando el GridView con "TODOS" los elementos (se hace en el Page_Load, con un DataTable). Para hacerlo bien, habría que traerse únicamente los elemenos que se van a mostrar, en base al número de página que se está mostrando y al número de elementos de cada página.

Published jueves, 03 de julio de 2008 14:08 by Indigo

Comments

# Ordenar y paginar un GridView

jueves, 03 de julio de 2008 14:30 by www.webeame.net

Una de las preguntas más comunes en el uso del GridView es como automatizar el proceso de paginación y ordenación de los elementos de un GridView...

# re: Ordenar y paginar un GridView (Paging, Sorting)

jueves, 10 de julio de 2008 20:40 by Veronica

Gracias por la ayuda.

Que tenga un buen día

# re: Ordenar y paginar un GridView (Paging, Sorting)

viernes, 11 de julio de 2008 8:31 by Indigo

De nada. Me alegro que el artículo te haya servido de ayuda. Espero volver a verte por aquí.

# re: Ordenar y paginar un GridView (Paging, Sorting)

martes, 15 de julio de 2008 20:46 by Mely

Muchas gracias por la ayuda!!!!. Me funciono muy bien el ordenamiento(no habia conseguido un ejemplo claro en otro lado), pero en la paginacion tengo un problema cuando quiero cambiar de pagina se pierden los datos y el gridview me muestra vacio. Estoy trabajando con una BD de sqlServer.

# re: Ordenar y paginar un GridView (Paging, Sorting)

miércoles, 16 de julio de 2008 14:43 by Indigo

Hola,

se me ocurre es que el Page_Load que se produce al paginar no estes recargando los datos del GridView. En ese ejemplo se asume que la carga de datos se hace completamente en el Page_Load, por lo que en el evento PageIndexChanging podemos cambiar el índice de la página nada mas. En otro entorno habría recargar los datos.

Saludos.

# re: Ordenar y paginar un GridView (Paging, Sorting)

miércoles, 16 de julio de 2008 17:03 by Mely

Muchas gracias!!!.Efectivamente era eso yo solo lo cargaba la primera vez si no era PostBack. Saludos.

# re: Ordenar y paginar un GridView (Paging, Sorting)

miércoles, 16 de julio de 2008 18:38 by Indigo

Perfecto. Esperto verte por aquí de nuevo.

# re: Ordenar y paginar un GridView (Paging, Sorting)

martes, 29 de julio de 2008 21:41 by Manuel Baeza Sanhueza

Hola. La verdad es que he intentado daptar tu ejemplo (solucion) a mi problema pero ha sido en vano. Me arroja un error:"El origen de datos no admite la paginación de datos del servidor"... me podrias (n) ayudar please?

manuelbaeza120@hotmail.com

# re: Ordenar y paginar un GridView (Paging, Sorting)

miércoles, 30 de julio de 2008 8:13 by Indigo

Hola,

los de datos que estas asignando al DataSource probablemente no admitan paginan. Esto ocurre, por ejemplo si estás usando un SqlDataReader. ¿Qué tipo de datos estás usando?

Saludos.

# re: Ordenar y paginar un GridView (Paging, Sorting)

miércoles, 20 de agosto de 2008 19:52 by juan

Muchas gracias, necesitaba el ordenamiento

# re: Ordenar y paginar un GridView (Paging, Sorting)

jueves, 21 de agosto de 2008 22:08 by Indigo

Me alegro que te sirva.

Saludos.

# re: Ordenar y paginar un GridView (Paging, Sorting)

viernes, 10 de octubre de 2008 21:13 by ArielR

Cómo hacer para realizar una búsqueda en una columna de un gridview y luego pasar el foco a la fila donde se encontró el dato?

# re: Ordenar y paginar un GridView (Paging, Sorting)

viernes, 10 de octubre de 2008 21:19 by ArielR

Como se realiza un busqueda por una columan en un gridview y luego se devuelve el foco en la fila donde se encontró el valor? Gracias

# re: Ordenar y paginar un GridView (Paging, Sorting)

lunes, 13 de octubre de 2008 14:42 by Indigo

Hola, podrías hacer la pregunta en mi nuevo foro. La dirección es http://www.microcode.es/foros

Muchas gracias.

# re: Ordenar y paginar un GridView (Paging, Sorting)

miércoles, 29 de octubre de 2008 16:57 by Arkham

hola oye me podrias ayudar, tengo la carga de datos en el evento onClick de un imagebutton y cuando hago la paginacion el grid se vacia y tengo q dar otro click en el boton para q me muestre la pagina que seleccione previamente

de antemano gracias.

# re: Ordenar y paginar un GridView (Paging, Sorting)

miércoles, 29 de octubre de 2008 17:18 by Indigo

Hola, podrías hacer la pregunta en mi nuevo foro. La dirección es http://www.microcode.es/foros

Si pones el codigo de como se cargan los datos del gridview y que haces en el pageload será más fácil ayudarte.

Muchas gracias.

# re: Ordenar y paginar un GridView (Paging, Sorting)

martes, 23 de diciembre de 2008 23:07 by mmimos

muy bien, muchas gracias fue de mucha ayuda!!!

www.freeprescriptiondrugstore.com

# re: Ordenar y paginar un GridView (Paging, Sorting)

martes, 13 de enero de 2009 12:00 by mariano

visual studio aparentemente no me creó el evento GridView1_Sorting porque no pasa el debug por allí, como se puede enlazar este evento en el initializecomponent

# re: Ordenar y paginar un GridView (Paging, Sorting)

domingo, 15 de febrero de 2009 14:56 by Ruben

Hola el ejemplo me funciono pero al ordenar la columna ID me toma ordena de forma equivocada por ej ordena 10 numeros puestos en forma descendente 10,9,8,7,..2,1 de la forma 1,10,2,3,4,5,6,7,8,9 el error estara en la sort.expression gracias

# re: Ordenar y paginar un GridView (Paging, Sorting)

jueves, 05 de marzo de 2009 17:21 by srg

A mi esto me devuelve siempre null:

DataTable dataTable = GridView1.DataSource as DataTable;

Muchas gracias.

# re: Ordenar y paginar un GridView (Paging, Sorting)

sábado, 14 de marzo de 2009 0:34 by jorge_log@hotmail.com

Muchas gracias por el aporte, de verdad hasta que encontré un ejemplo muy claro, se te agradece el esfuerzo

# re: Ordenar y paginar un GridView (Paging, Sorting)

sábado, 14 de marzo de 2009 0:34 by jorge_log@hotmail.com

Muchas gracias por el aporte, de verdad hasta que encontré un ejemplo muy claro, se te agradece el esfuerzo

# Recent Faves Tagged With "paginar" : MyNetFaves

miércoles, 25 de marzo de 2009 21:05 by Recent Faves Tagged With "paginar" : MyNetFaves

Pingback from  Recent Faves Tagged With "paginar" : MyNetFaves

# re: Ordenar y paginar un GridView (Paging, Sorting)

jueves, 02 de abril de 2009 21:34 by jonathan olivares

Gracias me servio un monton, ya que no sabia como hacerlo usando un dataset;aqui le mando el ejemplo que tengo

--------archivo asp.CS-----

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page

{

   DSAsignarTableAdapters.Gestion_clientesTableAdapter mostrarDatos =

   new DSAsignarTableAdapters.Gestion_clientesTableAdapter();

   protected void Page_Load(object sender, EventArgs e)    

   {

       GridView1.DataSource = mostrarDatos.GetDataByControl(DropDownList1.SelectedValue);

       GridView1.DataBind();

   }

   /*protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

   {

       GridView1.DataBind();

      // GridView1.ChangeMode(GridView1Mode.ReadOnly);

   }*/

   protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

   {

       GridView1.PageIndex = e.NewPageIndex;

       GridView1.DataBind();

   }

}

--------archivo aspx--------

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/.../xhtml11.dtd">

<html xmlns="www.w3.org/.../xhtml">

<head runat="server">

   <title>Untitled Page</title>

    <style type="text/css">

       body {font-family: Verdana, Arial; font-size: 12px;}

       .tabla {border: solid 1px #555555}

   </style>

   <link href="StyleSheet.css" rel="stylesheet" type="text/css" />  

</head>

<body>

   <form id="form1" runat="server">

       VER LISTADO DE GESTIONES<br />

       <br />

       <asp:Label ID="Label1" runat="server" Text="Seleccionar cartera:"></asp:Label>

       <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="ListaEjecutivo" DataTextField="codigo_cobrador" DataValueField="codigo_cobrador">

       </asp:DropDownList>

      <asp:SqlDataSource ID="ListaEjecutivo" runat="server" ConnectionString="<%$ ConnectionStrings:deudaConnectionString %>" SelectCommand="SELECT DISTINCT codigo_cobrador FROM Cobradores"></asp:SqlDataSource>

       <div style="width: 100px; height: 100px; position: relative; left: 75px; top: 31px;">

             <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="White" PageSize="5"

                                   BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1" GridLines="None" allowPaging="True" AutoGenerateColumns="False"

                                    OnPageIndexChanging="GridView1_PageIndexChanging" >

                                   <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />

                                   <RowStyle BackColor="#DEDFDE" ForeColor="Black" />

                                   <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />

                                   <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />

                                   <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />

                                   <Columns>

                                        <asp:BoundField DataField="Id_gestion_cliente" HeaderText="Id_gestion_cliente"/>

                                       <asp:BoundField DataField="fecha_gestion" HeaderText="Fecha"  />

                                       <asp:BoundField DataField="rut_cliente" HeaderText="Hora" SortExpression="fecha_gestion" />

                                       <asp:BoundField DataField="Resultado" HeaderText="Resultado" />

                                       <asp:BoundField DataField="Comentario" HeaderText="Comentario"  />                                        

                                       <asp:BoundField DataField="Gestor_cobranzas" HeaderText="codigo_cobrador"  />

                                   </Columns>

                               </asp:GridView>

       </div>

       &nbsp;

     </form>

     </body>

     </html>

# re: Ordenar y paginar un GridView (Paging, Sorting)

jueves, 14 de mayo de 2009 3:12 by alan

Hola podrias mostrar un ejemplo con paginacion del lado del servidor?

gracias

# re: Ordenar y paginar un GridView (Paging, Sorting)

viernes, 29 de mayo de 2009 14:57 by Juan Pablo Gonzalez

Excelente, me funciono

# re: Ordenar y paginar un GridView (Paging, Sorting)

viernes, 29 de mayo de 2009 21:59 by Que te importa

No funciona esta wea!!!

# re: Ordenar y paginar un GridView (Paging, Sorting)

jueves, 11 de junio de 2009 23:56 by El Programador

Muy buena ayuda , yo diria exelenticimo, preciso , mejor no pordria ser , asi que doy 20 pts

# re: Ordenar y paginar un GridView (Paging, Sorting)

lunes, 14 de septiembre de 2009 16:22 by heel

Saludos a todos, buen artículo, pero cuando llenas el gridView desde un botón por ejemplo, no funciona ya que cuando extrae los datos siempre regresa null

DataTable dT = grdActivated.DataSource as DataTable;

dt = null siempre

Si tienen alguna idea de como solucionarlo, se los agradecería heel.linux@gmail.com

# re: Ordenar y paginar un GridView (Paging, Sorting)

martes, 03 de noviembre de 2009 15:43 by elizth

Hola! Es un articulo muy bueno, me ayudo a resolver mi problema, pero ahora me di cuenta que si hay una fila seleccionada del gridview al ordenar se mantiene el indice de la fila, es decir si estaba seleccionada la fila 0 y al ordenar a esta fila le corresponde el indice no. 5, sigue seleccionada la 0....¿como puedo hacer para que la fila seleccionada se mantenga asi despues de ordenar? Muchas Gracias.. y espero haberme explicado....

# re: Ordenar y paginar un GridView (Paging, Sorting)

martes, 15 de diciembre de 2009 11:06 by Filtrototal

Hola, tengo un problema en la ordenación, cuando cambio de página no mantiene la ordenación seleccionada previamente, es decir:

- Tomando como ejemplo el que tu muestras, si en cada página entran 5 filas y ordeno en la primera página, cuando pagino a la segunda pierde la paginación

# re: Ordenar y paginar un GridView (Paging, Sorting)

martes, 15 de diciembre de 2009 11:06 by Filtrototal

Hola, tengo un problema en la ordenación, cuando cambio de página no mantiene la ordenación seleccionada previamente, es decir:

- Tomando como ejemplo el que tu muestras, si en cada página entran 5 filas y ordeno en la primera página, cuando pagino a la segunda pierde la paginación

# re: Ordenar y paginar un GridView (Paging, Sorting)

martes, 15 de diciembre de 2009 13:44 by Filtrototal

Hola, tengo un problema en la ordenación, cuando cambio de página no mantiene la ordenación seleccionada previamente, es decir:

- Tomando como ejemplo el que tu muestras (al cual he añadido 20 filas y la paginación es de 10, es decir el ejemplo tiene dos páginas), si en cada página entran 5 filas y ordeno en la primera página, cuando pagino a la segunda pierde la ordenación.

El tema es que como en el page_load siempre se recarga el GridView, se vuelve a establecer el orden inicial.

Necesito ayuda, es muy urgente.

Muchisimas gracias de antemano.

# re: Ordenar y paginar un GridView (Paging, Sorting)

jueves, 07 de enero de 2010 19:43 by Francisco

mira tengo este problema

tengo un gridview con los datos y todo ok...

ahora quiero que este gridview se ordene segun un criterio seleccionado en un RadioButtonList...

la idea es que, si tengo un gridview con datos como fecha. evento, persona, etc...

el usuario elija como se va a ordenar, segun las opciones puestas en el radiobuttonlist. (ej. por fecha o por nombre) para que luego se muestren ordenadas segun el criterio seleccionado.

puedes ayudarme porfavor

pancho.tapia25@gmail.com

Leave a Comment

(required) 
(required) 
(optional)
(required) 
Powered by Community Server (Non-Commercial Edition), by Telligent Systems