New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

How to manage Search, Select All and Deselect All functionality for RadTreeView in RadComboBox

How to

Manage Search, Select All and Deselect All functionality for RadTreeView in RadComboBox. 

demo

Description

  • Search: user can type in any keyword so the the TreeView nodes inside the Combo Box which contain this keyword will be highlighted.

  • Select All: All checkboxes of TreeView nodes inside the Combo Box will be checked.

  • Deselect All:  All checkboxes of TreeView nodes inside the Combo Box will be unchecked.

Solution

RadTreeView with CheckBoxes is embedded in RadComboBox. This is achieved by using an ItemTemplate in the ComboBox:

<telerik:RadComboBox "true" CloseDropDownOnBlur="false"OnClientKeyPressing="OnClientKeyPressing" Height="100%" runat="server">

        <Items>
            <telerik:RadComboBoxItem runat="server" Value="RadComboBoxItem1" />
        </Items>
        <ItemTemplate>
            <div id="div1">
                <telerik:RadTreeView ID="RadTreeView1" CheckBoxes="True" runat="server" TriStateCheckBoxes="false"
                    Skin="Telerik">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Expanded="true" Text="products">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Expanded="true" Text="UI Components">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="asp.net ajax">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="asp.net mvc">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="silverlight">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="winforms">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="wpf">
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Expanded="true" Text="productivity">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="just code">
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="data" Expanded="true">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="orm">
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="reporting">
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Expanded="true" Text="consulting">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeView>
            </div>
        </ItemTemplate>
    </telerik:RadComboBox>
  1. "Search": To achieve the highlighting of a node by typed keyword, jQuery is used after subscribing to the OnClientKeyPressing event of the RadComboBox:

    function OnClientKeyPressing(sender, eventArgs) {
              setTimeout(function() {
                  var enteredText = sender.get_text();
                  $telerik.$('.RadComboBoxDropDown span').removeHighlight();
                  if (enteredText != '')
                      $telerik.$('.RadComboBoxDropDown span').highlight(enteredText);
              }, 1000);
          } 
    

    Two functions are used. hightlight(enteredText) will mark all of the nodes which contain the typed keyword:

    removeHighlight() function will return the text of the nodes to a normal state e.g. none is highlighed:

    $telerik.$.fn.removeHighlight = function() {
              return this.find("span.highlight").each(function() {
                  this.parentNode.firstChild.nodeName;
                  with (this.parentNode) {
                      replaceChild(this.firstChild, this);
                      normalize();
                  }
              }).end();
          };
    
  2. To achieve the "Select All" functionality an input field is added. Simple javascript function realized in the OnClick handler of the input field do the check of all nodes:

    function selectAllNodes() {
              var combobox = $find('<%=RadComboBox1.ClientID %>');
              var nestedTreeView = combobox.get_items().getItem(0).findControl("RadTreeView1");
              for (var i = 0; i < nestedTreeView.get_allNodes().length; i++) {
                  nestedTreeView.get_allNodes()[i].check();
              }
          }
    
  3. "Deselect All": Analogically to the "Select All" , another input field is added. The whole RadTreeView is looped and each checkbox is unchecked:

    function deselectAllNodes() {
             var combobox = $find('<%=RadComboBox1.ClientID %>');
             var nestedTreeView = combobox.get_items().getItem(0).findControl("RadTreeView1");
             for (var i = 0; i < nestedTreeView.get_allNodes().length; i++) {
                 nestedTreeView.get_allNodes()[i].uncheck();
             }
         }
    
In this article