Recently, I decided that our user administration pages here at work
for our public website was due for an overhaul. The old
version had become very painful to work with indeed, since depended on
a categorized tree view of all of our registered companies and users on
our public web site, it looked sorta like this:
Our membership is in the thousands now, and the tree view paradigm
has completely become unusable with this amount of data. In fact the
HTML page size alone for this page was nearly a megabyte!
Ack! I think thereâs some UI rule here about tree views and
expected data size, but I had to find a better
way. After some experimentation, the new design allows
the admin to group the company list by alphabet. The
new design looks like this, and works much better. Total page size
is under 150K now. Not great, I know, but a vast improvement. And
for the small user population that uses this, it'll do fine for a while ;) .
Anyhow, the alphabet selection control I thought may be something that will
see some re-use, so Iâve implemented it as a simple custom control that
can be dragged onto a web form. It supports one event,
ItemSelected, and has one property SelectedItem. The idea is very
simple, and chances are this has been done over and over again by many,
but I thought Iâd share this snippet of code here:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
namespace YourNamespace.Web.UI.WebControls
{
[DefaultEvent("ItemSelected")]
public class AlphabetList : System.Web.UI.WebControls.WebControl
{
public event System.EventHandler ItemSelected;
protected override void OnInit(EventArgs e)
{
for(int i=65; i < 91; i++)
{
LinkButton lb = new LinkButton();
string alphaChar = ((char)i).ToString();
lb.Text = alphaChar;
lb.CommandArgument = alphaChar;
lb.Click += new EventHandler(lb_Click);
lb.ID = alphaChar;
this.Controls.Add(lb);
this.Controls.Add(new LiteralControl(" "));
}
LinkButton lbAll = new LinkButton();
lbAll.Text = "ALL";
lbAll.CommandArgument = "ALL";
lbAll.Click += new EventHandler(lb_Click);
lbAll.ID = "ALL";
this.Controls.Add(lbAll);
base.OnInit(e);
}
/// <summary>
/// Gets the selected item.
/// </summary>
/// <value>The selected item.</value>
public string SelectedItem
{
get
{
return this.ViewState["selected"] as string;
}
}
/// <summary>
/// Handles the Click event of the lb control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
private void lb_Click(object sender, EventArgs e)
{
if(this.SelectedItem != null)
{
(this.FindControl(this.SelectedItem) as LinkButton).Enabled = true;
}
this.ViewState["selected"] = (sender as LinkButton).CommandArgument;
(sender as LinkButton).Enabled = false;
if(this.ItemSelected != null)
this.ItemSelected(this, new EventArgs());
}
}
}
Previous Topic
