Click here to Skip to main content
13,252,065 members (56,236 online)
Click here to Skip to main content
Add your own
alternative version


37 bookmarked
Posted 7 Apr 2010

Custom Gridveiw Control with Custom Pager, Check Box Column, Serial Number Column, Custom Navigation

, 7 Apr 2010
Rate this:
Please Sign up or sign in to vote.
This article contains Custom Gridview Control with added features like Custom Pager Navigation Controls, custom Page Size with Drop Down List, Check Box Column, Serial Number Column


While working on the websites Grid-view turns to be very effective, very powerful and rich tool. It helps us to view data in paginated manner. It helps us most of the time developing website, but still there are occasions where we are required to add some features to fulfill the requirement. e.g. Adding check-box column (along with writing JavaScript code), show serial numbers, show page summary, dynamically increase or decrease page size, etc. In this article, I am going to create a custom grid-view control which will help us in this regard.


How the Control is Created

The idea behind this control is very simple:

  • Override the InitializePager method for customization of gridview
  • Create temporary table with Three Cells and give with 100%
  • In the fist Cell, Create Navigation Control (Image Buttons for First, Next, Previous, Last, DropdownList for showing Page Count)
    • Create 4 image buttons with properties ImageUrl property so that we can set custom Images for navigation
    • For Image button, set correct command argument for First, Next, Previous, Last, i.e. (Fist Page has Page index 0, Next page has Current Page Index +1, Previous Button has Current Index +1, Last has Page Count+1)
    • Add new eventhandler for the click of imagebutton, Dropdownlist and pass Commandargument, DropdownValue as argument to gridviews pageindex changing event.
  • In the second cell, we show Grid information in labels.
  • In the third cell, we create dropdown list with custom page size, attach eventhandler to selected index change and set pagesize.
  • Create Checkbox columns and Serial Number Columns
    • Override OnRowCreated method
    • Check for created row is Header, or datarow
    • Check if CheckboxColumn and SerialNoColumn property is set to true
    • If it is true then in Header row write Header for Check Box first, and then Serial
    • If it is datarow, then create RowLevelCheckboxes
  • Create On OnLoad method include JavaScript file from the DLL
  • On Render, create Top and bottom buttons for Select All and Select None

Using the Code

I will explain most of the code here for Check box Column I have used JavaScript code written by Scott Mitchel. Many thanks to the genius.

Properties for the Custom Gridview Control

Property Type Purpose
CustomPageingBoolean Enables/Disables custom paging
CheckBoxColumnBooleanEnables/Disables CheckBox Column
SerialNoBooleanEnables/Disables SR. No. Column
FirstImageStringSets/Gets Images path to First Navigation Button
NextImageStringSets/Gets Images path to Next Navigation Button
PreviousImage StringSets/Gets Images path to Previous Navigation Button
LastImageStringSets/Gets Images path to Last Navigation Button

Setting Properties

Enables/Disables Custom Paging

public bool CustomPageing
           get { return _CustomPageing; }
           set { _CustomPageing = value; }

Enables/Disables CheckBox Column

public bool CheckBoxColumn
                return _checkboxColumn;
                _checkboxColumn = value;
                //if Checkbox column is required, then Add New Boundfield 
                //into the gridview row at index 0.
                if (CheckBoxColumn)
                    this.Columns.Insert(0, new BoundField());

Enables/Disables SR. No. Column

public bool SerialNoColumn
                return _SrNoColumn;
                _SrNoColumn = value;
                //if SerialNoColumn is required, then Add New Boundfield 
                //into the gridview row at index 0.
                if (SerialNoColumn)
                    this.Columns.Insert(0, new BoundField());

Sets/Gets Images path to First Navigation Button

public string FirstImage
         get { return _nav_first; }
         set { _nav_first = value; }

Other properties for Image Button are the same, so I have avoided repetition.

InitializePager Event

In this Event, we create a table with 3 cells for Page Navigation, Page Summary and Page Size controls attach Event Handlers and add this table into the pager row:

protected override void InitializePager(GridViewRow row, 
		int columnSpan, PagedDataSource pagedDataSource)
            //Checking the type of pager Custom or Default.
            if (!CustomPageing)
                //The pager will be initialized to default. 
                //if we don't want it in the usual way
                base.InitializePager(row, columnSpan, pagedDataSource);
                //Custom Pager

                //Each time we add 1 to columnSpan when properties for 
                //CheckBoxColumn and SerialNoColumn are set to true
                if (CheckBoxColumn) { columnSpan += 1; }
                if (SerialNoColumn) { columnSpan += 1; }

                //Creating Controls
                //Creating DropdownList to Show No of pages in the GridView. 
                DropDownList ddl = new DropDownList();
                ddl.AutoPostBack = true;
                for (int i = 0; i < PageCount; i++)
                    ddl.Items.Add(new ListItem(Convert.ToString(i + 1), i.ToString()));
                //We have to new Add Eventhandler to change page 
                //index on selecting Page number from the Gridview
                ddl.SelectedIndexChanged += new EventHandler(ddl_SelectedIndexChanged);
                ddl.SelectedIndex = PageIndex;

                //Creating DropdownList having Page size 
                DropDownList ddlPageSize = new DropDownList();
                ddlPageSize.ID = "PageSize";
                ddlPageSize.AutoPostBack = true;
                ddlPageSize.Items.Add(new ListItem("- Page Size -", "10"));
                ddlPageSize.Items.Add(new ListItem("10", "10"));
                ddlPageSize.Items.Add(new ListItem("25", "25"));
                ddlPageSize.Items.Add(new ListItem("50", "50"));
                ddlPageSize.Items.Add(new ListItem("100", "100"));
                ddlPageSize.Items.Add(new ListItem("All", 
			(this.PageCount * this.PageSize).ToString()));
                //add Event Handler to it
                ddlPageSize.SelectedIndexChanged += 
			new EventHandler(ddlPageSize_SelectedIndexChanged);

                //Creating Image Buttons for navigation and setting its page index, 
                //attach eventhandlers for Click
                ImageButton first = new ImageButton();
                first.AlternateText = "|<< First ";

                //If we do not give image or left blank then 
                //it will automatically assign default image.
                first.ImageUrl = (FirstImage == string.Empty) ? 
			"Indrajeet.Web.UI.WebControls.First.gif") : FirstImage;

                //Fist button always has Page index 0 
                first.CommandArgument = "0";
                first.Enabled = PageIndex > 0;
                first.Click += new ImageClickEventHandler(navigate_Click);

                ImageButton prev = new ImageButton();
                prev.AlternateText = " < Prev ";
                prev.ImageUrl = (PreviousImage == string.Empty) ? 
			"Indrajeet.Web.UI.WebControls.Prev.gif") : PreviousImage;

                //Previous button always has Page Index=  Page index -1  
                prev.CommandArgument = string.Format("{0}", (PageIndex - 1));
                prev.Enabled = (PageIndex > 0);
                prev.Click += new ImageClickEventHandler(navigate_Click);

                ImageButton next = new ImageButton();
                next.AlternateText = "Next > ";
                next.ImageUrl = (NextImage == string.Empty) ? 
			"Indrajeet.Web.UI.WebControls.Next.gif") : NextImage;

                //Previous button always has Page Index=  Page index +1  
                next.CommandArgument = string.Format("{0}", (PageIndex + 1));
                next.Enabled = (PageIndex < (PageCount - 1));
                next.Click += new ImageClickEventHandler(navigate_Click);

                ImageButton last = new ImageButton();
                last.AlternateText = "Last >>|";
                last.ImageUrl = (LastImage == string.Empty) ? 
			"Indrajeet.Web.UI.WebControls.Last.gif") : LastImage;
                //Last Button always has Last Page index so it is Page count -1 
                last.CommandArgument = string.Format("{0}", (PageCount - 1));
                last.Enabled = (PageIndex < (PageCount - 1));
                last.Click += new ImageClickEventHandler(navigate_Click);

                //New Creating Table with Tree Cells. 
                //First Cell contains Paging Navigation Control 
                //i.e. First, Next, DropDown for Current Page and Next, Last Record
                //Second Cell contains Paging Summary. 
                //Third Cell will contain The Page Size.

                //Crate a Table Cell One and Add Navigation Controls to it.
                TableCell CellOne = new TableCell();

                //Create Cell Two
                TableCell cellTwo = new TableCell();

                TableCell cellThree = new TableCell();

                //Create Table and row and add cells in to that Row.
                Table PagerTable = new Table();
                PagerTable.BorderWidth = 0;
                PagerTable.Width = Unit.Percentage(100);
                PagerTable.Rows.Add(new TableRow());
                PagerTable.Rows[0].Cells[0].HorizontalAlign = HorizontalAlign.Left;
                PagerTable.Rows[0].Cells[1].HorizontalAlign = HorizontalAlign.Center;
                PagerTable.Rows[0].Cells[2].HorizontalAlign = HorizontalAlign.Right;

                //Now Add this table to GridViewRow
                row.Controls.AddAt(0, new TableCell());
                row.Cells[0].ColumnSpan = columnSpan;
                row.Cells[0].Controls.AddAt(0, PagerTable);

On OnRowCreated Event of the GridView

In this event, we add CheckBoxColumn and SerialNoColumn if required at each row.

protected override void OnRowCreated(GridViewRowEventArgs e)
           //Checking Rowtype
           if (e.Row.RowType != DataControlRowType.Pager)
               //Add header Columns for Checkbox and Serial No
               if (e.Row.RowType == DataControlRowType.Header)
                   //Render Checkbox control if CheckBoxColumn is true
                   if (CheckBoxColumn)
                       HtmlInputCheckBox chkheader = new HtmlInputCheckBox();
                       chkheader.ID = "HeaderLevelCheckBox";
                       _ArrayValues = new List<string>();
                       _ArrayValues.Add(string.Concat("'", chkheader.ClientID, "'"));
                   //Render Serial Number Column if SerialNoColumn is true
                   if (SerialNoColumn)

                       Label lbl = new Label();
                       lbl.ID = "SrNo" + e.Row.DataItemIndex + 1;
                       lbl.Text = "Srial No.";
                       //Checkbox column is set to first so check if,
                       //checkboxColumn is present then SerialNoColumn
                       //will be second else first
                       e.Row.Cells[(CheckBoxColumn) ? 1 : 0].Controls.Add(lbl);
               //Add DataRows for checkbox and SerialNoColumn
               else if (e.Row.RowType == DataControlRowType.DataRow)
                   if (CheckBoxColumn)
                       HtmlInputCheckBox chkRow = new HtmlInputCheckBox();
                       chkRow.ID = "RowLevelCheckBox" + i++;
                       chkRow.Attributes.Add("onclick", "ChangeHeaderAsNeeded();");
                       _ArrayValues.Add(string.Concat("'", chkRow.ClientID, "'"));
                   if (SerialNoColumn)
                       Label lbl = new Label();
                       lbl.ID = "SrNo" + e.Row.DataItemIndex + 1;
                       lbl.Text = (e.Row.DataItemIndex + 1).ToString(); ;
                       e.Row.Cells[(CheckBoxColumn) ? 1 : 0].Controls.Add(lbl);


Button/DropDownList Event Handlers

protected virtual void ddl_SelectedIndexChanged(object sender, EventArgs e)
            OnPageIndexChanging(new GridViewPageEventArgs

        //For Pagesize set pagesize to DropDownLists SelectedValue and 
        //raise GridView's OnPageIndexChanging method and pass currentpage index to it
        protected void ddlPageSize_SelectedIndexChanged(object sender, EventArgs e)
            this.PageSize = Convert.ToInt16(((DropDownList)sender).SelectedValue);
            OnPageIndexChanging(new GridViewPageEventArgs(this.PageIndex));

        //On Click Event of Navigation Button
        //we have to pass CommandArgument as argument
        //to GridView's OnPageIndexChanging method
        protected virtual void navigate_Click(object sender, EventArgs e)
            OnPageIndexChanging(new GridViewPageEventArgs

Other Page Information Controls

private Label PageOf()
            Label lbl = new Label();
            lbl.Text = "Page ";
            return lbl;

        //For showing GridView's Page Count
        private Label PageTotal()
            Label lbl = new Label();
            lbl.Text = string.Format(" of {0}", PageCount);
            return lbl;

        //For Displaying Current Record
        private Label PageInfo(int rowCount)
            Label lbl = new Label();
            int FirstRowCurrentPage = ((PageIndex * PageSize) + 1);
            int LastRowCurrentPage = 0;
            int LastPageIndicator = rowCount % PageSize;
            LastRowCurrentPage = (PageCount == PageIndex + 1) ? 
		(FirstRowCurrentPage + LastPageIndicator - 1) : 
		(FirstRowCurrentPage + PageSize - 1);
            lbl.Text = String.Format("Record {0} to {1} of {2}", 
		FirstRowCurrentPage, LastRowCurrentPage, rowCount);
            return lbl;

On Load Event

protected override void OnLoad(EventArgs e)
            //Calling Javascript file
            string gridScriptPath = Page.ClientScript.GetWebResourceUrl
			(this.GetType(), _gridCheck_JS);
            if (!Page.ClientScript.IsClientScriptIncludeRegistered
			(this.GetType(), _gridCheck_JS))
			(this.GetType(), _gridCheck_JS, gridScriptPath);

On Render Event

protected override void Render(HtmlTextWriter writer)
            if (Rows.Count > 0)
                HtmlInputButton btn = new HtmlInputButton();
                btn.ID = "SelectAllU";
                btn.Value = "Select All";
                btn.Attributes.Add("onclick", "ChangeAllCheckBoxStates(true);");

                HtmlInputButton btn2 = new HtmlInputButton();
                btn2.ID = "SelectNoneU";
                btn2.Value = "Select None";
                btn2.Attributes.Add("onclick", "ChangeAllCheckBoxStates(false);");

                HtmlInputButton btn3 = new HtmlInputButton();
                btn3.ID = "SelectAllD";
                btn3.Value = "Select All";
                btn3.Attributes.Add("onclick", "ChangeAllCheckBoxStates(true);");

                HtmlInputButton btn4 = new HtmlInputButton();
                btn4.ID = "SelectNoneD";
                btn4.Value = "Select None";
                btn4.Attributes.Add("onclick", "ChangeAllCheckBoxStates(false);");

            if (CheckBoxColumn)
                //Creating Javascript Array of Gridview Checkbox 
                Literal CheckBoxIDsArray = new Literal();
                CheckBoxIDsArray.Text = "<script type="\"text/javascript\"">\n\n" + 
		string.Concat("var CheckBoxIDs =  new Array(", string.Join
		(",", _ArrayValues.ToArray()), ");") + "\n\n</script>";


Special Thanks to

Scott Mitchell for the Checkbox Column JavaScript Code


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


About the Author

Indrajeet Sutar
Software Developer (Junior) Excel Informatics, Pune
India India
Am Indrajeet T. Sutar. I am a web developer. I am working on .net technology. I have completed my Masters in Computers and Management (people call it as MCA, MBA etc.) Apart from programming i do photography (not regularly though), traveling and reading books.

You may also be interested in...


Comments and Discussions

QuestionChangeAllCheckBoxStates missing Pin
manishpandey20092-Mar-12 2:59
membermanishpandey20092-Mar-12 2:59 
BugWhen selecting All, the controls disapears, Pin
mehboobafridi18-Feb-12 21:41
membermehboobafridi18-Feb-12 21:41 
Questionincomplete i think Pin
mayur csharp G25-Nov-11 19:11
membermayur csharp G25-Nov-11 19:11 
Generalneed js file Pin
irfan Samad17-Mar-11 1:43
memberirfan Samad17-Mar-11 1:43 
GeneralDisable Select ALL and Select None Pin
Funnyboy23-Jan-11 18:01
memberFunnyboy23-Jan-11 18:01 
GeneralMy vote of 1 Pin
kraftspl7-Apr-10 8:43
memberkraftspl7-Apr-10 8:43 

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 | Terms of Use | Mobile
Web03 | 2.8.171114.1 | Last Updated 8 Apr 2010
Article Copyright 2010 by Indrajeet Sutar
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid