jqxDataTable columngroup with Vue3

[igor.diasParticipant]

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>

[svetoslav_borislavovParticipant]

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/

[igor.diasParticipant]

Hi!

Are there any updates here? Now I’m using the TreeGrid component and received the same error when using the columnGroup property. Just to make sure, I checked using the samples examples for column hierarchy on TreeGrid and the error persisted. The code used:

<template>
    <JqxTreeGrid ref="myTreeGrid"
        :altRows="true"
        :columnsResize="true"
        :ready="ready"
        :columns="columns"
        :columnGroups="columnGroups"
        :source="dataAdapter">
    </JqxTreeGrid>
</template>
<script>
    import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue3/vue_jqxtreegrid.vue';
    export default {
        components: {
            JqxTreeGrid
        },
        data: function () {
            return {
                dataAdapter: new jqx.dataAdapter(this.source),
                columns: [
                    { text: "Name", columnGroup: "JSTCorp", align: "center", dataField: "name", width: 300 },
                    { text: "Budget", columnGroup: "JSTCorp", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", width: 250 },
                    { text: "Location", columnGroup: "JSTCorp", dataField: "location", cellsAlign: "center", align: "center", width: 250 }                
                ],
                columnGroups: [
                    { text: "JST Corp.", name: "JSTCorp", align: "center" }
                ]
            }
        },        
        beforeCreate: function () {
            let data = [
	            {
	                "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas",
	                "children":
                    [
                        {
                            "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio",
                            "children":
                            [
                                { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" },
                                {
                                    "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio",
                                    "children":
                                    [
                                        { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" },
                                        { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" },
                                    ]
                                }
                            ]
                        },
                        {
                            "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami",
                            "children":
                            [
                                { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" },
                                { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" },
                                { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" }
                            ]
                        },
                        { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" }
                    ]
	            }
            ];
            // prepare the data
            this.source = {
                dataType: "json",
                 dataFields: [
                      { name: "name", type: "string" },
                      { name: "budget", type: "number" },
                      { name: "id", type: "number" },
                      { name: "children", type: "array" },
                      { name: "location", type: "string" }
                 ],
                 hierarchy:
                     {
                         root: "children"
                     },
                 localData: data,
                 id: "id"
            };                  
        },
        methods: {            
            ready: function () {
                this.$refs.myTreeGrid.expandRow(1);
                this.$refs.myTreeGrid.expandRow(2);
            }
        }
    }
</script>
<style>
</style>

[adminKeymaster]

Hi Igor,

jqxDataTable and jqxTreeGrid share a common code base. jqxTreeGrid extends the jqxDataTable. The issue is reproduced by our team. We know the problem and the source of the problem, which is related to the Vue’s reactivity. This issue will be resolved in the next release of jQWidgets. We have an active work item and prioritized it.

Best regards,
Peter Stoev

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

[Author]

Posts