Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
480
DropDown with Tree inside, set focus to the tree
posted

Hi,

I'm not sure if I should put this here or in the WebDataTree section.

Anyway, I have this web user control that implements a WebDropDown with a WebDataTree inside.

I need it to behave as close as possible to a normal dropdown, so if I set the focus to the  dropdown and press the arrow keys in the keyboard I should be able to navigate through the items of the tree. The navigation inside the tree works ok (kind of, I have another question open regarding the scroll of the dropdown), but I need to set the focus to the tree when pressing the arrows in the dropdown.

I have attached a small demo project.

Thanks in advance.

TreeDemo.rar
Parents Reply
  • 18204
    Verified Answer
    Offline posted in reply to Carlos

    Hi Carlos,

    You can do this by handling the WebDropDown's DropDownOpened client event.  In the handler, you can find the ID of the WebDataTree and get an instance of the control.  Then, you can set the active node with the set_activeNode() property, passing in the root node.  You can see a code sample that I have tested with your sample below:

    ASPX Markup:

    <ig:WebDropDown ID="wddTree" runat="server" Width="170px" ... >
        <ClientEvents InputKeyUp="setFocus" DropDownOpened="dropDownOpenedHandler"/>

    Java script:

    function dropDownOpenedHandler(sender, args) {
        // Find the ID of our nested WDT.
        var id = $(sender.get_element()).find(".igdt_Control")[0].id,
            treeInstance = $IG.WebDataTree.find(id);

        // Make the root node active.
        treeInstance.set_activeNode(treeInstance.getNode(0));
    }

    If you have any further questions or concerns with this, let me know.

Children