Hi guys,
I have a igCombo with filtering activated. When I search anything and then select an item that is in the second page of the dropdown, the dropdown refresh and goes back to the first item!
I would like to stay in the same items, according to my search.
Is there any way to achieve this?
Thanks in advance,
João
Hi João,
Thank you for your patience!
The loadOnDemandSettings option in igCombo is used to load chunks of data so you don't have to fetch the whole data if you don't need it.
This is the reason why when you filter your remote data, select some record and then open the drop down, the selected item does not get focused if it is not in the loaded chunk.
Having the selected item (which is not in the loaded chunk ) focused, means that you have to load chunks of data constantly until you reach this item, which basically ignores the functionality of the loadOnDemandSettings option.
For example if you filter the igCombo and then select an item, which is in the last data chunk, you will have to load all the data so you can get this item focused.
I wanted to let you know, why the requested behavior is not so consistent with the functionality of the igCombo, when it is configured with loadOnDemandSettings option.
We managed to make a workaround, which is not very pretty, but it works. The idea is to check if the selected item is in the rendered items and scroll until you reach it. This applies in the dropDownOpened event.
Here is the code:
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 currentScroll = ui.owner.listScrollTop(); var itemHeight = listHolder.height() / listHolder.children().length; var newScroll = currentScroll; var visibleItemsReached = 0; var loop = setInterval(() => { if(selectedElemIndex === -1){ visibleItemsReached += $('#combo').igCombo('option', 'visibleItemsCount'); ui.owner.listScrollTop(visibleItemsReached * itemHeight); selectedElemIndex = listHolder.children().index(ui.owner.selectedItems()[0].element); } else { clearInterval(loop); } }, 100); } }
Please, let me know if you have any questions.
Regards,
Hristo Popov