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.
Hi,
..or I did not understand you correctly :) Either way, I will be able to you a solution for scrolling the item to the top later today or tomorrow.
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.