How to combine previously selected values with datasource

[Carlos Burke]

I have two arrays one being the data source animals: ['cat', 'dog', 'lizard', 'cow'] and one being previous saved information coming from a DB selectedAnimals: ['lizard', 'cow']. When I click to add more animals to the DB I want what was already selected to be remain filtered out of the data source.

[Ponmani Murugaiyan]

Hi Carlos 

Thanks for contacting Syncfusion support. 

Query: When I click to add more animals to the DB, I want what was already selected to be remain filtered out of the data source. 

When dynamically adding the items to the DB using button click, you need to push the newly adding items to the component value property variable which already contains the previously selected items in order to maintain the both values. Now, the previously selected item will remain filtered in the datasource as per your requirement. 

<template> 

  <div id="app"> 

     <ejs-multiselect id="multiselect" ref="multiselectObj" :dataSource="animals" :value="selectedAnimals"></ejs-multiselect> 

     <ejs-button id="buttonApply" class="e-flat e-primary" v-on:click.native="onClick">Add more animals to the DB</ejs-button> 

  </div> 

</template> 

 

export default { 

data () { 

    return { 

       //datasource 

      animals: ["cat", "dog", "lizard", "cow"], 

      //Preselecetd value at initial rendering 

      selectedAnimals: ["lizard", "cow"], 

      //Newly selecting value dynamically using button click 

      newAnimals: ["dog"], 

    } 

  }, 

  methods: { 

    onClick: function (args) { 

     this.selectedAnimals.push.apply(this.selectedAnimals, this.newAnimals); 

    }, 

  } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Multiselect2098559987 

 

Please get back us if you need further assistance.  

Regards, 

Ponmani M