[My Blog] | [Code Projects Home] | [skmMenu] | [RssFeed]

skmCheckBoxList Demo

The following demo illustrates how to use the skmCheckBoxList control apply client-side script to the various items in a CheckBoxList. Keep in mind that the attributes for the ListItems is not serialized to view state, so you will need to make sure that the attributes are set on EACH page load (initial visit & postbacks), otherwise you'll lose the attributes on postback...

For more information on skmCheckBoxList please see the 4Guys article: List Control Items and Attributes.

Try clicking on various items, then click "None"... also, with "None" clicked, click on some other item... neat, eh?

Pimp your computer with the following add-ons!

<%@ Register TagPrefix="cc1" Namespace="skmExtendedControls" Assembly="skmExtendedControls" %>
<form id="Form1" method="post" runat="server">
	<P>Pimp your computer with the following add-ons!</P>
	<p><cc1:skmCheckBoxList id="addOns" runat="server"></cc1:skmCheckBoxList></p>
	<P>
		<asp:Button id="Button1" runat="server" Text="Test Postback!"></asp:Button></P>
</form>

<script language="VB" runat="server">
    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
        If Not Page.IsPostBack Then
            PopulateAddOns()
        End If

        'Add none client-side script for CheckBoxList
        AddNoneScriptToCheckBoxList(addOns, 0)
    End Sub

    Private Sub PopulateAddOns()
        'Hard coded values here, but in real-world app would likely populate
        'from database table...

        addOns.Items.Add("DVD-R")
        addOns.Items.Add("512 MB RAM")
        addOns.Items.Add("Wireless, optical mouse")
        addOns.Items.Add("Subwoofer")
        addOns.Items.Add("Webcam")
        addOns.Items.Add("CD-R")
        addOns.Items.Add("Wireless keyboard")

        addOns.Items.Insert(0, New ListItem("None", "-1"))
    End Sub

    Private Sub AddNoneScriptToCheckBoxList(ByVal cbl As CheckBoxList, ByVal noneIndex As Integer)
        'Now, Add client-side actions
        Dim i As Integer
        For i = 0 To cbl.Items.Count - 1
            If i = noneIndex Then
                cbl.Items(i).Attributes("onclick") = String.Format("skm_Uncheck('{0}', {1}, {2}, true);", cbl.ClientID, noneIndex, cbl.Items.Count)
            Else
                cbl.Items(i).Attributes("onclick") = String.Format("skm_Uncheck('{0}', {1}, {2}, false);", cbl.ClientID, noneIndex, cbl.Items.Count)
            End If
        Next

        'Finally, add the skm_Uncheck client-side function
        Const SKM_UNCHECK_KEY As String = "skm_Uncheck"
        If Not Page.IsClientScriptBlockRegistered(SKM_UNCHECK_KEY) Then
            Page.RegisterClientScriptBlock(SKM_UNCHECK_KEY, "<script language=""JavaScript"">" & vbCrLf & _
                        "function skm_Uncheck(cbID, offset, total, uncheckAllButThisOne) {" & vbCrLf & _
                        "  if (uncheckAllButThisOne)" & vbCrLf & _
                        "    for (var i = 0; i < total; i++) { " & vbCrLf & _
                        "      var cb = document.getElementById(cbID + '_' + i);" & vbCrLf & _
                        "      if (cb && offset != i) cb.checked = false;" & vbCrLf & _
                        "    }" & vbCrLf & _
                        "  else {" & vbCrLf & _
                        "    var cb = document.getElementById(cbID + '_' + offset);" & vbCrLf & _
                        "    if (cb) cb.checked = false;" & vbCrLf & _
                        "  }" & vbCrLf & _
                        "} </" & "script>")
        End If
    End Sub
</script>