jQuery UI Widgets Forums Vue jqxDataTable columngroup with Vue3

This topic contains 3 replies, has 3 voices, and was last updated by  admin 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 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/

    jqxDataTable columngroup with Vue3 #134464

    igor.dias
    Participant

    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>
    jqxDataTable columngroup with Vue3 #134466

    admin
    Keymaster

    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/

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

You must be logged in to reply to this topic.