RadGrid and RadTreeView combined

[Jon]

Hi,

I'm looking to do a user configuration page that is somewhat complex and would like some advice on if it is possible with the Rad controls as they are now.

I want to have a treeview showing a location heirarchy on the left that the user can drill down into.  On each drilled down row I'd like to see several columns representing options for each - something like the following. Note that each circle is a checkbox NOT a radio button - I couldn't find a square on the keyboard ;)

---------------------------Option 1 ----------- Option 2 --------------- Option 3 -----
O America                      O                           O                                O
    O New York                O                           O                                O
    O Boston                    O                           O                                O
    O Miami                      O                           O                                O
O England                      O                           O                                O
    O London                   O                           O                                O
    O Bristol                      O                           O                                O
    O Newcastle                O                           O                                O

What I'd like to do is then allow for the user to click the parent level and have it's setting cascade to the children ie someone clicks America Option 1, all of the cities in America would then be ticked for Option 1.  Then for Option 2, just Boston gets a tick.

Please tell me this is possible (and hopefully easy to do).  It will make my life a lot easier if it is possible!

If not possible then I'll probably get around it by having an option drop down above a tree view and you choose the option to work on one at a time.

Regards,

Jon

[Sebastian]

Hello Jon,

This type of treelist presentation can be achieved either with RadTreeView using templates or utilizing the self-referencing hierarchy feature of RadGrid. I hope that one of these options is feasible for your scenario.

Best regards,
Sebastian
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 Sebastian,

Sounds good - just wish there was an exact match for me to copy ;)  Very lazy of me I know.

With the grid, is there a way to turn on in row edit for all rows by default?  Then I can have the page load straight to the edit functionality.  If I have to turn on edit for each row from the browser then I think I'll go for the tree view option.

Regards,

Jon

[Sebastian]

Hello Jon,

You can use EditMode = InPlace for the self-referencing grid and switch all items in edit mode initially with the approach presented here. The other option is to use RadTreeView with templates if you prefer it.

Best regards,
Sebastian
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 Sebastian,

I managed to get the treeview code working to great effect however when I tried to have more that one checkbox per node they seemed to act more like radio buttons than checkboxes, ie you click the second one and the check disappears from the first.  This was true even when using the template approach.

Do you have a basic sample where you have more than one checkbox per tree node?

Many thanks,

Jon

[Atanas Korchev]

Hi Jon,

Could you please provide more details about your implementation? Why do you need two checkboxes per node? Ideally you could send some sample code by pasting it here.

Sincerely yours,
Albert
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 Albert,

The top post in this thread explains the reason that I need multiple checkboxes per node.  Essentially it's intended to make configuration of various options and security permissions a basic task. 

I've done the attached sample (VB top and ASPX bottom). 

In the example I turned off the default checkbox to the left of the template and that is what the problem is.  When turned on, each click on a templated checkbox toggles the main checkbox.

I can live without the main checkbox if I can replicate the cascading check functionality for normal checkboxes (as demoed here), 

Essentially from the sample below I will need to ensure that if you click the checkbox1 in the Sample 1 node, the check cascades to Sample 1 Child 1 and Sample 1 Child 2.

Finally if I were then to manually uncheck the Sample 1 Child 2 checkbox1 box it would then make the Sample 1 node show a tri state checkbox (indicating some children but not all are checked).

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

<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="uxRadScriptManager" runat="server"></telerik:RadScriptManager>
        <telerik:RadTreeView ID="uxRadTreeView" runat="server"
                TriStateCheckBoxes="True" CheckChildNodes="True">
         </telerik:RadTreeView>
        <telerik:RadFormDecorator ID="uxRadFormDecorator" Runat="server" DecoratedControls="All" />
    </form>
</body>

[Veselin Vasilev]

Hi Jon,

I suggest that you temporary remove the RadFormDecorator and enable the checkbox support (CheckBoxes="True"). Let me know if it works as you expect.

Best wishes,
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.