Click here to Skip to main content
Click here to Skip to main content

Navigation Web User Control

By , 29 May 2009
Rate this:
Please Sign up or sign in to vote.

Introduction

Navigation Web User Control derived from WebControl (DLL) creates navigation buttons at run time so the user can navigate on the data list or any other controls. The developer can change the alignment and separation text between links or show and hide first, last, previous and next links. This control gets its style from its container. The developer just needs PageIndexClick event to type his/her code when the page is clicked and set paging count in page load.

What Problem Does This Control Solve?

This user control is used to navigate on data list, Repeater or any other controls that contain a list of data and don't have built in navigation like the built in navigation on data grid. When put on an Ajax panel, it will work without postback of the entire page and it will get its style from the container.

How Does this Control Help developers?

Instead of creating paging code for each data lists, just drag and drop the paging user control and handle the page click events in each page. It has many properties to be more flexible, e.g.: (ShowCount, ShowFirst, ShowLast, ShowNext, ShowPrevious, Navigation Links Count per page, Pages Count, CurrentPageIndex, Separation between pages links, Separation After and before CountText).

How to Use the Control?

1-Set Control Setting in Page Load "Layout Properties"

Example 1

if (!IsPostBack)
        {
            PagingControl1.CountAlignment = PagingControl.Alignment.Center;
            PagingControl1.CountPosition  = PagingControl.Position.Bottom;
            PagingControl1.CurrentPageIndex = 1;
            PagingControl1.PagesCount = 20;
            PagingControl1.LinkSeparatorText = "--";
            PagingControl1.LastButtonText = ">>>>";
            PagingControl1.FirstButtonText = "<<<<";
            PagingControl1.NextButtonText = ">>";
            PagingControl1.PreviousButtonText = "<<";
            PagingControl1.NavigationLinkesCount = 20;
            PagingControl1.ShowCount = false;
            PagingControl1.ShowFirst = false;
            PagingControl1.ShowLast = false;
            PagingControl1.ShowNext = false;
            PagingControl1.ShowPrevious = false;
        }

Example 2

if (!IsPostBack)
        {
            PagingControl2.CountAlignment = 
			CustomWebControlsLib.PagingControl.Alignment.Left;
            PagingControl2.AfterCountText = "***";
            PagingControl2.BeforeCountText = "***";
            PagingControl2.CountPosition = 
			CustomWebControlsLib.PagingControl.Position.Top; ;
            PagingControl2.CurrentPageIndex = 2;
            PagingControl2.PagesCount = 20;
            PagingControl2.NavigationLinkesCount = 10;
           
        }

Example 3

if (!IsPostBack)
        {
            PagingControl3.CountAlignment = 
		CustomWebControlsLib.PagingControl.Alignment.Right;
            PagingControl3.CountPosition = 
		CustomWebControlsLib.PagingControl.Position.Left; ;
            PagingControl3.CurrentPageIndex = 3;
            PagingControl3.PagesCount = 20;
            PagingControl3.NavigationLinkesCount = 15;
        }

Example 4

 if (!IsPostBack)
        {
            PagingControl4.CountPosition = 
		CustomWebControlsLib.PagingControl.Position.Right; ;
            PagingControl4.CurrentPageIndex = 4;
            PagingControl4.PagesCount = 20;
            PagingControl4.NavigationLinkesCount = 5;
        }

2-To get page index from this control use PagingControl1_PageIndexClick(object sender, EventArgs e) event

The Control Properties and Events

Properties

Property Names Default Value Description
LinkSeparatorText "||" The separation between pages links
PreviousButtonText "Prev" Previous Button Text
NextButtonText "Next" Next Button Text
FirstButtonText "First" First Button Text
LastButtonText "Last" Last Button Text
SeparatedCountText " Of " The separation between current page and total pages 1 of 10
BeforeCountText "(" The start separation for count label
AfterCountText ")" The end separation for count label
CountAlignment "Alignment.Center" The count Alignment can be Center, Right, Left
CountPosition "Position.Bottom" The count position can be Top, Bottom, Right, Left
ShowCount "true" Show/Hide Count Label
ShowFirst "true" Show/Hide First Button
ShowLast "true" Show/Hide Last Button
ShowPrevious "true" Show/Hide Previous Button
ShowNext "true" Show/Hide Next Button
CurrentPageIndex 1 The selected page index
PagesCount 1 Number of pages
NavigationLinkesCount 1 Number of Navigation Links Appears per page
NoRecordsPerPage 1 No Records Appear per Page

Event

Event Name Description
PageIndexClick To allow developer to handle page index click event on his/her web page.
Just get page index from PagingControl1.CurrentPageIndex property and use this event to execute the needed code on page index click.

Sample for How to Use this Control

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //set control settings
            PagingControl1.NoRecordsPerPage = 20;
            PagingControl1.CurrentPageIndex = 1;
            PagingControl1.NavigationLinkesCount = 12;

            //Get Items data 
            ViewState["_Items"] = GetItems();
            ViewPage(PagingControl1.CurrentPageIndex);
        }
    }

    protected void PagingControl1_PageIndexClick(object sender, EventArgs e)
    {
        ViewPage(PagingControl1.CurrentPageIndex);
    }     #endregion
 
    private void ViewPage(int PageNo)
    {
        if (ViewState["_Items"] != null)
        {
            PagedDataSource objPds = new PagedDataSource();
            DataTable dt = (DataTable)ViewState["_Items"];
            objPds.DataSource = new DataView(dt);
            objPds.AllowPaging = true;
            objPds.PageSize = PagingControl1.NoRecordsPerPage;
            objPds.CurrentPageIndex = PageNo - 1;

            dlstItems.DataSource = objPds;
            dlstItems.DataBind();

            double d = Math.Ceiling(Convert.ToDouble(dt.Rows.Count) / 
					PagingControl1.NoRecordsPerPage);
            PagingControl1.PagesCount = Convert.ToInt32(d);
            dlstItems.Visible = true;
            PagingControl1.Visible = true;
            lblResultMessage.Visible = false;
        }
        else
        {
            dlstItems.Visible = false;
            lblResultMessage.Visible = true;
            PagingControl1.Visible = false;
            lblResultMessage.Text = "No Result";
        }
    }

    private DataTable GetItems()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ItemId");
        dt.Columns.Add("ItemName");
        for (int i = 1; i <= 400; i++)
        {
            DataRow dr = dt.NewRow();
            dr["ItemId"] = i.ToString();
            dr["ItemName"] = "Item" + i;
            dt.Rows.Add(dr);

        }
        return dt;
    }    #endregion

How Does the Code Actually Work?

When setting Current Page Index and Page count, the system will automatic calculate the first page number. In the links example if I have 20 pages and links appears 5 per page, if selected index will be 12, then the first link in page will be 11 (12-(12%5) +1

 (
if ((CurrentPageIndex % NavigationLinkesCount == 0))
{
_CurrentStartPage = (CurrentPageIndex - NavigationLinkesCount) + 1;
}

else
{
_CurrentStartPage = (CurrentPageIndex - (CurrentPageIndex % NavigationLinkesCount)) + 1;
}

All properties values saved in view state to get its value on postback.

On load event, the page links will be drawn on runtime according to the properties values and attach lbtn.Click += LinkedButtonClick event on each link button according to the button name the event will handle the click first will set current page to 1 and previous will subscript 1 and next add 1 and last will set it to page count and other buttons set current index to be its text. After that the controls will be repainted.

            if ((lbtn.ID.IndexOf(this.ClientID + "_" + "btnFirst") > -1))
            {
CurrentPageIndex = 1;
            }
            else if ((lbtn.ID.IndexOf(this.ClientID + "_" + "btnPrevPage") > -1))
            {
if ((CurrentPageIndex > 1))
{
CurrentPageIndex = CurrentPageIndex - 1;
}
            }
            else if ((lbtn.ID.IndexOf(this.ClientID + "_" + "btnNextPage") > -1))
            {
if ((CurrentPageIndex < PagesCount))
{
CurrentPageIndex = CurrentPageIndex + 1;
}
            }
            else if ((lbtn.ID.IndexOf(this.ClientID + "_" + "btnLast") > -1))
            {
CurrentPageIndex = PagesCount;
            }
            else
            {
CurrentPageIndex = Convert.ToInt32(lbtn.Text);
            }

            PaintWithClickSelected();
        }
Method Description
GeneratePaging Generate links and put it in place holder according to control properties
SelectPage Update the count label and disable current page index click
PaintWithoutClickSelected Its Generate Paging links and update count table without fire PageIndexClick events calling for this method in page load
PaintWithClickSelected Its Generate Paging links and fire Page Click Event calling for this method in Linked Button Click

Download and run the attached source for more details.

History

  • 29th May, 2009: Initial post

License

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

About the Author

Nesreen Maged
Software Developer (Senior)
Egypt Egypt
No Biography provided

Comments and Discussions

 
GeneralWell done! PinmentorNick Butler29-May-09 4:19 
GeneralRe: Well done! [modified] PinmemberNesreen Maged29-May-09 4:36 
Generalneed help Pinmembermeraadmin16-Sep-09 23:47 
GeneralRe: need help PinmemberNesreen Maged26-Sep-09 1:23 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 29 May 2009
Article Copyright 2009 by Nesreen Maged
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid