We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Filtering not working after refresh datasource

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


1 Reply

PO Prince Oliver Syncfusion Team January 29, 2019 10:10 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon