[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>

[igor.diasParticipant]

Actually, please ignore the above mensage. The real problem here is if it’s possible to do an API request that requires a token authentication. In my case, using axios and then applying as localdata works ok, but I would like to know if it’s possible using url + data method or beforesend function (or any other way).

[igor.diasParticipant]

Hi!

Thanks to the answer.

Actually, I found out that it works using jqxGrid document-ready function ( $(“#jqxgrid”).jqxDataTable({}) ). Changing to jqxDataTable I receive the following error: TypeError: $(…).jqxDataTable is not a function. Is there a way to use it as jqxDataTable?

Obs: I’m already using import JqxDataTable from ‘jqwidgets-scripts/jqwidgets-vue3/vue_jqxgrid.vue’

[igor.diasParticipant]

Hi!

But considering the lastest release (jQWidgets v17.0.0), it was mentioned that it now has integration with Vue 3. Is that right?

[Author]

Posts