Render RadioButtonList as an Unordered List UL


In my latest project, I found the need to use the RadioButtonList which spits out the absolute nastiest HTML to render it unusable (for me anyway). The control gives you to HTML options using the RepeatLayout attribute.

Flow spits out a series of span’s and label’s with BR’s if you don’t specify RepeatDirection of Horizontal. And choosing Table gives you a nicely unaccessible table you can’t format easily. Because of these limitation’s, I have always stayed away from CheckBoxList and RadioButtonList controls.

My solution is to write my own RadioButtonList, but to spit it out as an Unordered List which I can style very easily horizontally or vertically, little or lots of padding, all with CSS.

I unfortunately have been forced to regress back to ASP.NET 1.1 and VB.NET for a little while until the company upgrades to 2.0. Hence why I wrote the following instead of writing a CSS Control Adapter.

Imports System
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Namespace MyControls

 <DefaultProperty("Text"), _
ToolboxData("<{0}:ULRadioButtonList runat=server />") _
, Description("Creates a RadioButtonList using an Unordered List.")> _
Public Class ULRadioButtonList
Inherits RadioButtonList

 Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)

//"SBE 01/28/2007:  just in case...not sure if this is needed or not
Controls.Clear()

//"SBE 01/28/2007:  not sure why I am leaving quotes as a param...I was just undecided if I would ever need to use " instead of "
Dim inputFormatString As String = "<input id={0}{1}{0} name={0}{2}{0} type={0}radio{0} value={0}{3}{0} {4} />"
Dim labelFormatString As String = "<label for={0}{1}{0}>{2}</label>"

//"SBE 01/28/2007:  if user sets the cssclass, add it to the <ul> tag
If (Not MyBase.CssClass Is Nothing AndAlso MyBase.CssClass <> "") Then
     writer.WriteLine("<ul class="" & MyBase.CssClass & "">")
Else
     writer.WriteLine("<ul>")
End If

//"SBE 01/28/2007:  loop through the dataitems
For index As Integer = 0 To Items.Count - 1
     writer.Indent += 1
     writer.WriteLine("<li>")
     writer.Indent += 1

     Dim inputBuilder As New StringBuilder
     Dim labelBuilder As New StringBuilder
     Dim checked As String = ""

     If (Items(index).Selected) Then
          checked = "checked"
     End If

     inputBuilder.AppendFormat(inputFormatString, """", MyBase.ClientID & "_" & index.ToString(), MyBase.UniqueID, Items(index).Value, checked)
     labelBuilder.AppendFormat(labelFormatString, """", MyBase.ClientID & "_" & index.ToString(), Items(index).Text)

     writer.WriteLine(inputBuilder.ToString())
     writer.WriteLine(labelBuilder.ToString())

     writer.Indent -= 1

     writer.WriteLine("</li>")
     writer.WriteLine()
     writer.Indent -= 1

 Next

 writer.WriteLine("</ul>")

 End Sub

 End Class

End Namespace

Before I started writing this, I found a beautiful website SimplyGold who had already wrote something similar for the CheckBoxList. Thanks for saving me some time!

Now playing: MenomenaMuscle n’ Flo

, ,

One response to “Render RadioButtonList as an Unordered List UL”

Leave a Reply

Your email address will not be published. Required fields are marked *