Node Templates with Tristate Checkboxes

5 posts, 0 answers
  1. Jon
    Jon avatar
    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 
  2. Jon
    Jon avatar
    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"TrueFalse, 1)  
            ' child node  
            Dim level2ChildRadTreeNode As RadTreeNode = New RadTreeNode()  
            level2ChildRadTreeNode.NodeTemplate = New NodeTemplate("1.1"TrueFalse, 2)  
            level1RadTreeNode.Nodes.Add(level2ChildRadTreeNode)  
            ' child node  
            level2ChildRadTreeNode = New RadTreeNode()  
            level2ChildRadTreeNode.NodeTemplate = New NodeTemplate("1.2"TrueFalse, 2)  
     
            ' child node  
            Dim level3SubChildRadTreeNode As RadTreeNode = New RadTreeNode()  
            level3SubChildRadTreeNode.NodeTemplate = New NodeTemplate("1.2.1"TrueFalse, 3)  
            level2ChildRadTreeNode.Nodes.Add(level3SubChildRadTreeNode)  
            ' child node  
            level3SubChildRadTreeNode = New RadTreeNode()  
            level3SubChildRadTreeNode.NodeTemplate = New NodeTemplate("1.2.2"TrueFalse, 3)  
            level2ChildRadTreeNode.Nodes.Add(level3SubChildRadTreeNode)  
            level1RadTreeNode.Nodes.Add(level2ChildRadTreeNode)  
            uxRadTreeView.Nodes.Add(level1RadTreeNode)  
            ' parent node  
            level1RadTreeNode = New RadTreeNode()  
            level1RadTreeNode.NodeTemplate = New NodeTemplate("2"FalseTrue, 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 StringByVal allow As BooleanByVal deny As BooleanByVal 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 

  3. Jon
    Jon avatar
    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 
  4. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    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.
  5. Jon
    Jon avatar
    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
Back to Top