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 all of my Grid Views here is what I do.
First you set up you 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 it self allows the following attribures. OnPageIndexChanging it raises the PageIndexChanging event and OnSorting, yup you guessed it right it 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 coloumn 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; } //Popultate 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!
very nice, excellent article.
Great Article Raymund Macaalay
Reblogged this on ABC_MS .Net.
Nice Article …really helped a lot…
Do you have a source-code download?
Thanks a lot Raymund…everything is working fine for me except that myGridView.TopPagerRow, returns null, as a result the dropdownlist remains empty..
any idea how to solve that?