RadTreeView in RadCombobox with Checkbox and TriState

4 posts, 0 answers
  1. Kaushal
    Kaushal avatar
    47 posts
    Member since:
    Sep 2010

    Posted 20 Jan 2012 Link to this post

    Hi All,

    Here I am sharing my one of script which may help to other.

    What script doing:

    1. RadTreeView is in RadComboBox with CheckBoxes="true" and TriStateCheckBoxes="true".
    2. Need to get all selected (Checked) nodes of radtreeview in comma separated string in radcombobox.
    3. If radtreeview is not expanded still it will get all that child nodes in comma separated string.

    HTML:

    <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="500px" ShowToggleImage="True"
            Style="vertical-align: middle;" OnClientDropDownOpened="OnClientDropDownOpenedHandler"
            AfterClientCheck="AfterCheckHandler" EmptyMessage="Choose a destination" ExpandAnimation-Type="None"
            CollapseAnimation-Type="None">
            <ItemTemplate>
                <div id="div1">
                    <telerik:RadTreeView runat="server" ID="RadTreeView1" OnClientNodeChecked="nodeChecked" OnClientNodeClicked="nodeClicked"
                        CheckBoxes="true" Width="100%" Height="140px" TriStateCheckBoxes="true">
                        <Nodes>
                            <telerik:RadTreeNode runat="server" Text="Africa" Expanded="true">
                                <Nodes>
                                    <telerik:RadTreeNode runat="server" Text="Egypt">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Cairo">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="South Africa">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Cape Town">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Kenya">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Nairobi" Value="1999">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Australia">
                                <Nodes>
                                    <telerik:RadTreeNode runat="server" Text="South East Australia">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Sydney">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Melbourne">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Asia" Expanded="true">
                                <Nodes>
                                    <telerik:RadTreeNode runat="server" Text="China">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Bejing">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="India">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="New Delhi">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Bombay">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Indonesia">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Jakarta">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Europa" Expanded="true">
                                <Nodes>
                                    <telerik:RadTreeNode runat="server" Text="England">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="London">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Liverpool">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Manchester">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="France">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Paris">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Cannes">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Nice">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Germany">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Bonn">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Berlin">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Frankfurt">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeView>
                </div>
            </ItemTemplate>
            <Items>
                <telerik:RadComboBoxItem Text="" />
            </Items>
        </telerik:RadComboBox>


    JavaScript:

    <script type="text/javascript">
            function StopPropagation(e) {
                if (!e) {
                    e = window.event;
                }
     
                e.cancelBubble = true;
            }
     
            function OnClientDropDownOpenedHandler(sender, eventArgs) {
                var tree = sender.get_items().getItem(0).findControl("RadTreeView1");
                var selectedNode = tree.get_selectedNode();
                if (selectedNode) {
                    selectedNode.scrollIntoView();
                }
            }
     
            function nodeClicked(sender, args) {
                var node = args.get_node();
                if (node.get_checked()) {
                    node.uncheck();
                } else {
                    node.check();
                }
                nodeChecked(sender, args)
     
            }
     
            function nodeChecked(sender, args) {
                var comboBox = $find("<%= RadComboBox1.ClientID %>");
     
                //check if 'Select All' node has been checked/unchecked
                var tempNode = args.get_node();
                if (tempNode.get_text().toString() == "(Select All)") {
                    // check or uncheck all the nodes
                } else {
                    var nodes = new Array();
                    nodes = sender.get_checkedNodes();
                    var vals = "";
                    var i = 0;
     
                    for (i = 0; i < nodes.length; i++) {
                        var n = nodes[i];
                        var nodeText = n.get_text().toString();
                        if (nodeText != "(Select All)") {
                            vals = vals + n.get_text().toString() + ",";
                        }
                    }
     
                    //prevent  combo from closing
                    supressDropDownClosing = true;
                    comboBox.set_text(vals);
                }
            }
        </script>

    This all code credit goes to:
    http://blog.ropardo.ro/2011/07/15/multiple-selection-treeview-in-combobox/

    Enjoy Telerik,

    Thanks,

    Kaushal Jani
  2. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 20 Jan 2012 Link to this post

    Hi Kaushal,
    Thanks for this code it works fine. Actually i was searching for this code to include in my project.
    Thanks a lot....!

    Thanks,
    Abhishek K
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Denis
    Denis avatar
    18 posts
    Member since:
    Feb 2012

    Posted 11 Dec 2012 Link to this post

    Thank you Kaushal for post this solution it works perfect
  5. msigman
    msigman avatar
    141 posts
    Member since:
    Apr 2008

    Posted 02 May 2013 Link to this post

    Great idea!  I've taken the code and consolidated it into a discrete ASP.NET Custom Control with a few other tweaks: http://www.msigman.com/telerik-radcombotree-a-combobox-with-collapsible-items/
Back to Top