Click here to Skip to main content
15,895,192 members
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 90K   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
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

 
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 
GeneralRe: I need this for datalist and datagrid Pin
ibdtd11-Nov-11 23:42
ibdtd11-Nov-11 23:42 
Generali need the this for datalist Pin
subathral14-May-09 16:40
subathral14-May-09 16:40 
GeneralMissing code Pin
cyh_cyh12-May-09 4:07
cyh_cyh12-May-09 4:07 
GeneralNice article............. Pin
Najmul Hoda31-Mar-09 0:20
Najmul Hoda31-Mar-09 0:20 
QuestionEquivalent Keyword for Server.MapPath in Javascript Pin
Murugan Kolanji9-Dec-08 3:14
Murugan Kolanji9-Dec-08 3:14 
Hi Sir,

we already wrote coding for insert record into MSACCESS Database using Javascript. Its working fine. But when we deploy that page into (IIS) server its trigger error in client machine. server maching ok. so we found out that problem in Connection String path. Please give me ur answer for my problem. How can get the Database Path from server using Javascript coding. or equivalent keyword for Server.MapPath.



Thanks in Advance.

Murugan.
QuestionVB.NET and Repeater paging [modified] Pin
amir_3d_mad6-Dec-08 20:08
amir_3d_mad6-Dec-08 20:08 
QuestionPaging not work in Datalist Pin
sasikanna14-Nov-08 5:19
sasikanna14-Nov-08 5:19 
AnswerRe: Paging not work in Datalist Pin
Nitin Sindhu20-Nov-08 19:47
professionalNitin Sindhu20-Nov-08 19:47 
GeneralRe: Paging not work in Datalist Pin
TZEM15-Dec-08 4:15
TZEM15-Dec-08 4:15 
GeneralRe: Paging not work in Datalist Pin
Nitin Sindhu22-Dec-08 1:23
professionalNitin Sindhu22-Dec-08 1:23 
GeneralRe: Paging not work in Datalist Pin
pritesh.cs@gmail.com6-Aug-09 22:30
pritesh.cs@gmail.com6-Aug-09 22:30 
Questioncan you provide you code? Pin
JLKEngine00830-Sep-08 0:42
JLKEngine00830-Sep-08 0:42 
AnswerRe: can you provide you code? Pin
Nitin Sindhu30-Sep-08 20:52
professionalNitin Sindhu30-Sep-08 20:52 
GeneralPaging Pin
obinna_eke29-Sep-08 3:04
obinna_eke29-Sep-08 3:04 
GeneralRe: Paging Pin
Nitin Sindhu29-Sep-08 7:12
professionalNitin Sindhu29-Sep-08 7:12 

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.