The datable view width is automatically set to 0px. The parent container is > 1200px. If i change in the browser the datatable width, it works like expected.
What is wrong in the code:
import { mapGetters, mapMutations} from 'vuex'
var selectedRowId;
export default {
template: "<div></div>",
data: function () {
return {
checkedIds: []
}
},
mounted: function () {
const self = this;
this.webixId = webix.ui({
container: this.$el,
$scope: this,
view: "datatable",
height: 600,
id: 'itemGrid',
headermenu: true,
resizeColumn: true,
select: "row",
headerRowHeight: 40,
columns: [
{id: "id", header:["Id", { content:"textFilter"}], width: 50},
{id: "name", header:["Bezeichnung", { content:"textFilter"}], fillspace: true, minWidth: 200, sort: "string"},
{id: "part_number", header:["Nummmer", { content:"multiSelectFilter", suggest:{fitMaster:false, width:200} }],minWidth: 150, sort: "string"},
{id: "quantity", header:["Nummber", { content:"textFilter"}], minWidth: 100, sort: "string"},
{id: "supplierName", header: ["Lieferant", { content:"multiSelectFilter", suggest:{fitMaster:false, width:400} }], minWidth: 150, adjust: true , sort: "string"},
{id:"milestone_delivery_date", map:"(date)#milestone_delivery_date#", header:["Meilenstein", { content:"dateRangeFilter"}], adjust: true , template: function (obj){
return obj.milestone_delivery_date_as_date
}},
{id:"requested_delivery_date", map:"(date)#requested_delivery_date#", header:["Bedarf", { content:"dateRangeFilter"}], adjust: true , template: function (obj){
return obj.requested_delivery_date_as_date
}},
{id:"confirmed_delivery_date", map:"(date)#confirmed_delivery_date#", header:["Bestätigt", { content:"dateRangeFilter"}], adjust: true , template: function (obj){
return obj.confirmed_delivery_date_as_date
}},
{id:"created_at", map:"(date)#created_at#", header:["Erstellt am", { content:"dateRangeFilter"}], adjust: true , template: function (obj){
return obj.created_at_as_date
}}
],
on: {
onSelectChange: function () {
},
onItemDblClick: function () {
},
onAfterLoad: function () {
}
},
url: '/purchaseOrder/' + this.selectedPurchaseOrder.id + '/items',
})
},
computed: {
...mapGetters({
selectedPurchaseOrder: 'getSelectedPurchaseOrder'
}),
},
destroyed:function(){
webix.$$(this.webixId).destructor();
}