Monday, 9 December 2013

Simple Paging and Sorting on GridView in Asp.net

Simple Paging and Sorting on GridView in Asp.net 


Hi friends,
            In this post i will show you how to do paging and sorting on gridview. 

Step 1: On your aspx page paste the below code:-

<asp:GridView runat="server" ID="gv_records" AllowPaging="True" AllowSorting="True"
        AutoGenerateColumns="False" OnPageIndexChanging="gv_records_PageIndexChanging"
        OnRowDataBound="gv_records_RowDataBound" OnSorting="gv_records_Sorting" PagerStyle-BackColor="Orange" PageSize="8"
        PagerStyle-ForeColor="Black" PagerStyle-Font-Underline="false" PagerSettings-Mode="Numeric" PagerStyle-HorizontalAlign="Center" >
        <Columns>
            <asp:BoundField DataField="CountryCode" HeaderText="CountryCode" SortExpression="CountryCode"
                HeaderStyle-BackColor="Orange" HeaderStyle-ForeColor="Black" HeaderStyle-Font-Underline="false" />
            <asp:BoundField DataField="CountryName" HeaderText="CountryName" SortExpression="CountryName"
                HeaderStyle-BackColor="Orange" HeaderStyle-ForeColor="Black" HeaderStyle-Font-Underline="false" />
        </Columns>
    </asp:GridView>


Step 2: Now on your cs page paste below code above Page_Load

 public string sortingOrder  // For Sort Order
        {
            get
            {
                if (ViewState["sortingOrder"] == null)
                {
                    ViewState["sortingOrder"] = "desc";
                }
                return ViewState["sortingOrder"].ToString();
            }
            set
            {
                ViewState["sortingOrder"] = value;
            }

        }

        public string SortColumn   // For Sort Column
        {
            get
            {
                return (ViewState["SortColumn"] == null ? "CountryCode" : ViewState["SortColumn"].ToString()); // CountryCode is column name
            }
            set
            {
                ViewState["SortColumn"] = value;
            }
        }

        public SortDirection sortDirection   // For Sort Direction
        {
            get
            {
                if (ViewState["sortdirection"] == null)
                {
                    ViewState["sortdirection"] = SortDirection.Ascending;
                    //return SortDirection.Ascending;
                }
                return (SortDirection)ViewState["sortdirection"];//.Descending;
            }
            set
            {
                ViewState["sortdirection"] = value;
            }
        }


Step 3: Now write a method for getting data from database in DataSet.

In my case i have written a method fillgrid() to fill gridview and ExecuteSPDataSet() to get data in DataSet .

protected void fillgrid()
        {
            DataSet ds = ExecuteSPDataSet("usp_getcountry"); // This code is for getting data in DataSet.
// Below code is getting data from DataSet in DataView for sorting and binding to GridView. 
            DataView dv = new DataView(ds.Tables[0]);
            dv.Sort = SortColumn + " " + sortingOrder;
            gv_records.DataSource = dv;
            gv_records.DataBind();
        }


Now we have to call above method in Page_Load so write the below code in Page_Load

 if (!IsPostBack)
            {
                fillgrid();
            }




Now paste the below code:-

 protected void gv_records_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            gv_records.PageIndex = e.NewPageIndex;
            fillgrid();
        }

        protected void gv_records_Sorting(object sender, GridViewSortEventArgs e)
        {
            if (sortDirection == SortDirection.Descending)
            {
                sortDirection = SortDirection.Ascending;
            }

            else
            {
                sortDirection = SortDirection.Descending;
            }
            sortingOrder = (sortDirection == SortDirection.Descending) ? "asc" : "desc";


            SortColumn = e.SortExpression;
            
            fillgrid();
        }

        protected void gv_records_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            string imgAsc = @" <img src='../Images/white-triangle-up.png' Width='10px' Height='10px' border='0' title='Ascending' />";
            string imgDes = @" <img src='../Images/white-triangle-down.png'Width='10px' Height='10px' border='0' title='Descendng' />";
            if (e.Row.RowType == DataControlRowType.Header)
            {
                foreach (TableCell cell in e.Row.Cells)
                {
                    if (cell.HasControls())
                    {
                        LinkButton lbl = (LinkButton)cell.Controls[0];
                        if (lbl.Text == SortColumn)
                        {
                            if (sortingOrder == "asc")
                            {
                                lbl.Text += imgAsc;
                            }
                            else
                            {
                                lbl.Text += imgDes;
                            }
                        }
                    }
                }
            }
        }

Everything is done now. Run the application.

Paging:-



Sorting:-





You can download sample code from below link:-

Paging Sorting Example

Please leave your feedback and comments below..!


No comments:

Post a Comment