I need to delete a column from the grid based on end user action. I use below lines to delete the column. While the array element is deleted, UI does not reflect it even though the columns variable is bound as in sample app https://www.jqwidgets.com/vue/vue-grid/#https://www.jqwidgets.com/vue/vue-grid/vue-grid-editing.htm. Is there any additional steps I’m missing?
let value = this.$refs.myGrid.getselectedcell();
if(value)
this.columns = this.columns.filter(c => c.datafield !== value.datafield);
Similarly, grid does not refresh after adding a column using code below. Note that this.columns has the columns array like in sample program.
let text = 'C' + (this.columns.length + 1);
// Add new column to data
this.source.datafields.push({ name: text, type: 'string', map: this.columns.length.toString() });
this.source.localdata.forEach(e => e.push(''));
this.dataAdapter = new jqx.dataAdapter(this.source);
// Add new column to metadata
this.columns.push({ text: text, columntype: 'textbox', datafield: text, width: 120 });
this.$refs.myGrid.columns = this.columns;
On debugging, I don’t see the JqxGrid component’s columns property changing at all. What am I missing here?
