Click here to Skip to main content
15,887,135 members
Search within:


Articles / Web Development / HTML
 
Article

GridView / DataList Paging Control

Rate me:
Please Sign up or sign in to vote.
4.88/5 (13 votes)
24 Sep 2008CPOL 89.7K   1.5K   32   40
Simple custom paging with an ASCX control, where the developer can easily edit the stylesheet.

DataControl_PagingControl

Introduction

This is a custom paging control for data controls (GridView / DataList / Repeater). From this control, developers can easily add custom paging on a data control.

Using the code

It is very simple to add custom paging on a data control. Please add the DLL (App_Web_pagingcontrol.ascx.cdcab7d2.dll) in the bin directory and PagingControl.ascx in the root directory.

Here is the ASPX code:

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Default.aspx.cs" Inherits="GridView_Default" %>

<%@ Register Src="PagingControl.ascx" 
   TagName="PagingControl" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
        <style type="text/css">
          .paging-div
            {font-size: 9px; position:relative;
            text-align:left;color:rgb(128, 128, 128);margin-bottom:10px; 
            margin-top:10px; line-height:100%; font-family:Verdana;}
          .paging-div div
            {font-size: 9px; font-weight: normal; 
            display:inline;list-style:none;text-align:center; 
            margin:2px; font-family:Verdana;}
          .paging-div div span
            {font-size: 9px; font-weight: normal; 
            color: #CC0000; border: 1px #CC0000 solid; 
            padding: 3px 6px 3px 6px; font-family:Verdana;}
          .paging-div div a
            {font-size: 9px; font-weight: normal; 
            color: #000000; border: 1px #CDDCED solid; 
            padding: 3px 6px 3px 6px; 
            font-family:Verdana; text-decoration: none;}
          .paging-div div a:hover
            {font-size: 9px; font-weight: normal; 
            color: #FFFFFF; border: 1px #000000 solid; 
            padding: 3px 6px 3px 6px; font-family:Verdana;
            background-color: #5F8FC5; text-decoration: none;}
          .paging-div .nav
            {font-size: 9px; font-weight: normal; 
            color: #CCCCCC; border: 1px #CCCCCC solid; 
            padding: 3px 6px 3px 6px; font-family:Verdana;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table cellpadding="0" cellspacing="0" 
                      width="100%" border="0">
                <tr>
                    <td>
                        <uc1:PagingControl ID="Paging1" 
                           OnPaging_Click="Paging_Click" 
                           FirstString="<< First" 
                           LastString=" Last >>" 
                           NextString="Next >" 
                           PrevString="< Prev" 
                           TotalNumberPaging="5"  
                           runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:GridView ID="grdTest" 
                            runat="server" 
                            AutoGenerateColumns="true" 
                            AllowPaging="true"
                            PageSize="5" 
                            PagerSettings-Visible="false">
                        </asp:GridView>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Here is the code (.cs) file:

C#
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Sindhu;
public partial class GridView_Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataLoad();
        }
    }

    public void DataLoad()
    {
        DataSet DS = new DataSet();
        DS=GetData();

        // in case  of datagrid / gridview
        Paging1.PageSize = grdTest.PageSize;
        Paging1.TotalRecord = DS.Tables[0].Rows.Count;
        Paging1.CurrentPage = grdTest.PageIndex + 1;
        Paging1.DataLoad();

        // in case of data list /  repeater
        /*
        DataSet DS1 = new DataSet();
        int TotalRecords = DS.Tables[0].Rows.Count;
        int PageSize = 1;

        int StartIndex = 0;
        int EndIndex = 0;
        StartIndex = 
          Convert.ToInt32(Convert.ToInt32(PageIndex)) * PageSize;
        EndIndex = StartIndex + PageSize;
        int inti = 0;

        for (inti = StartIndex; inti < EndIndex 
             && inti < DS.Tables[0].Rows.Count; inti++)
        {
            if (inti == StartIndex)
            {
                DS1.Tables.Add();
                for (int i = 0; i < DS.Tables[0].Columns.Count; i++)
                {
                    DS1.Tables[0].Columns.Add(
                       DS.Tables[0].Columns[i].ColumnName);
                }
            }
            DataRow dr = DS1.Tables[0].NewRow();
            for (int i = 0; i < DS.Tables[0].Columns.Count; i++)
            {
                dr[DS.Tables[0].Columns[i].ColumnName] = 
                   DS.Tables[0].Rows[inti][i].ToString();
            }
            DS1.Tables[0].Rows.Add(dr);
        }
        DS1.Tables[0].AcceptChanges();
        Paging1.PageSize = PageSize;
        Paging1.TotalRecord = TotalRecords;
        Paging1.CurrentPage = PageIndex + 1;
        Paging1.DataLoad();
        */

        grdTest.DataSource = DS.Tables[0].DefaultView;
        grdTest.DataBind();
    }

    public DataSet GetData()
    {
        DataSet DS = new DataSet();
        SqlConnection Conn = new SqlConnection("Data Source=shradha;" + 
                      "Initial Catalog=Sindhu;user id=sa;password=nitin");
        SqlCommand Comm = new SqlCommand("select * from tbl_Author", Conn);
        SqlDataAdapter AD = new SqlDataAdapter();
        AD.SelectCommand = Comm;
        AD.Fill(DS);
        return DS;
    }
    public void Paging_Click(object sender, CommandEventArgs e)
    {
        string CurrentPage = e.CommandArgument.ToString();
        grdTest.PageIndex = Convert.ToInt32(CurrentPage) - 1;
        DataLoad();
    }
}

Please download the sample project to see a demo.

License

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


Written By
Nitin Sindhu
Product Manager
India India
Nitin Kr Sindhu is a Master of Computer Application(MCA).
He is working with .Net technologies in web development since 2004.
Working in various languages like C#, VB.NET and Use Database with Access & MS SQL Server
with Javascript, AJAX, ASP.NET.

Comments and Discussions

 
First PrevNext
QuestionGood but not enough Pin
ss9o9o9o16-May-16 23:16
ss9o9o9o16-May-16 23:16 
QuestionUpdatePanel trigger for paging Pin
v.meenal10-Dec-13 21:13
v.meenal10-Dec-13 21:13 
AnswerRe: UpdatePanel trigger for paging Pin
Nitin Sindhu6-Jan-14 6:39
professionalNitin Sindhu6-Jan-14 6:39 
Questiongood one Pin
kkprasadh5-Jun-13 11:29
kkprasadh5-Jun-13 11:29 
GeneralMy vote of 2 Pin
hims05624-Sep-12 20:51
hims05624-Sep-12 20:51 
GeneralRe: My vote of 2 Pin
Nitin Sindhu18-Oct-12 2:22
professionalNitin Sindhu18-Oct-12 2:22 
QuestionNeed Source Pin
CzyNickCoder3-Aug-12 5:41
CzyNickCoder3-Aug-12 5:41 
Questionintegrating with datalist instead of griview Pin
Member 474887029-Jul-11 8:31
Member 474887029-Jul-11 8:31 
AnswerRe: integrating with datalist instead of griview Pin
Member 474887029-Jul-11 21:27
Member 474887029-Jul-11 21:27 
AnswerRe: integrating with datalist instead of griview Pin
Nitin Sindhu17-Aug-11 21:34
professionalNitin Sindhu17-Aug-11 21:34 
AnswerRe: integrating with datalist instead of griview Pin
ibdtd11-Nov-11 23:47
ibdtd11-Nov-11 23:47 
GeneralIt doesn't work with datalist Pin
tongngocoanh23-Aug-10 17:23
tongngocoanh23-Aug-10 17:23 
GeneralPls Helpme DataList Paging Control or repeter control Pin
mavicocuQ23-Mar-10 3:43
mavicocuQ23-Mar-10 3:43 
QuestionIs it not possible to add in two forms in same application...?? Pin
Member 426366211-Feb-10 0:15
Member 426366211-Feb-10 0:15 
GeneralRow Alignments Pin
josaz15-Jan-10 5:29
josaz15-Jan-10 5:29 
Generalproblem when pressionng previous Pin
ps364525-Oct-09 3:47
ps364525-Oct-09 3:47 
GeneralRe: problem when pressionng previous Pin
Nitin Sindhu28-Dec-09 1:54
professionalNitin Sindhu28-Dec-09 1:54 
GeneralDataList Example [modified] Pin
mwolf8423-Sep-09 12:25
mwolf8423-Sep-09 12:25 
GeneralRe: DataList Example Pin
Nitin Sindhu28-Dec-09 1:23
professionalNitin Sindhu28-Dec-09 1:23 
GeneralPaging not working properlly Pin
josaz2-Sep-09 11:14
josaz2-Sep-09 11:14 
Hi, Nitin, I am trying to use your paging control but for some reason it worked for 1 day after that it stopped, it loads the records in the grid with no problem but when you are trying to move to the next paging
it goes to the last page created in the GRID explain
for instance the recordset load 50K rows in the GRID with 268 pages
your control starts the paging at the BOF #1 Page when you click on the next one or the numeric paging 1,2,3,4,5 etc it goes to the last one 268 and it does not page prev or next just refresh to original load any idea?

I am loading records from SQL database using oledbDataReader
as follow (This part works fine and show the records in the grid)

if (oRs.HasRows == true)
{
dr = dt.NewRow();
dr["ID"] = oRs["customerid"].ToString();
dr["Name"] = oRs["firstname"].ToString() + ", " + oRs["firstname"].ToString();
dr["City"] = oRs["city"].ToString();
dr["State"] = oRs["state"].ToString();
dr["Phone"] = oRs["Phone"].ToString();
dr["Preferred"] = oRs["PreferredCustomer"].ToString();
dt.Rows.Add(dr);

while (oRs.Read())
{

dr = dt.NewRow();
dr["ID"] = oRs["customerid"].ToString();
dr["Name"] = oRs["firsttname"].ToString() + ", " + oRs["firstname"].ToString();
dr["City"] = oRs["city"].ToString();
dr["State"] = oRs["state"].ToString();
dr["Phone"] = oRs["Phone"].ToString();
dr["Preferred"] = oRs["PreferredCustomer"].ToString();
dt.Rows.Add(dr);
}
oRs.Close();
}
dt.AcceptChanges();
return dt;

//- Next or Prev page or any # from the grid clicked.
public void Paging_Click(object sender, CommandEventArgs e)
{
string CurrentPage = e.CommandArgument.ToString();
grdCust.PageIndex = Convert.ToInt32(CurrentPage) - 1;
DataLoad();
}

TIA
Al
GeneralRe: Paging not working properlly Pin
Nitin Sindhu12-Sep-09 2:21
professionalNitin Sindhu12-Sep-09 2:21 
GeneralRe: Paging not working properlly Pin
josaz13-Sep-09 12:40
josaz13-Sep-09 12:40 
GeneralRe: Paging not working properlly Pin
josaz14-Sep-09 10:38
josaz14-Sep-09 10:38 
GeneralThanxx a lott Pin
arry.net10-Jun-09 22:50
arry.net10-Jun-09 22:50 
GeneralI need this for datalist and datagrid Pin
subathral14-May-09 18:26
subathral14-May-09 18:26 
Last Visit: 31-Dec-99 18:00     Last Update: 27-Apr-24 7:59Refresh12 Next ᐅ

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

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

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 24 Sep 2008

Article Copyright 2008 by Nitin Sindhu
Everything else Copyright © CodeProject, 1999-2024

Web03 2.8:2024-04-02:1