Node Templates with Tristate Checkboxes

[Jon]

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]

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]

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]

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]

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