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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Remote dropdownlist to only load data once filter data is entered

Thread ID:

Created:

Updated:

Platform:

Replies:

151305 Feb 6,2020 09:53 AM UTC Feb 10,2020 09:58 AM UTC jQuery 3
loading
Tags: ejDropDownList
Malcolm van Staden
Asked On February 6, 2020 09:53 AM UTC

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. 


Any assistance in this regard would be appreciated 

Thank you


Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On February 6, 2020 01:19 PM UTC

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. 
 
 
Please let us know if you need further assistance on this.  
 
Regards, 
Shameer Ali Baig S.

Malcolm van Staden
Replied On February 7, 2020 12:05 PM UTC

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 [Syncfusion]
Replied On February 10, 2020 09:58 AM UTC

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({ 
          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. 
 
Refer to the below documentation link to know more about the customization in query. 
 
Please let us know, if you need any assistance. 
 
Regards, 
Muthukrishnan K 


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

Live Chat Icon For mobile
Live Chat Icon