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)
{
PagingControl1.NoRecordsPerPage = 20;
PagingControl1.CurrentPageIndex = 1;
PagingControl1.NavigationLinkesCount = 12;
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