Click here to Skip to main content
Click here to Skip to main content

How to Hide a RadioButtonList or CheckBoxList ListItem in ASP.NET

, 2 May 2006
Rate this:
Please Sign up or sign in to vote.
This article demonstrates how to hide RadioButtonList or CheckBoxList ListItems in ASP.NET without creating your own custom web control

Sample Image - ListItemHiding1.gif

Introduction

With the advent of ASP.NET about five years ago Microsoft created several built-in Web Forms controls and among them are the RadioButtonList and CheckboxList. These two controls have a pretty robust and intuitive class structure but are lacking in a quite pratical aspect: the ability to hide their individual ListItems!

Background

I must admit that hiding individual ListItems in a RadioButtonList or CheckBoxList is not something that developers have to do on a regular basis. However, when are you required to hide them for pratical reasons it can become quite frustrating. In one such case I needed to have a default value for a RadioButtonList that I didn't want the user to see but that I could  reference programmatically using the SelectedItem property. After trying several other approaches and searching the web for other solutions it became abundantly clear to me that I would have to create my own solution. The result I believe is a nice workaround that is flexible enough for developers to use in their existing applications without having to make a reference to an external .dll file or web control library.

My Initial approach to Hiding ListItems... which didn't work

My initial approach to tackling this problem was to reference a ListItem object in the RadioButtonList or CheckBoxList control's Items collection and add a style attribute that would set its display style to "none".  Now a reasonable person would think that this would work because it doesn't cause a compile or runtime error. However, when the control is rendered as HTML to the browser the attributes specified in the source code are not rendered!!!

Here was my initial idea of hiding a ListItem which did not work:

    Public Shared Sub HideListItem(ByRef RbList As RadioButtonList)
        'This code doesn't work although logically you might think that it would!
        RbList.Items(0).Attributes.Add("style", "display='none;'")
    End Sub
    
    Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.PreRender
        HideListItem(Me.rbGender)
    End Sub    
    

When the page loads and you view the HTML source of the page this is what it looks like:

<table id="rbGender" border="0" style="width:136px;">
    <tr>
        <td><input id="rbGender_0" type="radio" name="rbGender" value="-1" /><label for="rbGender_0">-1</label></td>
        <td><input id="rbGender_1" type="radio" name="rbGender" value="0" /><label for="rbGender_1">Female</label></td>
        <td><input id="rbGender_2" type="radio" name="rbGender" value="1" /><label for="rbGender_2">Male</label></td>
    </tr>
</table>

You will notice that the attribute "style=display='none;'" is no where to be found!

An appproach that works! Hiding the ListItem by using dynamically generated DHTML

Becuase my style attribute was not being rendered as I specified in my code. I decided to take another approach. By tapping into my knowledge of DHTML I decided to dynamically generate some DHTML that would hide the ListItems for me.

Check out the code below for additional details: 

  
  Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.PreRender
        'Get the JavaScript code that will hide the ListItem
        Dim jsCode As String = HideRadioButtonListItem(Me.rbGender)
        'use RegisterStartupScript to make sure 
        'that this javascript is placed after the RadioButtonList HTML has rendered
        Me.RegisterStartupScript("HideListItems", jsCode)
  End Sub
 
  'Use this method if you want to hide the first item in the list
  Public Function HideRadioButtonListItem(ByRef RbList As RadioButtonList) As String

        Dim IndexesHide() As String = {"0"}
        Return HideRadioButtonListItems(RbList, IndexesHide)

    End Function

  'Use this method if you want to hide multiple Items of various indexes
  'For example: HideRadioButtonListItems(Me.rbGender, "0,2".Split(","c))
  'Would hide the first and third items in the RadioButtonList
    Public Function HideRadioButtonListItems(ByRef RbList As RadioButtonList, ByVal IndexesToHide() As String) As String
        Dim HideColumnOrRowBasedOnRepeatDirection As String = ""

        'Determine whether an HTML row or column is to be hidden
        'based on the Repeat direction
        If RbList.RepeatDirection = RepeatDirection.Horizontal Then
            HideColumnOrRowBasedOnRepeatDirection = "td"
        ElseIf RbList.RepeatDirection = RepeatDirection.Vertical Then
            HideColumnOrRowBasedOnRepeatDirection = "tr"
        End If

        'Get the ClientID that will be used when the control is rendered to the client in HTML
        Dim CtrlClientID As String = RbList.ClientID

        'The .NET Framework recommends that you use a StringBuilder class instead of a String DataType
        'when dealing with potentially large strings
        Dim JScriptCodeString As New System.Text.StringBuilder

        'Build the javascript that will do the hiding of the items
        JScriptCodeString.Append(" <script language=" + Chr(34) + "javascript" + Chr(34) + "> " & vbCrLf)
        JScriptCodeString.Append("        var rbTable;" & vbCrLf)
        JScriptCodeString.Append(" rbTable = document.getElementById(""" & CtrlClientID & """);" & vbCrLf)
        JScriptCodeString.Append(" if ((rbTable == null) || (rbTable == undefined)) { } else { " & vbCrLf)
        JScriptCodeString.Append(" var NestedLabels;" & vbCrLf)
        JScriptCodeString.Append(" NestedLabels = rbTable.getElementsByTagName(""")
        JScriptCodeString.Append(HideColumnOrRowBasedOnRepeatDirection & """);" & vbCrLf)

        For i As Integer = 0 To IndexesToHide.Length - 1
            JScriptCodeString.Append("     NestedLabels[" & IndexesToHide(i) & "].style.display = ""none"";" & vbCrLf)
        Next

        JScriptCodeString.Append(" } " & vbCrLf)
        JScriptCodeString.Append(" </script> " & vbCrLf)

        Return JScriptCodeString.ToString()
    End Function

Here is the ASP.NET HTML source:

  <body >

    <form id="Form1" method="post" runat="server">
<P>Choose Gender (optional) : </P>
<P><asp:RadioButtonList id=rbGender runat="server" Width="200px" RepeatDirection="Horizontal">
<asp:ListItem Value="-1">-1</asp:ListItem>
<asp:ListItem Value="0">Female</asp:ListItem>
<asp:ListItem Value="1">Male</asp:ListItem>
</asp:RadioButtonList></P>
    </form>
  </body>

Here is the HTML source that is rendered to the browser when the page is run:

  <body >

    <form name="Form1" method="post" action="WebForm1.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDwtMTQ2MTEwNDc7Oz5KPbuB9pD1EtgvbuBPmJmyEQ9ORQ==" ID="Hidden1"/>

<P>Choose Gender (optional) : </P>
<P><table id="rbGender" border="0" style="width:200px;">
    <tr>
        <td><input id="rbGender_0" type="radio" name="rbGender" value="-1" /><label for="rbGender_0">-1</label></td>
        <td><input id="rbGender_1" type="radio" name="rbGender" value="0" /><label for="rbGender_1">Female</label></td>
        <td><input id="rbGender_2" type="radio" name="rbGender" value="1" /><label for="rbGender_2">Male</label></td>
    </tr>
</table></P>
     <script language="javascript"> 
        var rbTable;
 rbTable = document.getElementById("rbGender");
 if ((rbTable == null) || (rbTable == undefined)) { } else { 
 var NestedLabels;
 NestedLabels = rbTable.getElementsByTagName("td");
     NestedLabels[0].style.display = "none";
 } 
 </script> 


</form>
  </body>

Basically, the code takes in a reference to a RadioButtonList and uses its ClientID (the server control identifier generated by ASP.NET before the control is rendered to the client's browser) property to access it by using the document.getElementById Javascript function. Then I determine if the repeat direction is Horizontal or Vertical and get all columns or rows for the HTML element. Since the ListItem's indexes match exactly to the collection of columns or rows in a rendered RadioButtonList HTML table I am able to hide the rows or columns based on the specified index the developer decides to pass in.

Hey what about the CheckBoxList?

I didn't forget about our good ol' friend the CheckboxList. In order to keep this article concise I neglected to add the code for the CheckboxList. As you might already know, these two controls are similar in that they both have an Items collection and a RepeatDirection property. I was hoping they both inherited from a BaseClass that would have these two key properties. Unfortunately, the ListControl class from which they inherit, has a Items collection property but doesn't have a .RepeatDirection property. So I just decided to create seperate overloaded methods for each of them.

When you download the source and project files you will see methods devoted to both the CheckboxList and RadioButtonList in addition to other cool ways of implementing this functionality into your applications. Since I am well versed in both C# and VB I have provided the source files in both C# and VB.NET. So you can just copy and paste as needed.

Conclusion

I hope this approach can benefit you if you need to hide or show ListItems in a CheckboxList or RadioButtonList. Please feel free to build upon this concept and extend it to create other functionality for your individual ListItems. Some cool incarnations of this concept could be disabling individual ListItems or adding custom client-side onclick events.

Live long and code proper! 

History

No revisions thus far... 

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Habeeb Rushdan
Instructor / Trainer LowerHead Consulting, LLC
United States United States
Habeeb Rushdan is a Senior Software Engineer and Technical Trainer with over 10 years of professional software development experience. He holds a B.S in Computer Studies from the University of Maryland and is certified as a: Microsoft Certified Trainer (MCT), Microsoft Certified Application Developer (MCAD.NET), Microsoft Certified Professional Developer: Web Developer (MCPD: Web Developer), Microsoft Certified Technology Specialist: .NET Framework 2.0 Web Applications (MCTS: .NET Framework 2.0 Web Applications), Microsoft Certified Technology Specialist .NET Framework 3.5, ASP.NET Applications, Macromedia Certified Flash MX Developer, Adobe Certified Expert - Flash CS3 (ACE), and an Adobe Certified Instructor (ACI).
 
Habeeb has worked for several software product and technology consulting firms, and he now offers his expert software development and coaching talents to various organizations across the US through LowerHead Consulting, LLC, where he is a Managing Partner and co-founder. Teaching and leading software engineering teams are passions of Habeeb. From small startups with less than 10 employees, to multi-national organizations with over 10,000 employees, Habeeb and his clients and peers find joy in his work. Over the last three years, Habeeb earned the privilege to offer technical instruction on several classes for prestigious organizations like the Computer Career Institute at Johns Hopkins University, SetFocus, and Enterprise Rent-A-Car.

Comments and Discussions

 
QuestionWhy does the Attributes.Add() not work? PinmemberDhar4CodeProject27-May-10 10:59 
GeneralMy vote of 1 PinmemberRollercoaster269-Jul-09 23:53 
GeneralBug Pinmemberdoopsterus14-Jun-09 18:27 
GeneralHide RadioButtonList or CheckBoxList ListItem PinmemberSaki Sachin6-Aug-07 3:29 
QuestionHow to do same thing for checkboxlist PinmemberPushkar Joshi4-Apr-07 3:05 
AnswerRe: How to do same thing for checkboxlist PinmemberHabeeb Rushdan10-Apr-07 5:21 
GeneralAnd the last one... PinmemberCAmelinckx6-Dec-06 11:42 
GeneralAnother one... PinmemberCAmelinckx6-Dec-06 11:28 
GeneralSuggestion PinmemberCAmelinckx6-Dec-06 11:20 
GeneralBig Security hack, not the way to get things done Pinmemberjustin angel3-May-06 11:25 
GeneralRe: Big Security hack, not the way to get things done PinmemberHabeeb Rushdan4-May-06 5:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411023.1 | Last Updated 2 May 2006
Article Copyright 2006 by Habeeb Rushdan
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid