Datatable view width at 0px

edited January 13 in Technical questions

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();
        }

Comments

  • Hello @pschaer,

    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.

    As far as I can see, your code looks fine. Here is a small snippet using your bit of code: https://snippet.webix.com/zokoroym. Could you please specify the "parent container" you are talking about here? Do you mean the container of the new Vue instance?

  • It was a problem with bind:class in the vue container. I removed it but i don't know the reason.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!