Server side filtering by both text and value

[Tomislav Tustonic]

Hello

Is it possible to make server side filtering by both key and value of the DropDownList?
For example, if I have a DropDownList which shows a list of currencies with the name as a text and currency symbol as a value, then typing USD in the search box should find US dollar, and typing 'dollar' in the search box should also find US dollar and all the other dollar currencies.

Thanks,
Tom

[Keerthana Rajendran]

 

Hi Tomislav, 

 

Thank you for contacting Syncfusion Support. 

 

By default, server side filtering will be done based on the text field. If you wish to filter the items based on both text and value you can modify the searchQuery through search event of DropDownList as shown below and override _onActionComplete method of DropDownList with this query as shown below 

 

<script type="text/javascript"> 

            ej.DropDownList.prototype._onActionComplete=function(args) 

            { 

                var proxy = this,searchQuery;  

        this._queryString = this.inputSearch.val(); 

                      if(!args.searchQuery) 

                    { 

                         searchQuery = this._addSearchQuery(ej.Query(), !this._isPlainType(this._rawList)); 

                        } 

              else 

                { 

                        searchQuery =args.searchQuery; 

                                                }; 

                    var args = { searchString: this._queryString, items: this._rawList, searchQuery: searchQuery };  

                if(ej.DataManager && this._dataSource() instanceof ej.DataManager && this.model.enableServerFiltering && (window.getSelection().type == "Caret" || ej.browserInfo().name == "msie" )){ 

                        var searchQuery = args.searchQuery.clone(); 

                        var queryPromise = proxy._dataSource().executeQuery(searchQuery); 

                        queryPromise.done(function (e) {  

                        proxy._filterSearch(args.searchQuery, e);  

                    }); 

                        } 

                        else{ 

                            proxy._filterSearch(searchQuery, args); 

                        } 

            }; 

       var customerList = ej.DataManager({url:"https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Customers", crossDomain: true}); 

                        var matches=[]; 

        var controlProperty =  

        { 

            dataSource: customerList ,  

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

            itemsCount : 10 ,  

            popupHeight: "200px", 

            width: "250px", 

            enableFilterSearch: true, 

            enableServerFiltering: true, 

            search:"onsearch", 

          actionComplete:"oncomplete" 

        }; 

        $(function () { 

            $('#customerList').ejDropDownList(controlProperty); 

        }); 

      function onsearch(args) 

      { 

         args.searchQuery= ej.Query().select("ContactName", "CustomerID").where(ej.Predicate("ContactName", ej.FilterOperators.contains, args.searchString, true).or("CustomerID", ej.FilterOperators.contains, args.searchString, true)); 

            

      } 

        

    </script> 

 

We have attached a sample for your reference , please refer to the below given link 

 

https://jsplayground.syncfusion.com/dexitws2 

 

UG: https://help.syncfusion.com/js/datamanager/filtering#or-predicate 

 

Regards, 

Keerthana.