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.
Hi, I finally managed to do with this in the inputKeyUp client event of the DropDown
function setFocus(sender, args) { var key = args._props[0].keyCode; if(key >= 37 && key <= 40) { sender.openDropDown(); setTimeout(function() { $('#' + sender._id + ' input._tree_f_e_').first().focus(); }, 200); } }
Thanks anyway.
Hello Carlos,
Thank you for posting in our forums!
I am glad to hear you were able to resolve this and thank you for sharing your solution.
If you need anything else, please let me know and I will be glad to help.
Actually I'm stuck on one last thing on this issue.
I need the focus on the tree to reset to the parent node every time i open the dropdown with the keys. Now the dropdown opens with the last selection focused.
Any tip on how to solve this?
Best regards.
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.
Glad I could help! If you need anything further with this, please let me know.
Thanks! Worked like a charm.