TreeView in ComboBox - how to use arrow keys for navigation

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

    Posted 01 Feb 2011 Link to this post

    I have a RadTreeView inside a RadComboBox and am implementing autocomplete behaviour when the user types into the combobox.
    The tree results are being filtered properly but I'm at a loss as to how to enable keyboard navigation.

    My needs are pretty basic:
    • When the user hits the down arrow or tab key while focus is on the combobox, the dropdown will expand (if not already) and focus will move to the first visible leaf node in the tree.
    • The user can use the up and down arrow keys to navigate between leaf nodes
    • The user can hit enter to select the currently highlighted/selected leaf node

    I have an event handler registered for the KeyUp event on the combobox. When the down arrow is encountered, I'm using this code:
    if (key == 40 || key == 9) // down arrow or tab
    {
      // open combobox if not already
      if (!comboBox.get_dropDownVisible()) {
        comboBox.showDropDown();
        comboBox._childListElementWrapper.style.height = "400px";
      }
     
      // focus first visible child node
      $(nodes).each(
        function (sender, args) {
          var node = args;
          if (node.get_nodes().get_count() == 0 && // leaf node
                            !$(node._element).is(':hidden')) // and hasn't been filtered out
          {
            $(node._contentElement).focus();
            node.highlight();
            // node.set_selected(true);
            return false;
          }
        }
      );
    }

    This is working in that the first visible node (I make the node._element <LI> hidden elsewhere) looks selected, but keyboard input isn't changing selected tree items. After fiddling, the focus has either stayed stuck in the textbox, or it focuses the dropdown/treeview and I can scroll the list of items with the keyboard (similar to rolling the mouse scroll wheel).

    How can I focus the first tree item and navigate between the visible items with keyboard arrows? I don't think the AccessKey or TabIndex options are appropriate, as this combobox/treeview combo is inside a User Control and there will be several on the page. I do not want the browser's tab key hijacked - I only want to focus the treeview and allow navigation when the user hits the down arrow when the combobox textbox has focus.

    If anyone with an understanding of how the treeview object works could point me toward the right approach (narrative or pseudocode is fine) I'd really appreciate it.

    Thanks,
    Stefan
  2. Answer
    Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 03 Feb 2011 Link to this post

    Hello Stefan,

    Please take a look at the project that I made for you to complete your scenario.

    Please let me know if you have further questions.

    All the best,
    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. Stefan
    Stefan avatar
    16 posts
    Member since:
    Jun 2010

    Posted 03 Feb 2011 Link to this post

    Thanks a lot, Veronica! That did it - it's working great now.

    I think TabIndex="-1" on the TreeView was the final piece I needed.
Back to Top