sim.plified.com

The CheckBoxList control in ASP.NET is great because the control handles all the data for you.  However, if you want to enhance the UI a little bit the control is left wanting for sure.  This led me to do some searching for CheckBoxList alternatives.  I came up with two blogs posts (one here, the other here) that recommended creating a Custom Server Control that encapsulated the CheckBoxList inside of an unordered list. I went this route and the results were fantastic:

I used the Server Control to change the CSS Class of the enclosing list item when the item is selected.  That allowed me to apply some nice CSS styling to to any item that was selected.  (As a side note the entire block is enclosed in an UpdatePanel, so clicking the options changes the data below dynamically).

I have enclosed my code for my custom server control below.  I borrowed from the the two blog posts above, but added some additional data to account for "AutoPostBack" and the applying CSS Styling to the selected item.  I'm am also making the compiled DLL available for download here.

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

Namespace edu.roberts.its.CustomWebControls

    <DefaultProperty("Text"), ToolboxData("<{0}:ULCheckBoxList runat=server></{0}:ULCheckBoxList>")> _
    Public Class ULCheckBoxList
        Inherits CheckBoxList

        Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)

            Controls.Clear()

            Dim inputFormatString As String = "<input id={0}{1}{0} name={0}{2}{0} type={0}checkbox{0} value={0}{3}{0} {4} {5} />"
            Dim labelFormatString As String = "<label for={0}{1}{0}>{2}</label>"

            If (Not MyBase.CssClass Is Nothing AndAlso MyBase.CssClass <> "") Then
                writer.WriteLine("<ul class=""" & MyBase.CssClass & """>")
            Else
                writer.WriteLine("<ul>")
            End If

            For index As Integer = 0 To Items.Count - 1

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

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

                'Add selected class to the list item if the checkbox is checked.
                writer.Indent += 1
                writer.WriteLine("<li class=""" & IIf(Items(index).Selected, "selected", "") & """>")
                writer.Indent += 1

                Dim postbackScript As String = ""
                If MyBase.AutoPostBack = True Then
                    postbackScript = String.Format("onclick=""javascript:setTimeout('__doPostBack(\'{0}\',\'\')', 0)""", MyBase.UniqueID & "$" & index.ToString())
                End If

                inputBuilder.AppendFormat(inputFormatString, """", MyBase.ClientID & "_" & index.ToString(), MyBase.UniqueID & "$" & index.ToString(), Items(index).Value, checked, postbackScript)
                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