ServerFiltering with pre-selected item(s)

[Oka Sugandi]

Dear Syncfusion Team,
I have difficulties implementing this task:
I have dropdownlist, with data populated from server, the data itself is a key-value. I have succeeded implement it for searching, selecting, etc. The problem is if the dropdown needs to select pre-selected items (which is key(s) - not value). If the key is in the top 10 (the first query to server), the item is selected :), but if the key is outside the top 10, the dropdownlist won't select it...

Thank you for the support :).

[Keerthana Rajendran]

Hi Oka,   

   

Thank you for contacting Syncfusion Support   

   

We have prepared a sample by querying 20 data from a remote service and set a value beyond 20 items in DropDownList. Here, item is not selected since the item is not present in the loaded dataSource. We suggest you to query the item with required value and add to the existing item through addItem method. After adding, set the corresponding value in actionComplete event so that item will be pre-selected on loading. Please refer to the below code.   

   

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

<script type="text/javascript">   

        var dataManager = ej.DataManager({   

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

            });   

        $(function () {   

            // DataManager creation   

              

            // Query creation   

            var query = ej.Query()   

                   .from("Customers").take(20);   

   

            $('#customerList').ejDropDownList({   

               dataSource: dataManager,   

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

               query: query,   

               actionComplete:function(args)   

              {   

                 var ddlobj=$("#customerList").data("ejDropDownList");   

                 var query = ej.Query().from("Customers").select(this.model.fields.value,this.model.fields.text).where(this.model.fields.value, "equal", "Howard Snyder", false); //query the item with requried value   

                 var execute = dataManager.executeQuery(query) // executing query   

                    .done(function (e) {   

                         

                      ddlobj.addItem(e.result);//add new item based on query result   

                      ddlobj.setModel({value :e.result[0].ContactName}); //set value to be selected.   

                    })   

              }   

                 

            });   

        });   

    </script>   

   

We have prepared a sample for reference. Please refer to the below given link   

   

https://jsplayground.syncfusion.com/bmubnyy2   

   

   

Regards,   

Keerthana.   

 

[Oka Sugandi]

Thank you Keerthana for the response.. What about if the dropdown needs to use server-based filtering/search (by using enableServerFiltering: true and enableFilterSearch: true)? I tried using actionComplete event, but the result is the pre-selected item will be added each time the user search something... So if the user search 5 times, the items will be added 5 times.. Thank you!

[Keerthana Rajendran]

Hi Oka, 

 

The new item added through addItem will be usually added as last item in DropDownList. So , you can check whether the new item which is to be added already exists in actionComplete event by using the below code 

 

actionComplete:function(args) 

              { 

                 var ddlobj=$("#customerList").data("ejDropDownList"); 

                 var query = ej.Query().from("Customers").select(this.model.fields.value,this.model.fields.text).where(this.model.fields.value, "equal", "Howard Snyder", false); 

                 var execute = dataManager.executeQuery(query) // executing query 

                    .done(function (e) { 

                       if(ddlobj.popupListItems[ddlobj.popupListItems.length-1].CustomerID!=e.result[0].CustomerID) 

                          { 

                     ddlobj.addItem(e.result); 

                       ddlobj.setModel({value :e.result[0].ContactName}); 

                          } 

                    }) 

              } 

 

Please modify this code based on your scenario and ensure this in your end. 

 

Regards, 

Keerthana.