Thursday, October 18, 2012

GridView Paging and Sorting


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.  OnPageIndexChangingraises 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!

source http://www.codeproject.com/Articles/67520/GridView-Paging-and-Sorting

No comments:

Post a Comment