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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Filtering not working after refresh datasource

Thread ID:

Created:

Updated:

Platform:

Replies:

142318 Jan 28,2019 10:38 AM UTC Jan 29,2019 10:10 AM UTC JavaScript - EJ 2 1
loading
Tags: MultiSelect
Miguel Varela Rodriguez
Asked On January 28, 2019 10:38 AM UTC

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 [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;