Remote dropdownlist to only load data once filter data is entered

[Malcolm van Staden]

Hi,

Is there a way to have the dropdownlist only load remote data once you start typing within the filter box? We have a large amount of data & want it to rather load only once the user has typed 3 or more characters in the search box. This will reduce the number of items returned from the server.

I'm aware of the following properties:

enableServerFiltering (we need this to be true to reduce the number of items returned to the front end)

enableFilterSearch (this must be true as this will provide the filter textbox)

virtualScrollMode - this could work as a solution, but the above two options are still necessary. 

We've taken a look at the following: https://help.syncfusion.com/js/dropdownlist/howto#to-enable-filter-search-for-virtual-items-that-are-not-visible-on-the-page-when-virtualscrollmode-is-continuous but the solution is overly complicated.

Any assistance in this regard would be appreciated 

Thank you

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Malcolm, 

 

Greetings from Syncfusion support.  

 

Based on your requirement , it seems you have large set of data for DropDownList and need to avoid loading of entire data initially. If so, you can set itemsCount based on the number of items to be loaded initially along with allowVirtualScrolling set to true. This will load few items (mentioned with itemsCount) initially and remaining items will be loaded during scroll.  To filter the items after entering 3 characters in input search box, you can check the search string length and prevent the search functionality through search event. Refer to the following code.  

 

$('#customerList').ejDropDownList({ 

            dataSource: customerList ,  

            fields : { text: "ContactName", value: 'ContactName'  },  

            itemsCount : 20 ,  

            popupHeight: "200px", 

            width: "250px", 

            enableFilterSearch: true, 

            enableServerFiltering: true, 

            allowVirtualScrolling: true, 

               search: function(args) { 

              if (args.searchString.length < 3 ) { //check search string length 

                args.cancel = true; 

              } 

            } 

 

Now the query will be passed to server only when 3 or more characters are entered.  

 

Refer to the following sample. 

 

https://jsplayground.syncfusion.com/attumczy  

 

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

 

Regards, 

Shameer Ali Baig S.

[Malcolm van Staden]

Hi,

Thank you, the provided solution resolves my query.

Is there a way to be able to add an additional filter (to be sent to the server) for filtering? So currently it makes use of the contains clause for the customer name, but what if we want to ensure that only customers from company XYZ and who's name contains the search query are returned? How would we go about adding the additional AND clause condition to the query?

[Muthukrishnan Kandasamy]

Hi Malcom, 

 

Thanks for the update. 

 

Yes, you can customize the filtering in DropDownList control by using query property. We have prepared sample for your convenience, in this sample we have only returns the data from particular country. Refer the below code block. 

 

     

<div class="control"> 

        <div class="ctrllabel">Select a Customer Name</div> 

        <input type="text" id="customerList" /> 

    </div> 

    <script type="text/javascript"> 

             

        var customerList = ej.DataManager({ 

          url:"https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders", 

          crossDomain: true 

        }); 

            var query = ej.Query().select("ShipName", "ShipCountry").where("ShipCountry", "equal", "France", false); 

        $(function () { 

            $('#customerList').ejDropDownList({ 

            dataSource: customerList ,  

            query: query,  

            fields: { text: "ShipName", value: "ShipCountry" },  

            itemsCount : 20 ,  

            popupHeight: "200px", 

            width: "250px", 

            enableFilterSearch: true, 

            enableServerFiltering: true, 

            allowVirtualScrolling: true, 

            search: function(args) { 

              if (args.searchString.length < 3 ) { //check search string length 

                          args.cancel = true; 

              } 

            } 

        }); 

                                     

}); 

 

    </script>  

 

 

Refer the below link for the sample. 

https://jsplayground.syncfusion.com/wuzmyl4e 

 

Refer to the below documentation link to know more about the customization in query. 

https://help.syncfusion.com/js/datamanager/filtering#equal 

 

Please let us know, if you need any assistance. 

 

Regards, 

Muthukrishnan K