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: Menomena – Muscle n’ Flo
One response to “Render RadioButtonList as an Unordered List UL”
[…] is very inspired by Scott Elikin’s post Render RadioButtonList as an Unordered List UL. I have mostly translated his code to […]