ASP.NET: Hide CheckBox items in CheckBoxList control

Question

I have a data-bound CheckBoxList control that can grow quite large, so I'm trying to create a filter for it. Here's what I'm doing:

foreach( ListItem item in this.UserRolesList.Items ) {
    if( !item.Value.StartsWith( this.RolesFilterList.SelectedValue ) ) {
        item.Attributes.CssStyle["display"] = "none";
    } else item.Attributes.CssStyle["display"] = "inline";
}

This mostly works, except that when ASP.NET renders the CheckBoxList, it does so using a table, with each CheckBox control nested within its own <TR> element. This means that even though the items I don't want to see aren't displayed, the white space for their rows is, so there's quite a bit of whites pace I still need to content with.

I'm not aware that I can access the <TR> element without subclassing the control, which this being a "nice-to-have" feature I don't have time to do, so I'm wondering if there's a CSS trick I can use to access an element's parent's parent (e.g., <input type="checkbox"/> -> <td> -> <tr>). I've used the :first-child pseudo-element before, but my web searches for this kind of trick have been fruitless, so I have my doubts. Can't hurt to ask though, right?

Is there a reason you can't filter your data source before binding to the checkboxlist? — patmortech
– patmortech, Commented Sep 20, 2011 at 17:01
You can stop it rendering as a table with RepeatLayout: msdn.microsoft.com/en-us/library/… — bgs264
– bgs264, Commented Sep 20, 2011 at 17:08
@patmortech I figured it would be more efficient that repeated calls to the database, as the user would be expected to filter, change values, filter, change values, etc. then click the form's Save button. — Michael Itzoe
– Michael Itzoe, Commented Sep 20, 2011 at 17:39
To reiterate patmortech's comments below, there is no Visible property on ListItem objects. — Michael Itzoe
– Michael Itzoe, Commented Sep 20, 2011 at 17:41

patmortech · Accepted Answer · 2011-09-20 18:14:34Z

1

This might work for you. It removes the item from the list completely so that it does not get rendered at all:

string value = this.RolesFilterList.SelectedValue;
int count = this.UserRolesList.Items.Count - 1;

for(var i=count;i>=0;i--)
{
    ListItem item = this.UserRolesList.Items[i];
    if (!item.Value.StartsWith(value))
    {
        this.UserRolesList.Items.RemoveAt(i);
    }
}

Update

Based on your comment above about how you want this to operate from a user's standpoint, you would probably be better off doing this all client-side in javascript, rather than doing it on a postback in this manner.

In jQuery, you could create a function to run when the select list is changed that would then find all the checkboxes in the UserRolesList table, and then loop through them, and based on their value use the .closest('tr') function to hide/show the whole table row that contains them.

edited Sep 20, 2011 at 18:14

answered Sep 20, 2011 at 17:56

patmortech

10.2k6 gold badges41 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Itzoe Over a year ago

Your edit made me realize I was barking up the wrong tree. I wanted to minimize database calls yet I was trying to do this via code-behind, when client-side was indeed what I wanted, and .closest is what I was looking for.

Collectives™ on Stack Overflow

ASP.NET: Hide CheckBox items in CheckBoxList control

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related