Case Study: Extended ListBox for Asp.Net

The ListBox control in the Asp.net is somewhat only a simple wrapper for the HTML Select tag. Anyway, it does not  support itemstyle, alternating item style, and selected item style. This article will provide you a case study that how to extend the existing ListBox control, and make it fully suppot the item style.

From the Refector, we can find the the existing ListBox overided the RenderContents function, and provided the implementation itself. But it ignored the style attribute of each OPTION tag, In order to make our substitute ListBoxEx can be able to render style for each item, we have to make some modify about it.

Firstly, we will inherit from System.Web.UI.WebControls.ListBox. And then, three public properties, namely ItemStyle, AlternatingItemStyle, and SelectedItemStyle, are added to the class. The ItemStyle property specifes the style of normal items in the list box. The AlternatingItemStyle specifies the style of alteranting items in the list box. And the SelectedItemStyle stands for the style setting of the selected item style. The final step is to provide different implementation of the virtual function RenderContents, which will render the exact style attribute to the items in the list box.

How to use it? Set the ItemStyle in Page_Load as following.

 

 

private void Page_Load(object sender, System.EventArgs e)
{           
               this.ListBoxEx1.AlternatingItemStyle.BackColor = Color.Red;
            this.ListBoxEx1.ItemStyle.BackColor = Color.Blue;
}

Anyway, code never lies. So try to find how it work out in the source code:

'***************************************************************
' ListBoxEx Control
  ' Features: Supporting ItemStyle, AlternatingItemStyle, and SelectedItemStyle 
  ' Copyright (c) 2005 iret <kylehuangyu@hotmail.com>
  ' Guangzhou, R.P.China
  ' This source was released under BSD License.
  '  Please refer license declaration from source code.
'***************************************************************
Imports System
Imports System.IO
Imports System.Drawing
Imports System.Web
Imports System.Text
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.ComponentModel
Imports System.Collections

Namespace AsposeNamespace Aspose
    '<ToolboxData("<{0}:ListBoxEx runat=""server""></{0}:ListBoxEx>")> _
    Public Class ListBoxExClass ListBoxEx
        Inherits System.Web.UI.WebControls.ListBox

        Private m_alternatingItemStyle As New TableItemStyle
        Private m_itemStyle As New TableItemStyle
        Private m_selectedItemStyle As New TableItemStyle

        Public Function ListBoxEx()Function ListBoxEx()
        End Function
        
                'alternating item style of the listbox
        Public Property AlternatingItemStyle()Property AlternatingItemStyle() As TableItemStyle
            Get
                Return Me.m_alternatingItemStyle
            End Get
            Set(ByVal Value As TableItemStyle)
                Me.AlternatingItemStyle = Value
            End Set
        End Property
                'normal item style of the listbox
        Public Property ItemStyle()Property ItemStyle() As TableItemStyle
            Get
                Return Me.m_itemStyle
            End Get
            Set(ByVal Value As TableItemStyle)
                Me.m_itemStyle = Value
            End Set
        End Property
                
                'selected item style of the listbox
        Public Property SelectedItemStyle()Property SelectedItemStyle() As TableItemStyle
            Get
                Return Me.m_selectedItemStyle
            End Get
            Set(ByVal Value As TableItemStyle)
                Me.m_selectedItemStyle = Value
            End Set
        End Property
                
        Protected Overrides Sub RenderContents()Sub RenderContents(ByVal writer As HtmlTextWriter)
            Dim Multiselected As Boolean = False
            Dim IsSingleMode As Boolean = (Me.SelectionMode = ListSelectionMode.Single)
            Dim item As ListItem

            If (Me.Items.Count > 0) Then
                Dim odd As Integer = 0 ' the sign of alternating items
                For Each item In Me.Items
                    If item.Selected = True Then ' we got the selected items
                        If IsSingleMode Then
                            If Multiselected Then ' if not alowing multiple selecting, throw exception 
                                Throw New HttpException("Cant_Multiselect_In_Single_Mode")
                            End If
                            Multiselected = True
                        End If
                        'before rendering tag, adding the selected item style attributes to the writer
                        Me.m_selectedItemStyle.AddAttributesToRender(writer)
                        writer.AddAttribute("selected", "selected")
                        writer.AddAttribute("value", item.Value, True)
                        writer.RenderBeginTag(HtmlTextWriterTag.Option)
                        HttpUtility.HtmlEncode(item.Text, writer)
                        writer.RenderEndTag()
                        writer.WriteLine()
                        odd = odd + 1
                    Else
                        writer.AddAttribute("value", item.Value, True)
                        If odd Mod 2 = 1 Then
                                ' adding the alternating item style attributes to the writer
                            Me.m_alternatingItemStyle.AddAttributesToRender(writer)
                        Else
                                ' adding the normal item style attributes to the writer
                            Me.m_itemStyle.AddAttributesToRender(writer)
                        End If
                        writer.RenderBeginTag(HtmlTextWriterTag.Option)

                        HttpUtility.HtmlEncode(item.Text, writer)
                        writer.RenderEndTag()
                        writer.WriteLine()
                        odd = odd + 1
                    End If
                Next
            End If

        End Sub

    End Class
End Namespace