|
|
Implementing the IUniPageable interface |
|
|
|
|
|
Implementing the IUniPageable interface |
|
|
|
|
|
|
Implementing the IUniPageable interface |
|
|
|
|
|
Implementing the IUniPageable interface |
|
|
|
|
|
|
||
The following is a step-by-step tutorial that will show you how to create a custom control that displays users, and have it implement the IUniPageable interface to allow it to be paged by the UniPager control:
1. Create a new Web User Control called UniPageable_Repeater.ascx inside a folder called IUniPageableExample in your website installation directory.
2. Now add the following code to the user control:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div> <%# Eval("UserName") %> </div>
</ItemTemplate>
</asp:Repeater> |
This adds a standard .NET Repeater control that will be used to display user names.
3. Switch to the code behind of the control and add the following code into it. Please keep in mind that the name of the class will be different according to the location of your web user control.
[C#]
using CMS.SiteProvider; using CMS.Controls;
public partial class IUniPageableExample_UniPageable_Repeater : System.Web.UI.UserControl, IUniPageable { // Private variable containing the value of the PagerForceNumberOfResults property private int mPagerForceNumberOfResults = -1;
// Private variable used to contain the data source of the control private object dataSource = null;
protected void Page_Load(object sender, EventArgs e) { // Loads all users from the database into the data source dataSource = UserInfoProvider.GetAllUsers();
// Call page binding event if (OnPageBinding != null) { OnPageBinding(this, null); }
// Assigns the data source to the encapsulated Repeater control Repeater1.DataSource = dataSource; Repeater1.DataBind(); }
/// <summary> /// Occurs when the control binds page data /// </summary> public event EventHandler<EventArgs> OnPageBinding;
/// <summary> /// Occurs when the pager changes the page and the current PagerMode is set to postback /// </summary> public event EventHandler<EventArgs> OnPageChanged;
/// <summary> /// Exposes the data object for the pager /// </summary> public object PagerDataItem { get { return dataSource; } set { dataSource = value; Repeater1.DataSource = value; } }
/// <summary> /// If set, the DataSet containing paged items is not modified by the pager, /// but the pager itself behaves as if the amount of paged items were identical to this value. /// By default this property is disabled (set to -1) /// </summary> public int PagerForceNumberOfResults { get { return mPagerForceNumberOfResults; } set { mPagerForceNumberOfResults = value; } }
/// <summary> /// Evokes databinding for the control /// </summary> public void ReBind() { if (OnPageChanged != null) { OnPageChanged(this, null); }
Repeater1.DataBind(); } } |
This code causes the control to implement the IUniPageable interface and adds the implementation for all its required members.
4. Save the changes to both files. Now the newly created control is pageable by the UniPager control. Create a new Web form somewhere in your website installation directory, where this functionality will be demonstrated.
5. Add the following directive to the beginning of the code of the new web form to register the custom UniPageable_Repeater control:
<%@ Register src="~/IUniPageableExample/UniPageable_Repeater.ascx" tagname="UniPageableRepeater" tagprefix="asp1" %> |
6. Now add the following code into the content area of the page (by default between the <div> tags inside the <form> element):
<asp1:UniPageableRepeater ID="UPRepeater1" runat="server" />
<cms:UniPager ID="UniPager1" runat="server" PageControl="UPRepeater1" PageSize="5">
<PageNumbersTemplate> <a href="<%# Eval("PageURL") %>"><%# Eval("Page") %></a> </PageNumbersTemplate>
</cms:UniPager> |
This adds the custom control you created in the previous steps and a UniPager that is assigned to page it.
7. Save the changes to the web form. Now right-click it in the Solution explorer and select View in Browser. The resulting page should display a list of user names with a simple pager like in the following image:
