Click here to Skip to main content
15,867,594 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 89.4K   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

 
QuestionGood but not enough Pin
ss9o9o9o16-May-16 23:16
ss9o9o9o16-May-16 23:16 
The code is in binary formatConfused | :confused: Confused | :confused: . So confusion is about Sindhu .dll file.
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 
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 

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.