Implementing autocomplete for a TreeView inside a RadComboBox

4 posts, 1 answers
  1. Stefan
    Stefan avatar
    16 posts
    Member since:
    Jun 2010

    Posted 28 Jan 2011 Link to this post

    Hi all,

    I'm developing a custom control based off the TreeView in ComboBox sample.
    I now have a requirement to enable autocomplete searching inside the RadComboBox. I basically want to clone the existing Filter behaviour of the RadComboBox to search within the tree and display partial matches. It's clear that the existing Filter functionality doesn't work for a combobox containing a single TreeView item.

    The behaviour I'd like to see is that on keypress, a filtered version of the TreeView appears as the autocomplete suggestions. It would be nice if the tree structure were preserved to give the user an idea of what areas of the tree their suggestions came from, but it's not a current requirement.

    In my case, the contents of the TreeView are all loaded on the client side (I'm not using a web service to populate it as the largest possible tree will only contain a few hundred items, and usually far fewer), so I have everything I need on the client (and would prefer everything happen client side to keep it as zippy as possible).

    My question (to anyone) is.. What's the best way to tackle this problem?

    My markup currently looks like this:

            <telerik:RadComboBox ID="RadComboBox1" runat="server" EmptyMessage="Type to search"
                ShowToggleImage="true" Width="500" OnClientDropDownOpened="DropDownOpenedHandler"
                OnClientDropDownClosing="RadComboBoxClosing" AllowCustomText="true" ShowDropDownOnTextboxClick="false" 
                OnClientKeyPressing="ComboBoxKeyPressing" IsCaseSensitive="false" MinFilterLength="2" Filter="Contains">
                <ItemTemplate>
                    <div id="div1">
                        <telerik:RadTreeView ID="RadTreeView" runat="server" SingleExpandPath="true" ShowLineImages="false"
                            OnClientNodeClicking="nodeClicking" OnClientNodeClicked="NodeSelected" OnInit="TreeViewInit"
                            OnLoad="TreeViewLoad" OnClientNodeExpanded="nodeChanged" OnClientNodeCollapsed="nodeChanged">
                        </telerik:RadTreeView>
                    </div>
                </ItemTemplate>
                <Items>
                    <telerik:RadComboBoxItem Text="" />
                </Items>
            </telerik:RadComboBox>

    Thus far I'm able to display my treelist and make selections with the mouse. I suspect my implementation lies in writing Javascript for the ComboBox's OnClientKeyPressing event. I am not very Javascript-competent and am getting better with jQuery, so hope someone can give me a bit of advice on how best to proceed.

    I think this is what I'll have to do in the ComboBoxKeyPressing event:

    function ComboBoxKeyPression(sender, args){
        if (text in combobox < number of chars to trigger autocomplete)
          return;
       if (text in combobox = empty){
          MakeAllTreeNodesVisible();
          CloseComboBoxDropDown();
          return;
       }
       // else apply filter to tree
       var searchText = text entered by user;
       foreach(TreeNode in tree)
          if (node text contains my search keyword)
             show node;
          else
             hide node;

       // iterate through tree and trim 'empty' internal nodes (need to recurse to all child levels)
       foreach (TreeNode in tree)
          if (node contains children but none are visible)
             node.hide();
          else
             node.expand(); // so it's visible in the autocomplete list
    }

    This seems... Expensive and a bit hokey to performs on every keypress.

    Can anyone comment as to a better solution, an existing example, or any resources that might make this easier?

    I did look at the jQueryUI Autocomplete plugin but didn't think there was an effective way I could integrate it into the TreeView that is essential to this user control.

    Thanks for any feedback!
  2. Answer
    Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 03 Feb 2011 Link to this post

    Hi Stefan,

    Please take a look at this forum post for solution.

    Best wishes,
    Veronica Milcheva
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. Mehmet Ali Bayraktar
    Mehmet Ali Bayraktar avatar
    2 posts
    Member since:
    Dec 2007

    Posted 08 Feb 2011 Link to this post

    Hi,

    I want to implement a autocomplete function to treeview in radcombobox too... how can i do this? can you  give me a full example please..? I want to search in treeview in radcombobox..Sorry for my english..Thank you..
  4. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 11 Feb 2011 Link to this post

    Hi Mehmet Ali Bayraktar,

    Please take a look at this Knowledge Base article for how to manage Search functionality when using RadTreeView in RadCombobox.

    Regards,
    Veronica Milcheva
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top