Unable to update dynamic data in Source property in dropdown

Tags: #<Tag:0x00007efc625c1e20>
#1

I am trying to assign an array for the source to display in dropdown using vueJS. But I am getting error.

hotSettingsConfig: {
data:[
{ state: ‘All State’, bid: 52, enabled: ‘yes’ },
{ state: ‘DC’, bid: 0, enabled: ‘no’ },
{ state: ‘’, bid: ‘’, enabled: ‘no’ },
],
maxRows: 52,
minRows: 1,
colHeaders: [‘State’, ‘Bid’, ‘Enabled’],
columns: [
{
data: ‘state’,
type: ‘dropdown’,
source: this.getStates,
// source: [],
// renderer: function(instance, td, row, col, prop, value, cellProperties) {
// cellProperties.source = [‘abc’,‘All State’,‘DC’];
// },
validator: function(value, callback) {
var data = this.instance.getDataAtCol(this.col);
var index = data.indexOf(value);
if (index > -1 && this.row !== index) {
callback(false); // uniqueValue = false;
} else {
callback(true);
}
},
}
}

//computed property
computed: {
getStates() {
let states = this.partnerStates.map(function (obj){return obj.stateCode})
return states;
},
}

#2

Hi @infantraj.a,

The source property as a function accepts two arguments:

  • query - current value of editable element,
  • callback - callback function where the first argument should be your list of possible values to set in cell

If you would like to learn more about source property, check our documentation: https://handsontable.com/docs/Options.html#source

Here is a link to an example basing on your configuration: https://codesandbox.io/s/lucid-morse-tgd6b?file=/src/App.vue

#3

@piotr.laszczkowski Thanks for Sharing I have resolved one.

#4