The first thing I did was create my own control that inherits from CheckboxList. The table-based output of the standard checkbox list is harder to style, and in general I like to used unordered lists wherever possible, so I followed this simple method for overloading the Render method and making my own output as an <ul> and each selection as a <li>. The example Chris Pollock gives is in VB, below is my loose adaptation in C#.

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
string inputFormatString = "<input id=\"{0}\" name=\"{1}\" type=\"checkbox\" value=\"{2}\" {3} {4} />";
string labelFormatString = "{1}";
if (!string.IsNullOrEmpty(this.CssClass))
writer.WriteLine("<ul class=\"" + this.CssClass + "\">");
else
writer.WriteLine("<ul>");
for (int i = 0; i < Items.Count; i++)
{
string postbackScript = "";
if(this.AutoPostBack)
{
postbackScript = String.Format("onclick=\"javascript:setTimeout('__doPostBack(\'{0}\',\'\')', 0)\"", this.UniqueID + "$" + i.ToString());
}
string itemChecked = "";
if(Items[i].Selected)
{
itemChecked = "checked=\"checked\"";
}
writer.WriteLine("<li>");
writer.WriteLine(string.Format(inputFormatString, this.ClientID + "_" + i.ToString(), this.UniqueID + "$" + i.ToString(), Items[i].Value, itemChecked, postbackScript));
writer.WriteLine(string.Format(labelFormatString, this.ClientID + "_" + i.ToString(), Items[i].Text));
writer.WriteLine("</li>");
}
writer.WriteLine("</ul>");
}

It’s a nice start, but it doesn’t solve my problem of adding headings to the list. I could go pretty far into making this CheckBoxList control really custom so that it accepts a heirarchical data source, but i decided that would be good for another time. I simply decided to create an event on the CheckBoxList that would be called before each item renders.

public delegate void ItemPreRenderHandler(System.Collections.IEnumerable data, int index, ListItem item, System.Web.UI.HtmlTextWriter writer);
public event ItemPreRenderHandler ItemPreRender;
public void OnItemPreRender(System.Collections.IEnumerable data, int index, ListItem item, System.Web.UI.HtmlTextWriter writer)
{
if (ItemPreRender != null)
{
ItemPreRender(data, index, item, writer);
}
}


And call OnItemPreRender in the Render method as the first command in the for loop for each item.

OnItemPreRender(((System.Collections.IEnumerable)this.DataSource), i ,Items[i], writer);

With this, on the page using the control, I hooked a method up to the Event that checked to see if the ‘Category’ was different than the last item, and if so output an <li> with a heading. Very old school, but rather simple and flexible.

Create a Pager control

Create a UserControl for your pager (mine is called Pagination.ascx). On the Page that will contain the pagination, register the Pagination UserControl and drop two of them on there.

Handling CurrentPage and PageSize values on the pager

The pagers will need two numbers to function; the current page of results, and records per page. The super duper easy way to save and load this state is to read the values from GET variables and store them as Parameters. You can go ahead and do this on the pagers themselves and you are done! When the value is changed via a dropdownlist for the PageSize or clicking to navigate to a new page, just Response.Redirect back to the same page with your values in GET (ie ?currentpage=1&pagesize=15).  In fact if you have to get this done right away just go do that. It’s also worth noting that this makes it possible for users to bookmark searches (the below method does not).

The Event Driven Way: Handling the values on the containing element

As an alternative, lets say that you don’t wanna use GET variables and want to keep the info in a central location. When you first load the page, initialize the two variables and stuff the values into a serializable struct and save/load the control state of the page. Now the values are in one place and reliable.

Pass the values down to the child elements

Go ahead and write some code into the Pagination.ascx control to insert the values from the parent. To do this, you will need to create public Properties on the Pagination.ascx control in the codebehind file. Make a property for PageSize and CurrentPage as int. In the codebehind for your containing page, within the OnLoad method set these properties with your values like so…

cstTopPagination.PageSize = this.PageSize;
cstTopPagination.CurrentPage = this.CurrentPage;
cstBottomPagination.PageSize = this.PageSize;
cstBottomPagination.CurrentPage = this.CurrentPage;

So just before the pagers render, they will have the proper values and will be able to display as needed!

What to do when the pager changes

Here is where events come in. Even if you are pretty new to .NET you’ve likely utilized some events on Microsoft controls such as the DataGrid’s OnItemDataBound event or DropDownList’s OnSelectIndexChanged. We’re gonna make some of our own! Place the following lines into the codebehind for your Pagination UserControl…

public delegate void PageSizeChangedHandler(int PageSize);
public delegate void CurrentPageChangedHandler(int CurrentPage);
public event PageSizeChangedHandler PageSizeChanged;
public event CurrentPageChangedHandler CurrentPageChanged;

You can read more about how the above works, but in short the event serves as a method that you will call to signal ‘Hey, I’m changing the page size’.  Any controls that link to this event will be notified, this is called Event Bubbling. The delegate is a contract with the controls consuming the event that tells them how they must create their methods to comply with the event. Think of it as a kind of interface.

Here is an example from Pagination.ascx.cs of how I call the event when a user clicks on a LinkButton with the CommandName of “Navigate” and a CommandArgument of a page number.

protected void CommandFilter(object sender, CommandEventArgs e)
{
switch (e.CommandName)
{
case "Navigate":
OnCurrentPageChanged(int.Parse(e.CommandArgument.ToString()));
break;
default:
break;
}

}

Any controls that link into the Event CurrentPageChanged will be alerted with the value int.Parse(e.CommandArgument.ToString()). You’ll notice also that I call OnCurrentPageChanged not CurrentPageChanged. .NET creates this handle for you for your event.

On your containing page, you’ve probably got something similar to the following where your pagination control is on the page…

<rbl:Pagination ID="cstBottomPagination" runat="server" />

Modify it like so…

<rbl:Pagination ID="cstBottomPagination" runat="server" OnPageSizeChanged="PageSizeChanged" OnCurrentPageChanged="CurrentPageChanged" />

See how the events are accessible on the control? Now go to your codebehind for the page and add a method for PageSizeChanged…

protected void PageSizeChanged(int size)
{
this.PageSize = size;
this.CurrentPage = 1;
}

There you go. This officially completes the cycle; Value is loaded in the containing page, passed down to child, if it changes it is bubbled back, and the value is saved on the containing page at the end. This method also works if you have a UserControl within a UserControl and you’d like to bubble the event up.

There’s lots of practical and creative uses for events. This implementation is simple but it was fairly easy to learn and has potential for very powerful and smart controls. It cuts down on ‘black magic’ in your child controls where information is obtained circumstantialy or through unpredicatble traversal. Events are clean and readable once you understand them, and I like them alot.