Node Templates with Tristate Checkboxes in UI for ASP.NET AJAX TreeView

Jon

813 posts

Member since:
Oct 2008

Posted 13 May 2009 Link to this post

Hi,

I have a treeview control with 4 levels of branch in it. Each node is rendered as a template and the template has 2 checkboxes.

I need the tristate cascading check mechanism to apply to these templated nodes. Below is some sample code for this based on a simple two branch level tree.

In a nutshell I would like it so that if the user clicks on the first checkbox for the first parent node then the first checkbox in the two child nodes will also be ticked. If one of them is then unticked, the parent first node should show the tristate status.

The purpose of this is to make various admin tasks quick and simple.

Any thoughts?

Regards,

Jon

    
              Private Sub GenerateTreeView()  
        
                    ' parent node  
        
                    Dim sampleRadTreeNode As RadTreeNode = New RadTreeNode()  
        
                    sampleRadTreeNode.NodeTemplate = New NodeTemplate("Sample 1")  
        
                    ' child node  
        
                    Dim sampleChildRadTreeNode As RadTreeNode = New RadTreeNode()  
        
                    sampleChildRadTreeNode.NodeTemplate = New NodeTemplate("Sample 1 Child 1")  
        
                    sampleRadTreeNode.Nodes.Add(sampleChildRadTreeNode)  
        
                    ' child node  
        
                    sampleChildRadTreeNode = New RadTreeNode()  
        
                    sampleChildRadTreeNode.NodeTemplate = New NodeTemplate("Sample 1 Child 2")  
        
                    sampleRadTreeNode.Nodes.Add(sampleChildRadTreeNode)  
        
                    uxRadTreeView.Nodes.Add(sampleRadTreeNode)  
        
                    ' parent node  
        
                    sampleRadTreeNode = New RadTreeNode()  
        
                    sampleRadTreeNode.NodeTemplate = New NodeTemplate("Sample 2")  
        
                    uxRadTreeView.Nodes.Add(sampleRadTreeNode)  
        
                    uxRadTreeView.DataBind()  
        
                End Sub 
        
                Class NodeTemplate  
        
                    Implements ITemplate  
        
                    Public text As String 
        
                    Public level As Integer 
        
                    Public Sub New(ByVal text As String)  
        
                        Me.text = text  
        
                    End Sub 
        
                    Public Sub InstantiateIn(ByVal container As Control) Implements System.Web.UI.ITemplate.InstantiateIn  
        
                        Dim table As Table = New Table()  
        
                        table.CssClass = "NodeTemplateCSS" 
        
                        table.CellPadding = 0  
        
                        table.CellSpacing = 0  
        
                        Dim tableRow As TableRow = New TableRow()  
        
                        Dim tableTextCell As TableCell = New TableCell()  
        
                        Dim nodeText As Label = New Label()  
        
                        nodeText.ID = "ItemLabel" 
        
                        nodeText.Text = text  
        
                        tableTextCell.Controls.Add(nodeText)  
        
                        Dim checkbox1Cell As TableCell = New TableCell()  
        
                        Dim checkbox1 As CheckBox = New CheckBox()  
        
                        checkbox1.ID = "checkbox1" 
        
                        checkbox1Cell.Controls.Add(checkbox1)  
        
                        Dim checkbox2Cell As TableCell = New TableCell()  
        
                        Dim checkbox2 As CheckBox = New CheckBox()  
        
                        checkbox2.ID = "checkbox2" 
        
                        checkbox2Cell.Controls.Add(checkbox2)  
        
                        tableRow.Cells.Add(tableTextCell)  
        
                        tableRow.Cells.Add(checkbox1Cell)  
        
                        tableRow.Cells.Add(checkbox2Cell)  
        
                        table.Rows.Add(tableRow)  
        
                        container.Controls.Add(table)  
        
                    End Sub 
        
                End Class

Jon

813 posts

Member since:
Oct 2008

Posted 13 May 2009 Link to this post

Reworked code to demo how I am trying to do the multi levels and make the template simpler...

    
                Private Sub GenerateTreeView()  
        
                    ' parent node  
        
                    Dim level1RadTreeNode As RadTreeNode = New RadTreeNode()  
        
                    level1RadTreeNode.NodeTemplate = New NodeTemplate("1", True, False, 1)  
        
                    ' child node  
        
                    Dim level2ChildRadTreeNode As RadTreeNode = New RadTreeNode()  
        
                    level2ChildRadTreeNode.NodeTemplate = New NodeTemplate("1.1", True, False, 2)  
        
                    level1RadTreeNode.Nodes.Add(level2ChildRadTreeNode)  
        
                    ' child node  
        
                    level2ChildRadTreeNode = New RadTreeNode()  
        
                    level2ChildRadTreeNode.NodeTemplate = New NodeTemplate("1.2", True, False, 2)  
        
                    ' child node  
        
                    Dim level3SubChildRadTreeNode As RadTreeNode = New RadTreeNode()  
        
                    level3SubChildRadTreeNode.NodeTemplate = New NodeTemplate("1.2.1", True, False, 3)  
        
                    level2ChildRadTreeNode.Nodes.Add(level3SubChildRadTreeNode)  
        
                    ' child node  
        
                    level3SubChildRadTreeNode = New RadTreeNode()  
        
                    level3SubChildRadTreeNode.NodeTemplate = New NodeTemplate("1.2.2", True, False, 3)  
        
                    level2ChildRadTreeNode.Nodes.Add(level3SubChildRadTreeNode)  
        
                    level1RadTreeNode.Nodes.Add(level2ChildRadTreeNode)  
        
                    uxRadTreeView.Nodes.Add(level1RadTreeNode)  
        
                    ' parent node  
        
                    level1RadTreeNode = New RadTreeNode()  
        
                    level1RadTreeNode.NodeTemplate = New NodeTemplate("2", False, True, 1)  
        
                    uxRadTreeView.Nodes.Add(level1RadTreeNode)  
        
                    uxRadTreeView.DataBind()  
        
                End Sub 
        
                Class NodeTemplate  
        
                    Implements ITemplate  
        
                    Public text As String 
        
                    Public allow As Boolean 
        
                    Public deny As Boolean 
        
                    Public level As Integer 
        
                    Public Sub New(ByVal text As String, ByVal allow As Boolean, ByVal deny As Boolean, ByVal level As Integer)  
        
                        Me.text = text  
        
                        Me.allow = allow  
        
                        Me.deny = deny  
        
                        Me.level = level  
        
                    End Sub 
        
                    Public Sub InstantiateIn(ByVal container As Control) Implements System.Web.UI.ITemplate.InstantiateIn  
        
                        Dim nodeText As Label = New Label()  
        
                        nodeText.ID = "ItemLabel" 
        
                        nodeText.Text = text  
        
                        nodeText.Width = 100 + ((5 - level) * 20)  
        
                        Dim checkbox1 As CheckBox = New CheckBox()  
        
                        checkbox1.ID = "uxAllow" 
        
                        If allow Then checkbox1.Checked = True 
        
                        Dim checkbox2 As CheckBox = New CheckBox()  
        
                        checkbox2.ID = "uxDeny" 
        
                        If deny Then checkbox2.Checked = True 
        
                        container.Controls.Add(nodeText)  
        
                        container.Controls.Add(checkbox1)  
        
                        container.Controls.Add(checkbox2)  
        
                    End Sub 
        
                End Class

Jon

813 posts

Member since:
Oct 2008

Posted 13 May 2009 Link to this post

In addition to the above problem I'm trying to get the return server side code to work on analysing what the user has secled. I've looked at the help topic on this and it says to use the FindControl method. I've tried that with the below sample and I manage to get a value from the node but as soon as it hits the FindControl line (5) I get an "Object reference not set to an instance of an object." error.

I'm sure that I've missed something basic but can't figure out what.

    
                    For Each radTreeNode As RadTreeNode In uxRadTreeView.Nodes  
        
                        Dim uxAllow As Boolean = False 
        
                        Dim uxDeny As Boolean = False 
        
                        Dim idValue As String = radTreeNode.Value.ToString()  
        
                        If DirectCast(radTreeNode.FindControl("uxAllow"), CheckBox).Checked Then uxAllow = True 
        
                        If DirectCast(radTreeNode.FindControl("uxDeny"), CheckBox).Checked Then uxDeny = True 
        
                    Next

Veselin Vasilev

Admin

2992 posts

Posted 16 May 2009 Link to this post

Hi Jon,

Why don't you use the integrated tri-state checkbox support for your left checkboxes and then add one checkbox in the node template?

All the best,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Jon

813 posts

Member since:
Oct 2008

Posted 16 May 2009 Link to this post

Hi Veselin,

That was one option I was considering but had hoped to be able to implement some form of iterative javascript to do the work.

At the moment I can live without the 2nd checkbox and am using the built in functions. I will need to implement the multi column checkboxes at a later date so will try the javascript route then..

Regards,

Jon