update dropdown dynamically

[James Boomer]

Is it possible to update a inplace editor.  I courrently update a dropdown component using the mounted method and calling out the ref like:

this.$refs.countryDopdown.dataSource = this.countries.

but i'm not able to do this with the implaceeditor component since even though i try something like this:

countryDropDownModel: {

        placeholder: 'Find a country',

        dataSource: [{}],

        fields: { text: 'name', value: 'value' }

      },

and then later in my mounted method try to update the dat source like

countryDropDownModel.dataSource = this.countries

how can i update a dropdown inplace editor dynamically

[Buvana Sathasivam]

Hi James, 

Greetings from Syncfusion support. 

Your reported problem has been checked. The model property can be used to modify the datasource of the Inplace Editor dropdown list dynamically. When you click the external button in the sample below, the Inplace Editor Dropdown list data source is dynamically changed. 

<ejs-inplaceeditor ref="dropObj" id="dropdownEle" type="DropDownList" :model="dropdownModel"> </ejs-inplaceeditor> 

….. 

export default { 

  data: () => { 

    let dropdownData = ['Australia', 'Bermuda', 'Canada', 'Cameroon', 'Denmark']; 

    return { 

       dropdownModel: {                 

            dataSource: dropdownData,      // Initially, the assigned dropdown list datasource 

      } 

     }; 

  }, 

  mounted: function() { 

    this.dropObj = this.$refs.dropObj.ej2Instances;   // Inplace editor instance 

  }, 

   methods: { 

    addClick: function() { 

      this.dropObj.model.dataSource = ['Australia', 'Cameroon', 'Denmark']; // Changed the datasource dropdown list dynamically. 

    } 

  } 

}; 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue2-691065400 

API link: https://ej2.syncfusion.com/vue/documentation/api/inplace-editor/#model 

Please check the above sample and solution and let us know if you have any further queries. 

Regards, 

Buvana S