Click here to Skip to main content
Click here to Skip to main content

GridView Paging and Sorting

, 23 Mar 2010
Rate this:
Please Sign up or sign in to vote.
I just want to share how I make my paging and sorting in C#. I had made a lot of styles before but this is the one that I used most, so in all of my Grid Views, here is what I do.

I just want to share how I make my paging and sorting in C#.  I had made a lot of styles before but this is the one that I used most, so in all of my Grid Views, here is what I do.

First you set up your GridView with the following properties:

<asp:GridView ID="myGridView" runat="server" 
AutoGenerateColumns="False" AllowPaging="True" AllowSorting="True"
EmptyDataText="No Record Found" OnPageIndexChanging="myGridView_PageIndexChanging"
OnSorting="myGridView_Sorting" PageSize="15" >

AllowPaging and AllowSorting from the name itself allow the following attributes.  OnPageIndexChanging raises the PageIndexChanging event and OnSorting (yup you guessed it right) occurs when the hyperlink to sort a column is clicked, but before the GridView control handles the sort operation.

I also used a drop down list for Paging with a combination of images.  So this is how my PagerTemplate looks like:

<PagerTemplate>
	<asp:ImageButton ID="imgPageFirst" runat="server" 
		ImageUrl="~/Images/Icons/PageFirst.png"
		CommandArgument="First" CommandName="Page" 
		OnCommand="imgPageFirst_Command">
	</asp:ImageButton>
	<asp:ImageButton ID="imgPagePrevious" 
		runat="server" ImageUrl="~/Images/Icons/PagePrevious.png"
		CommandArgument="Prev" CommandName="Page" 
		OnCommand="imgPagePrevious_Command">
	</asp:ImageButton>
	<asp:DropDownList ID="ddCurrentPage" runat="server" 
		CssClass="Normal" AutoPostBack="True"
		OnSelectedIndexChanged="ddCurrentPage_SelectedIndexChanged">
	</asp:DropDownList>
	<asp:Label ID="lblOf" runat="server" Text="of" CssClass="Normal"></asp:Label>
	<asp:Label ID="lblTotalPage" runat="server" CssClass="Normal"></asp:Label>
	<asp:ImageButton ID="imgPageNext" runat="server" 
		ImageUrl="~/Images/Icons/PageNext.png"
		CommandArgument="Next" CommandName="Page" 
		OnCommand="imgPageNext_Command"></asp:ImageButton>
	<asp:ImageButton ID="imgPageLast" runat="server" 
		ImageUrl="~/Images/Icons/PageLast.png"
		CommandArgument="Last" CommandName="Page" 
		OnCommand="imgPageLast_Command"></asp:ImageButton>
</PagerTemplate>

I made the AutoPostBack Property set to true so when a user changes the dropdown values, it will change page.  Now here is the code behind.

public partial class PageControls_SampleTaskList : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindTaskList();
        }
    }

    //Bind your Grid View here
    private void BindTaskList()
    {
        DataSet myDataSet = null; //Set your Dataset here
        SetViewState(myDataSet);

        myGridView.DataSource = GetViewState();
        myGridView.DataBind();
    }

    private DataSet GetViewState()
    {
        //Gets the ViewState
        return (DataSet)ViewState["myDataSet"];
    }

    private void SetViewState(DataSet myDataSet)
    {
        //Sets the ViewState
        ViewState["myDataSet"] = myDataSet;
    }

    protected void myGridView_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        DataSet myDataSet = GetViewState();
        DataTable myDataTable = myDataSet.Tables[0];
        myGridView.DataSource = SortDataTable(myDataTable, true);

        myGridView.PageIndex = e.NewPageIndex;
        myGridView.DataBind();
    }

    //This is invoked when the grid column is Clicked for Sorting, 
    //Clicking again will Toggle Descending/Ascending through the Sort Expression
    protected void myGridView_Sorting(object sender, GridViewSortEventArgs e)
    {
        DataSet myDataSet = GetViewState();
        DataTable myDataTable = myDataSet.Tables[0];
        GridViewSortExpression = e.SortExpression;

        //Gets the Pageindex of the GridView.
        int iPageIndex = myGridView.PageIndex;
        myGridView.DataSource = SortDataTable(myDataTable, false);
        myGridView.DataBind();
        myGridView.PageIndex = iPageIndex;
    }

    //Gets or Sets the GridView SortDirection Property
    private string GridViewSortDirection
    {
        get
        {
            return ViewState["SortDirection"] as string ?? "ASC";
        }
        set
        {
            ViewState["SortDirection"] = value;
        }
    }
    //Gets or Sets the GridView SortExpression Property
    private string GridViewSortExpression
    {
        get
        {
            return ViewState["SortExpression"] as string ?? string.Empty;
        }
        set
        {
            ViewState["SortExpression"] = value;
        }
    }

    //Toggles between the Direction of the Sorting
    private string GetSortDirection()
    {
        switch (GridViewSortDirection)
        {
            case "ASC":
                GridViewSortDirection = "DESC";
                break;
            case "DESC":
                GridViewSortDirection = "ASC";
                break;
        }
        return GridViewSortDirection;
    }

    //Sorts the ResultSet based on the SortExpression and the Selected Column.
    protected DataView SortDataTable(DataTable myDataTable, bool isPageIndexChanging)
    {
        if (myDataTable != null)
        {
            DataView myDataView = new DataView(myDataTable);
            if (GridViewSortExpression != string.Empty)
            {
                if (isPageIndexChanging)
                {
                    myDataView.Sort = string.Format("{0} {1}",
                    GridViewSortExpression, GridViewSortDirection);
                }
                else
                {
                    myDataView.Sort = string.Format("{0} {1}",
                    GridViewSortExpression, GetSortDirection());
                }
            }
            return myDataView;
        }
        else
        {

            return new DataView();
        }
    }

    protected void myGridView_DataBound(object sender, EventArgs e)
    {
        //Custom Paging
        GridViewRow myGridViewRow = myGridView.TopPagerRow;

        if (myGridViewRow == null) return;

        //Get your Controls from the GridView, in this case 
        //I use a DropDown Control for Paging
        DropDownList ddCurrentPage = 
	(DropDownList)myGridViewRow.Cells[0].FindControl("ddCurrentPage");
        Label lblTotalPage = (Label)myGridViewRow.Cells[0].FindControl("lblTotalPage");

        if (ddCurrentPage != null)
        {
            //Populate Pager
            for (int i = 0; i < myGridView.PageCount; i++)
            {
                int iPageNumber = i + 1;
                ListItem myListItem = new ListItem(iPageNumber.ToString());

                if (i == myGridView.PageIndex)
                    myListItem.Selected = true;

                ddCurrentPage.Items.Add(myListItem);
            }
        }

        // Populate the Page Count
        if (lblTotalPage != null)
            lblTotalPage.Text = myGridView.PageCount.ToString();

    }

    //Change to a different page when the DropDown Page is changed
    protected void ddCurrentPage_SelectedIndexChanged(object sender, EventArgs e)
    {
        {
            GridViewRow myGridViewRow = myGridView.TopPagerRow;
            DropDownList ddCurrentPage = 
		(DropDownList)myGridViewRow.Cells[0].FindControl("ddCurrentPage");

            myGridView.PageIndex = ddCurrentPage.SelectedIndex;

            //Popultate the GridView Control
            DataSet myDataSet = GetViewState();
            DataTable myDataTable = myDataSet.Tables[0];

            myGridView.DataSource = SortDataTable(myDataTable, true);
            myGridView.DataBind();
        }
    }

    //Images for |<, <<, >>, and >|
    protected void imgPageFirst_Command(object sender, CommandEventArgs e)
    {
        Paginate(sender, e);
    }
    protected void imgPagePrevious_Command(object sender, CommandEventArgs e)
    {
        Paginate(sender, e);
    }
    protected void imgPageNext_Command(object sender, CommandEventArgs e)
    {
        Paginate(sender, e);
    }
    protected void imgPageLast_Command(object sender, CommandEventArgs e)
    {
        Paginate(sender, e);
    }

    protected void Paginate(object sender, CommandEventArgs e)
    {
        // Get the Current Page Selected
        int iCurrentIndex = myGridView.PageIndex;

        switch (e.CommandArgument.ToString().ToLower())
        {
            case "first":
                myGridView.PageIndex = 0;
                break;
            case "prev":
                if (myGridView.PageIndex != 0)
                {
                    myGridView.PageIndex = iCurrentIndex - 1;
                }
                break;
            case "next":
                myGridView.PageIndex = iCurrentIndex + 1;
                break;
            case "last":
                myGridView.PageIndex = myGridView.PageCount;
                break;
        }

        //Populate the GridView Control
        DataSet myDataSet = GetViewState();
        DataTable myDataTable = myDataSet.Tables[0];

        myGridView.DataSource = SortDataTable(myDataTable, true);
        myGridView.DataBind();
    }
}

I hope this post has been informative!

Occurs when the hyperlink to sort a column is clicked, but before the GridView control handles the sort operation.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Raymund Macaalay
Technical Lead
New Zealand New Zealand
http://nz.linkedin.com/in/macaalay
http://macaalay.com/
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionAsk about Sourcecode PinmemberHadi Pribadi10-Dec-13 15:53 
SuggestionGood blog to understand paging and sorting Pinmemberrajkiran27-Sep-13 1:42 
GeneralMy vote of 5 Pinmemberho.kurd2-Sep-13 5:36 
GeneralYou could call directly Paginate() on each button. PinmemberU.Jagannath Reddy(Janki Rao)30-Mar-10 0:15 
GeneralMy vote of 2 PinmemberU.Jagannath Reddy(Janki Rao)30-Mar-10 0:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 23 Mar 2010
Article Copyright 2010 by Raymund Macaalay
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid