Navigation Web User Control

• Download DLL - 5.42 KB
• Download source - 48.75 KB

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

Event

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();
        }

Download and run the attached source for more details.

History

• 29^th May, 2009: Initial post