Click here to Skip to main content
15,868,141 members
Articles / Web Development / HTML
Article

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

Rate me:
Please Sign up or sign in to vote.
1.00/5 (4 votes)
2 May 20063 min read 92.5K   494   24   11
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:

VB
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:

HTML
<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: 

VB
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:

HTML
  <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:

HTML
  <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


Written By
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? Pin
Dhar4CodeProject27-May-10 9:59
Dhar4CodeProject27-May-10 9:59 
GeneralMy vote of 1 Pin
Rollercoaster269-Jul-09 22:53
Rollercoaster269-Jul-09 22:53 
GeneralBug Pin
doopsterus14-Jun-09 17:27
doopsterus14-Jun-09 17:27 
GeneralHide RadioButtonList or CheckBoxList ListItem Pin
Saki Sachin6-Aug-07 2:29
Saki Sachin6-Aug-07 2:29 
QuestionHow to do same thing for checkboxlist Pin
Pushkar Joshi4-Apr-07 2:05
Pushkar Joshi4-Apr-07 2:05 
AnswerRe: How to do same thing for checkboxlist Pin
Habeeb Rushdan10-Apr-07 4:21
Habeeb Rushdan10-Apr-07 4:21 
GeneralAnd the last one... Pin
CAmelinckx6-Dec-06 10:42
CAmelinckx6-Dec-06 10:42 
GeneralAnother one... Pin
CAmelinckx6-Dec-06 10:28
CAmelinckx6-Dec-06 10:28 
GeneralSuggestion Pin
CAmelinckx6-Dec-06 10:20
CAmelinckx6-Dec-06 10:20 
GeneralBig Security hack, not the way to get things done Pin
justin angel3-May-06 10:25
justin angel3-May-06 10:25 
GeneralRe: Big Security hack, not the way to get things done Pin
Habeeb Rushdan4-May-06 4:26
Habeeb Rushdan4-May-06 4:26 

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

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