Sunday, April 18, 2010

GridView paging manually in Asp.net C#




Please visit my new Web Site WWW.Codedisplay.com



GridView paging will be required when data volume is higher. If you are using SqlDataSource control to bind a gridview control then no need to paging gridview because you will achieve it automatically. But if you use different datasource then you need to do mannual paging. To enable paging in gridview control at first set the AllowPaging="true" and also define the page size by PageSize="3". In asp.net paging is too much easy. You just need to set the NewPageIndex on the PageIndexChanging event. The ultimate output of my below example looks like:
GridView Paging 1

To do the paging just add a page in your project then add a gridview control on it like below:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="3" OnPageIndexChanging="GridView1_PageIndexChanging" >
         <HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
         <RowStyle BackColor="LightGray" />
         <AlternatingRowStyle BackColor="LightGray" />
         <Columns>
             <asp:BoundField DataField="Brand Name" HeaderText="Brand Name" />
             <asp:BoundField DataField="Category Name" HeaderText="Category Name" />
             <asp:BoundField DataField="Product Name" HeaderText="Product Name" />
         </Columns>
        </asp:GridView>
Now under page load event first bind the data with the gridview and then cache the datasource which we will use to rebind when page index change. Sample code is given below:
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt=clsDBUtility.GetDataTable("SELECT B.Name [Brand Name],C.Name [Category Name], " +
                    "P.Name [Product Name] FROM " +
                    "Brand B, Category C, Product P " +
                    "WHERE B.ID=P.BrandID AND C.ID=P.CategoryID Order BY 1,2,3");
            GridView1.DataSource = dt;
            GridView1.DataBind();
            Cache["Data"] = dt;
        }
    }
Now under gridview PageIndexChanging event write the below code:
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        GridView1.DataSource = (DataTable)Cache["Data"];
        GridView1.DataBind();
    }
Now run the project, hope you will get paging enabled gridview.

Note: Gridview control gives us PagerSettings tag to enrich look & feel for paging navigation. By using this PagerSettings tag you can navigate from one page to another by image or text instead of default number. To use images as your navigation just use FirstPageImageUrl, LastPageImageUrl, NextPageImageUrl, PreviousPageImageUrl properties.

Now modify your gridview control like below:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="3" OnPageIndexChanging="GridView1_PageIndexChanging" >
         <HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
         <RowStyle BackColor="LightGray" />
         <AlternatingRowStyle BackColor="LightGray" />
         <Columns>
             <asp:BoundField DataField="Brand Name" HeaderText="Brand Name" />
             <asp:BoundField DataField="Category Name" HeaderText="Category Name" />
             <asp:BoundField DataField="Product Name" HeaderText="Product Name" />
         </Columns>

         <PagerSettings 
            Position="Bottom" 
            Mode="NextPreviousFirstLast" 
            FirstPageText="First" 
            LastPageText="Last" 
            NextPageText="Next" 
            PreviousPageText="Prev"
             />
       
        </asp:GridView>
Now you will get below output:
GridView paging 2

Keep experimenting on PagerSettings tag to give the user different look and feel. Later i will discuss on efficient paging. Until then TC.

7 comments:

Cyberat said...

Thanks a lot ;-)

Ashish Tomar (Software Developer) said...

Good Article

Anonymous said...

Hi,

The article is excellent. Thank you.

I suppose this is client side paging. But, what we can do to make server side paging with DataTable work?

Thank you in advance.

smspostbox said...

viry nice...,

Anonymous said...

Good One, Thanks

Faustine said...

Thanks a lot man. i was using a sqldatasource at first, then wanted to use code to bind the data. And i thought paging it will be very tough; but you have shown it in so few easy steps.

Anonymous said...

Caching, of course! thanks!

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash