logo

ASP.NET - How to capture checkbox click events in a treeview control using javascript

Overview: This code snippet searches for a treenode with a key value of "Key1" and if the node is not checked than unchecks all the children nodes. Likewise, a child tree node, if checked with a parent tree node with a value of "Key" is checked than the parent tree node is checked.

Javascript

        Dim oScriptManager As ClientScriptManager = Page.ClientScript
        Dim sName As String = "checkBoxPostBack"
        Dim oType As Type = Me.GetType()
        
        If (Not cs.IsStartupScriptRegistered(cstype, csname1)) Then

            Dim sJavascript As String = "function CheckBoxChanged() {var o = window.event.srcElement; if (o.tagName == 'INPUT' && o.type == 'checkbox') { __doPostBack('', '');}}"
            oScriptManager.RegisterStartupScript(oType, sName, sJavascript, True)

        End If
        
        tvSecurity.Attributes.Add("onclick", "CheckBoxChanged()")

Checkbox change event

    Sub tvSecurity_CheckChanged(ByVal sender As Object, ByVal e As TreeNodeEventArgs)
        Dim oNode As TreeNode = e.Node
        Static iErrorCount As Integer = 0
        Try

            If tvSecurity.CheckedNodes.Count > 0 Then
                If oNode.Value = "Key1" And oNode.Checked = False Then
                    For Each oChildNode In oNode.ChildNodes
                        oChildNode.Checked = False
                    Next
                    Exit Sub
                End If

                If oNode.Parent.Value = "Key1" And oNode.Checked = True Then
                    oNode.Parent.Checked = True
                End If
                oNode.Selected = False
            End If
            
        Catch exp As Exception
            iErrorCount = iErrorCount + 1
        End Try
        
    End Sub

Asp.net treeview control


    <asp:TreeView ID="tvSecurity" 
                          runat="server" 
                            OnTreeNodeCheckChanged="tvSecurity_CheckChanged" 
                            ShowCheckBoxes="Parent,Leaf"
                            Selection="None"
                            ExpandedDepth="1"
                            >
   </asp:TreeView>
s