I’m working on a web page that allows the user to apply a variety of filters to a set of data. The old implementation involved a check box for each filter and then a ListBox with MultipleSelection set to true. The user would tick what ever filter they wanted to include and then select the items out of the ListBox. Every time the user makes a selection in one of the ListBoxes, we’re making an AJAX call to update the current filters. That works great but the user has to do two things, first tell us that they want to use a particular filter using the appropriate CheckBox and then select items out of the ListBox, sometimes holding down the Shift or Control key to do multiple selection.
We decided to change that to a CheckBoxList for each filter. This removes one step and makes the UI a little more fluid. However, it did cause one problem. Previously, the ListBoxes were being loaded with data on PageLoad by just adding a new ListItem for each piece of data. This works well because the ListItem can hold whatever value you want to key off of. However, a CheckBoxList renders as a table of CheckBoxes, none of which have the ability to hold a piece of data to key off of.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
for(int x = 0; x < 3; x++)
{
MyListBox.Items.Add(new ListItem("my value is " + x, x.ToString()));
}
}
}
That code rendered a ListBox that had source like this:
From there, it was really easy to grab the value of any selections via JavaScript. Unfortunately, as mentioned above, the CheckBoxList does not render that way. Using the same code in the PageLoad ends up rendering this HTML:
As you can see, none of the checkboxes have the value attribute. There is now a label for each one but it has the Key of the ListItem and not the Value which isn't particularly helpful when you want to display one piece of data for the user but process another one based on their selection. What to do?
As it turns out, you can add an attribute that gets rendered as a span around both the input and label elements. In JavaScript, you can then grab an array of the inputs and an array of the span elements. When one of the input boxes is found to be checked, you can get the corresponding span element's attribute and use it. It looks a little something like this:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
for(int x = 0; x < 3; x++)
{
ListItem li = new ListItem {Text = "my value is " + x, Value = x.ToString()};
li.Attributes.Add("myspecialid", x.ToString());
MyCheckBoxList.Items.Add(li);
}
}
}
When the items are loaded into the ListItems, we add an attribute called "myspecialid". It can be anything you want though it doesn't work if you pick a known attribute like id or value. Once that's done, the HTML renders like this:
Our new attribute has been included in a span tag around the input element and the value we want to track is included there. Now in JavaScript, we can do this:
function DoSomething() {
var tableBody = document.getElementById("Tabstrip1_StudentsTab_MyCheckBoxList");
var inputArray = tableBody.getElementsByTagName("input");
var spanArray = tableBody.getElementsByTagName("span");
for (var x = 0; x < inputArray.length; x++) {
if (inputArray[x].checked) {
alert("The id I want is " + spanArray[x].getAttribute("myspecialid"));
}
}
if (groupsSelected.length > 0) {
__aspx.HandleMonitorGroupFilter(groupsSelected);
}
}
We grab all the input and span elements in the table. Then when we find a checkbox that is checked, we can grab the attribute we're interested in off of the appropriate span element using the getAttribute method. This is slightly hackish in that the two arrays of elements have to be in the same order but that seems like a reasonably safe assumption to make.
Overall, it seems like a good way to make the UI more fluid while still retaining the ability to manipulate necessary data on the AJAX calls.