TreeView in ComboBox - how to use arrow keys for navigation

[Stefan]

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

[Veronica]

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

[Stefan]

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.