Posted 16 April 2018, 7:59 pm EST
Im not sure where i am going wrong but i am unable to create columns dynamically. Everything works fine if columns are auto generated based on the source , but if i wanted to customize it the grid is being empty. Any help is appreciated.
Template
<wj-flex-grid ref="grid1" id="grid"
:items-source="data"
:allowAddNew="true"
style="height:90vh;"
:rowAdded="rowAdded"
:autoGenerateColumns=false
>
<wj-flex-grid-column v-for="(col,index) in colDef" :key="index" :header="col.header" :binding="col.binding"></wj-flex-grid-column>
</wj-flex-grid>
Imports
import { WjFlexGrid} from "../../node_modules/wijmo/wijmo.vue2.grid";
import * as wjcCore from "../../node_modules/wijmo/wijmo";
Column definition
get colDef(){
var ctryMap = new DataMap(this.getData(50),'country','country');
return [
{ binding: 'country', header: 'Country', DataMap: ctryMap},
{ binding: 'date', header: 'Date' }
];
}
Data source
data: wjcCore.CollectionView = new wjcCore.CollectionView(this.getData(50));
getData(count: number) {
var countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
data = [];
for (var i = 0; i < count; i++) {
data.push({
id: i,
country: countries[i % countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 == 0
});
}
return data;
}
