Having trouble hiding columns and refreshing data.

[lionsarmor]

I would like to hide columns on a button click, I am able to update the data for the columns but the data doesnt refresh, also the grid.refresh('all'), seems to do nothing, no errors or output, I am using vue2, my project was built out using example code everything seems to work except updating data.

this example I was just trying to add an additional column to test that the data was updated.

dropColumns(hide) {
  const grid = document.querySelector('revo-grid');
  grid.columns = this.columns
  if (hide == true) {
  grid.columns.push({id: 1,prop: "goob",size: 200,name: 'goober'})
  grid.refresh('all')
  }
},

[van-huyen]

You can try: dropColumns(hide) { // const grid = document.querySelector('revo-grid'); // grid.columns = this.columns // setting columns one-time in v-grid tag by property ":columns="columns""

if (hide == true) { var tempCols = this.columns tempCols .push({id: 1,prop: "goob",size: 200,name: 'goober'}) this.columns = [...tempCols] // for update columns // grid.refresh('all') } },

[lionsarmor]

Thank you I think I understand this. I'll update a second array and just replace the old one.

[revolist]

@lionsarmor @van-huyen is totally right. The whole grid concept is based on mutations. Use data-driven approach instead of methods. Use mutations and it will refresh things automatically.

[lionsarmor]

I think what the problem is, that I am actually facing is, I replace the data in columns and rows, it does update, the column headers, but only the first row seems to change leaving the old data, but this concept here works, so I must have a bug some place. thank you