javascriptradcomboboxradtreeview

How can i get all checked items and values in RadTreeView on client side?


I have the RadTreeView in the RadCombobox. I need to create function using javascipt because i want to read all checked items and their values after closing of the RadComboBox.

How can i get all checked items and values using javascript?

This is my source code:

function OnClientDropDownClosed()
        {
            //Foreach all checked items and save to array 
            //I want to need for example: Text: John Black, Value: 1
        }

<telerik:RadComboBox ID="RadComboBox1" OnClientDropDownClosed="OnClientDropDownClosed" runat="server" Width="500px" ShowToggleImage="True"
                ExpandAnimation-Type="None"
                CollapseAnimation-Type="None">
                <ItemTemplate>
                    <div id="div1">
                        <telerik:RadTreeView runat="server" ID="RadTreeView1" CheckBoxes="true" Width="100%"
                            Height="140px" TriStateCheckBoxes="true">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Company" Value="9" Expanded="true">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="Employees A" Value="10" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" Value="1" Text="John Black">
                                                </telerik:RadTreeNode>

                                                <telerik:RadTreeNode runat="server" Value="2" Text="Peter Snopy">
                                                </telerik:RadTreeNode>

                                                <telerik:RadTreeNode runat="server" Value="3" Text="George New">
                                                </telerik:RadTreeNode>

                                                <telerik:RadTreeNode runat="server" Value="4" Text="William Wall">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>

                                        <telerik:RadTreeNode runat="server" Text="Employees B" Value="11" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" Value="5" Text="John Black">
                                                </telerik:RadTreeNode>

                                                <telerik:RadTreeNode runat="server" Value="6" Text="Peter Snopy">
                                                </telerik:RadTreeNode>

                                                <telerik:RadTreeNode runat="server" Value="7" Text="George New">
                                                </telerik:RadTreeNode>

                                                <telerik:RadTreeNode runat="server" Value="8" Text="William Wall">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeView>
                    </div>
                </ItemTemplate>
                <Items>
                    <telerik:RadComboBoxItem Text="" />
                </Items>
            </telerik:RadComboBox>

Solution

  • You can use TreeView.get_nodes() and TreeNode.get_nodes() but these only give you the immediate nodes, not their full descendants.

    So for RadTreeView with varying levels of nodes, we need to have a recursive function to drill down into the whole nodes hierarchy.

    This answer is adapted from wizpert's answer and this Telerik blog: http://www.telerik.com/blogs/how-to-get-the-checked-items-from-a-treeview-with-checkboxes

    function OnClientDropDownClosed(sender, eventArgs) 
    {
        // first let's get hold of the treeview (sender is the combobox)
        var tree = sender.get_items().getItem(0).findControl("RadTreeView1");
    
        // pass the treeview nodes to another function to find the checked nodes
        var items = getCheckedNodes(tree.get_nodes());
    
        var text = 'None selected'; // default text
    
        if (items.length > 0)
        {
            var texts = [];
            for (var i = 0; i < items.length; i++) 
            {
                // extract the text only of the checked nodes
                texts.push(items[i].get_text());
            }
            text = texts.join(', '); // comma separated text
        }
    
        sender.set_text(text); // set the combobox text
    }
    
    function getCheckedNodes(nodes) {
        var node, childCheckedNodes;
        var checkedNodes = []; // array of the checked nodes
    
        for (var i = 0; i < nodes.get_count(); i++) {
            node = nodes.getNode(i);
            if (node.get_checked()) {
                checkedNodes.push(node); // add to array if checked
            }
    
            // to understand recursion, first you must understand recursion
            if (node.get_nodes().get_count() > 0)
            {
                // recursive function call
                childCheckedNodes = getCheckedNodes(node.get_nodes());
    
                if (childCheckedNodes.length > 0)
                {
                    // append array with results from recursive call
                    checkedNodes = checkedNodes.concat(childCheckedNodes);
                }
            }
        }
    
        return checkedNodes;
    }