How can I get the selected item of an igCombo scrolled to the top of the opened combo when the combo is opened?
[ Combo Box | v ]
--------------------------------
Selected Item <=================
Non-selected item 1
Non-selected item 2
Hi Justin,
you can achieve the required in the dropDownOpening event:
dropDownOpening: function (evt, ui) { if (ui.owner.selectedItems()) { var selectedNode = ui.owner.selectedItems()[0].element[0].cloneNode(true); ui.owner.selectedItems()[0].element[0].remove(); var listHolder = ui.owner.dropDown().find(".ui-igcombo-listitemholder")[0]; listHolder.insertBefore(selectedNode, listHolder.firstElementChild); } }
Please review the jsfiddle to see this working and let me know if you have more questions.
Thanks for your reply, but I think this might actually just *move* the selected item rather than scroll it to the top of the drop down. Sorry if my original question wasn't clear.
Hello,
Any updates on this?
Hello Justin,
Sorry for my delayed reply. The desired can be achieved executing a custom code that finds the selected item index in the combo list and uses the listScrollTop method to scroll the list :
if (ui.owner.selectedItems()) { var listHolder = ui.owner.dropDown().find(".ui-igcombo-listitemholder"); var selectedElemIndex = listHolder.children().index(ui.owner.selectedItems()[0].element) var itemHeight = listHolder.height() / listHolder.children().length; ui.owner.listScrollTop(selectedElemIndex * itemHeight); }
Please review the updated jsFiddle and let me know if you have further questions. I will be glad to help.
Should this work with virtualization enabled?
I've made a small correction to make it work with virtualization as well:
dropDownOpened: function (evt, ui) { if (ui.owner.selectedItems()) { var listHolder = ui.owner.dropDown().find(".ui-igcombo-listitemholder"); var selectedElemIndex = listHolder.children().index(ui.owner.selectedItems()[0].element) var itemHeight = listHolder.height() / listHolder.children().length; var currentScroll = ui.owner.listScrollTop(); var newScroll = currentScroll + selectedElemIndex * itemHeight; ui.owner.listScrollTop(newScroll); } }
Please let me know if you have further questions.
Hristo
I had to tweak it because it seemed to leave the "active" style on the previously selected "index", but this is working for me. Thanks for all your help.