How do I give keyboard focus to a templated Item in a Combobox?

[Stuart Hemming]

I have a RadComboBox that has a single templated item that is a RadTreeView.

I'm looking for suggestions about how I might go about giving the RadTreeView keyboard focus when the RadCombobox's dropdown is opened.

Assume my markup is simpliar to this ...

<telerik:RadComboBox runat="server"
                     ID="RadComboBox1"
                     AutoPostBack="false"
                     AccessKey="V"
                     OnClientFocus="ComboFocus"
                     OnClientDropDownOpened="DropDownOpened">
    <ItemTemplate>
        <telerik:RadTreeView ID="RadTreeView1"
                             runat="server"
                             CausesValidation="false">
            <Nodes>
                <telerik:RadTreeNode Text="Node 1" Value="1" />
                <telerik:RadTreeNode Text="Node 2" Value="2" Selected="true" />
                <telerik:RadTreeNode Text="Node 3" Value="3" />
            </Nodes>
        </telerik:RadTreeView>
    </ItemTemplate>
    <Items>
        <telerik:RadComboBoxItem/>
    </Items>
</telerik:RadComboBox>

Where the ComboFocus function simply opens the dropdown.

So, what I'm trying to establish is, is there anyway I can - programmatically - give my treeview control of the keyboard?

--
Stuart

[Boyan Dimitrov]

Hello Stuart,

An easy and convenient way of achieving that functionality would be to enable the keyboard support for the RadTreeView control by setting TabIndex="1".
Additionally you could focus its DOM element using OnClientFocus or OnClientDropDownOpened client-side event of the RadComboBox control.
Please find an sample implementation of that approach in the code snippet below:
//markup code

<telerik:RadComboBox ID="RadComboBox1" OnClientDropDownOpened="OnClientDropDownOpenedHandler">
            <ItemTemplate>
                <div id="div1">
                    <telerik:RadTreeView ID="RadTreeView1" runat="server" TabIndex="1"/>
                </div>
            </ItemTemplate>
</telerik:RadComboBox>

//JavaScript

function OnClientDropDownOpenedHandler(sender, eventArgs) {
    var tree = sender.get_items().getItem(0).findControl("RadTreeView1");
    tree.get_element().focus();
    var selectedNode = tree.get_selectedNode();
    if (selectedNode) {
        selectedNode.scrollIntoView();
    }
}

Regards,
Boyan Dimitrov
the Telerik team