Currently, I am working with a CheckBoxList control that is bound to data and can potentially become very large. In order to manage this, I am implementing a filter mechanism. Here is my approach:
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";
}
Although this method works for hiding the items I don't want to see, there is still whitespace left behind due to the way ASP.NET renders the CheckBoxList using tables. Each CheckBox resides in its own <TR> element, resulting in unnecessary whitespace.
I am aware that accessing the <TR> element would require subclassing the control, which is not feasible given time constraints. Therefore, I am exploring the possibility of using a CSS trick to target an element's parent's parent (e.g., <input type="checkbox"/> -> <td> -> <tr>). While I have used the :first-child pseudo-element before, my online searches for this specific technique have been unfruitful. Nevertheless, I believe it doesn't hurt to inquire about it.