Filtering not working after refresh datasource

[Miguel Varela Rodriguez]

Hi Syncfusion Team,

i have the following problem. I got a Multiselect item with filtering that works fine. After i refresh the datasource the filtering throws me a error.

multi-select.js:221 Uncaught TypeError: Cannot read property 'querySelector' of null
    at t.focusAtFirstListItem (multi-select.js:221)
    at t.onPopupShown (multi-select.js:198)
    at t.showPopup (multi-select.js:2404)
    at t.wrapperClick (multi-select.js:663)

This is my declaration of the multiselect object with fitlering code:

listWorker = new ej.dropdowns.MultiSelect({
                dataSource: new ej.data.DataManager(ArrWorkers),
                fields:{value: 'sWorkercode', text: 'sFullname'},
                placeholder: "Seleccionar Operario",
                showClearButton: true,
                allowFiltering: true,
                filtering: (e) => {
                    if(e.text == '') e.updateData(ArrWorkers);
                    else
                    {
                        var predicate = new ej.data.Predicate('sWorkercode','Contains',e.text,true);
                        predicate = predicate.or('sFullname','Contains',e.text,true);
                        var query = new ej.data.Query().select(['sWorkercode','sFullname']);
                        query = (e.text !=='')? query.where(predicate):query;
                        e.updateData(ArrWorkers,query);
                    }
                },
                ignoreAccent:true,
                locale: 'es',
                itemTemplate:"<span>${sWorkercode} - ${sFullname}</span>",
                 mode: 'CheckBox'
            });
       
            listWorker.appendTo("#listWorker");

And the part of the ajax part who refreshes the Datasource:

$.ajax
            ({
                type:'POST',
                url:'_phpFunctions.php',
                data:postData,
                dataType:'json',
                success: function(data)
                {
                    LOG("Response from get users:");
                    LOG(data);
                    if(data)
                    {
                        ArrWorkers = data;

                        listWorker.dataSource = ArrWorkers;
                        listWorker.refresh();
                       
      
                       
//                        BooGotWorkers = true;
//                        DataLoaded();
                 
                    }
                    else
                    {
                        ShowDialogOk("Error","Error al obtener usuarios...","Cerrar",null,true);
                    }
                },
                error: function (xhr, ajaxOptions, thrownError)
                {
                    ShowDialogOk("Error","Error al obtener usuarios...","Cerrar",null,true);

                }
            });   

Thank you for your help in advance. Greets from Spain

[Prince Oliver]

Hi Miguel, 

Thank you for contacting Syncfusion support. 

Based on the shared code snippet and the error message, we suspect that the issue occurs due to refreshing the entire controls after the dataSource is assigned. We suggest you call the dataBind method instead of using the refresh method in your end. Kindly refer to the following code snippet. 

document.getElementById("refresh").addEventListener("click", function () { 

    $.ajax({ 

        type: 'GET', 

        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers/', 

        dataType: 'json', 

        contentType: "application/json; charset=utf-8", 

        success: function (data) { 

            if (data) { 

                //ArrWorkers = data; 

                listWorker.dataSource = data.d; 

                listWorker.fields = { text: 'CustomerID', value: 'ContactName' } 

                listWorker.itemTemplate = "<span>${CustomerID} - ${ContactName}</span>", 

                listWorker.dataBind(); 

                // BooGotWorkers = true; 

                // DataLoaded(); 

            } 

            else { 

                alert("error") 

            } 

        }, 

        error: function (xhr, ajaxOptions, thrownError) { 

            alert("error") 

        } 

    }); 

}); 

We have attached a sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/l2qpyg  

Please let us know if you need any further assistance on this. 

Regards, 

Prince