jQuery UI Widgets Forums Vue jqxDataTable columngroup with Vue3

This topic contains 1 reply, has 2 voices, and was last updated by  svetoslav_borislavov 2 weeks, 2 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxDataTable columngroup with Vue3 #133626

    igor.dias
    Participant

    Hi!

    I’m trying to use the columnGroup property in jqxDataTable with Vue3, but just copying the app.vue in demos for the Columns Hierarchy example and changing the import folder to jqwidgets-vue3, I keep receiving the following error: Uncaught Error: jqxDataTable: Column Groups initialization Error. Please, check the initialization of the jqxDataTable’s columns array. The columns in a column group are expected to be siblings in the columns array.

    Just to be clear, follows my .vue code:

    <template>
    
        <JqxDataTable :width="getWidth" :height="400" :source="dataAdapter" :columns="columns"
                      :altRows="true" :pageable="true" :columnsResize="true" :columnGroups="columnGroups">
                    </JqxDataTable>
    
    </template>
    
    <script>
        import JqxDataTable from "jqwidgets-scripts/jqwidgets-vue3/vue_jqxdatatable.vue";
        export default {
            components: {
                JqxDataTable
            },
            data: function () {
                return {
                    getWidth: 800,
                    dataAdapter: new jqx.dataAdapter(this.source),
                    columns: [
                        { text: 'Supplier Name', cellsAlign: 'center', align: 'center', dataField: 'SupplierName', width: 200 },
                        { text: 'Name', columngroup: 'ProductDetails', cellsAlign: 'center', align: 'center', dataField: 'ProductName', width: 200 },
                        { text: 'Quantity', columngroup: 'ProductDetails', dataField: 'Quantity', cellsFormat: 'd', cellsAlign: 'center', align: 'center', width: 80 },
                        { text: 'Freight', columngroup: 'OrderDetails', dataField: 'Freight', cellsFormat: 'd', cellsAlign: 'center', align: 'center', width: 100 },
                        { text: 'Order Date', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', cellsFormat: 'd', dataField: 'OrderDate', width: 100 },
                        { text: 'Order Address', columngroup: 'OrderDetails', cellsAlign: 'center', align: 'center', dataField: 'OrderAddress', width: 100 },
                        { text: 'Price', columngroup: 'ProductDetails', dataField: 'Price', cellsFormat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
                        { text: 'Address', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 120 },
                        { text: 'City', columngroup: 'Location', cellsAlign: 'center', align: 'center', dataField: 'City', width: 80 }
                    ],
                    columnGroups: [
                        { text: 'Product Details', align: 'center', name: 'ProductDetails' },
                        { text: 'Order Details', parentGroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
                        { text: 'Location', align: 'center', name: 'Location' }
                    ]
                }
            },
            beforeCreate: function () {
                this.source = {
                    datatype: 'xml',
                    dataFields: [
                        { name: 'SupplierName', type: 'string' },
                        { name: 'Quantity', type: 'number' },
                        { name: 'OrderDate', type: 'date' },
                        { name: 'OrderAddress', type: 'string' },
                        { name: 'Freight', type: 'number' },
                        { name: 'Price', type: 'number' },
                        { name: 'City', type: 'string' },
                        { name: 'ProductName', type: 'string' },
                        { name: 'Address', type: 'string' }
                    ],
                    url: '../sampledata/orderdetailsextended.xml',
                    root: 'DATA',
                    record: 'ROW'
                };
            }
        };
    </script>
    <style>
    </style>
    jqxDataTable columngroup with Vue3 #133628

    Hi,

    I have opened a work item for this.
    If you have any additional questions, do not hesitate to contact us!

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team
    https://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.