DropdownList using updated data source

Question

I have a dropdownlist bound to an array of objects which is working fine.

e.g.

Lookups : [ {ID:1,Name:"Line 1"}, {ID:2,Name:"Line2"});

I then bind this :

<ejs-dropdownlist data-source="Lookups" />

I then want to change that list. Sometimes I add a new item:

Lookups.push({ ID:3, Name:"Line3"});

or remove an item:

Lookups.splice(1,1);

or change an item:

Lookups.splice(1,1,{ID:2,Name:"New Line2"});

However, the dropdown doesn't update to show those new values. I woudl have expected that since it is a vue component, the data binding would kick in.

I have played around with adding new item using the addItem() method on the dropdown. I have tried manipulating the dropdown's dataSource property (which seems to effectively modify my original Lookups list anyway). I have tried using a query but i can't see how I can manually force it to refresh the dropdown.

All I really want is for the dropdownlist to respect the databinding on the Lookups OR a "refresh()" method on the dropdown control to force it to rebind the list. How can I make this work?

I did see this but its using Vuex which isn't applicable in this case.

https://www.syncfusion.com/forums/140116/displayed-items-of-dropdownlist-dont-update-after-adding-items-to-source

Regards

Jeff

Sureshkumar P · Answer

Hi Jeff, 
 
If you are push the data into the data source list, we need to force the component to reflect the changes with help of refresh() method. 
So, we suggest you to use our public method called addItem() to add the required item in the popup of the DropDownList component. 
 addObjects() { 
      console.log("execute"); 
      var newobj = { Id: "Game10", Game: "Tennis" }; 
      this.$refs.dropObj.ej2Instances.addItem(newobj); 
      console.log("execute" + newobj); 
    }, 
    Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue3_ddl_additem-936674773  
    UG: https://ej2.syncfusion.com/vue/documentation/drop-down-list/how-to/add-item/  
 
Regards, 
Sureshkumar P

Jeff Butterworth · Answer

I need to keep the list up to date. When I use the addItem() method I am getting conflict between the two. The addItem() definitely adds the item in but then it will sometimes also take the item I have added to the list as well. Its not consistent. What I did get working was to copy my list to a temp variable, clear the dropdown list and then reassign the list again.
            var tempList = JSON.parse(JSON.stringify(self.Lookups.SavedSearches));            self.Lookups.SavedSearches = [];            self.$nextTick(function () {                self.Lookups.SavedSearches = tempList;            });Would be handy to have a refresh() method on the dropdown that could do this, or something similar.

Sureshkumar P · Answer

Hi Jeff, 


If the addItem() method is not suitable for your requirement, we need to push the data in the data source and call the refresh() method through component instance to reflect in the popup. So, we have modified the sample and attached it below. 





var newobj = { Id: "Game10", Game: "Tennis" }; 
      this.$refs.dropObj.ej2Instances.dataSource.push(newobj); 
      this.$refs.dropObj.ej2Instances.refresh(); 

Modified Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue3_DDL_DataSource-1428904720    

Also, share the faced issue when using addItem() method through the video demonstration which help us to check and provide the solution earliest.  

Regards, 
Sureshkumar P.