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
55
Don't refresh the dropdown list after search
posted

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

Parents
No Data
Reply
  • 280
    Offline posted

    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

Children
No Data