The getRecordsHierarchy method of dataAdapter got null

[JenkeNgParticipant]

When I use the tree of the vue component,
my data source is obtained from the server using the “loadServerData” method and using axios,
and the format is correct,
and then callback.
But it is worth noting that only ‘records’ in dataAdapter have data.
When i use

const records = dataAdapter.getRecordsHierarchy(
              "id",
              "pId",
              "items",
              [
                {
                  name: "name",
                  map: "label",
                },
              ]
            );

This records will get null

[HristoParticipant]

Hello JenkeNg,

I tested a similar example and it seems to work fine.
Could you clarify it?
Please, take a look at this example below with the “App.vue” file:

<template>
    <div ref="testElement">
        <JqxTree ref="myTree" :width="300" :source="records"></JqxTree>
    </div>
</template>

<script>
    import JqxTree from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue";
    
    export default {
        components: {
            JqxTree
        },
        data: function () {
            return {
                records: [ { label: "Loading", value: null } ]
            };
        },
        beforeCreate: function () {
            const data =
                [
                    {
                        "id": "2",
                        "pId": "1",
                        "text": "Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "3",
                        "pId": "1",
                        "text": "Peppermint Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "4",
                        "pId": "1",
                        "text": "Salted Caramel Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "id": "5",
                        "pId": "1",
                        "text": "White Hot Chocolate",
                        "value": "$2.3"
                    }, {
                        "text": "Chocolate Beverage",
                        "id": "1",
                        "pId": "-1",
                        "value": "$2.3"
                    }, {
                        "id": "6",
                        "text": "Espresso Beverage",
                        "pId": "-1",
                        "value": "$2.3"
                    }, {
                        "id": "7",
                        "pId": "6",
                        "text": "Caffe Americano",
                        "value": "$2.3"
                    }, {
                        "id": "8",
                        "text": "Caffe Latte",
                        "pId": "6",
                        "value": "$2.3"
                    }, {
                        "id": "9",
                        "text": "Caffe Mocha",
                        "pId": "6",
                        "value": "$2.3"
                    }, {
                        "id": "10",
                        "text": "Cappuccino",
                        "pId": "6",
                        "value": "$2.3"
                    }, {
                        "id": "11",
                        "text": "Pumpkin Spice Latte",
                        "pId": "6",
                        "value": "$2.3"
                    }, {
                        "id": "12",
                        "text": "Frappuccino",
                        "pId": "-1"
                    }, {
                        "id": "13",
                        "text": "Caffe Vanilla Frappuccino",
                        "pId": "12",
                        "value": "$2.3"
                    }, {
                        "id": "15",
                        "text": "450 calories",
                        "pId": "13",
                        "value": "$2.3"
                    }, {
                        "id": "16",
                        "text": "16g fat",
                        "pId": "13",
                        "value": "$2.3"
                    }, {
                        "id": "17",
                        "text": "13g protein",
                        "pId": "13",
                        "value": "$2.3"
                    }, {
                        "id": "14",
                        "text": "Caffe Vanilla Frappuccino Light",
                        "pId": "12",
                        "value": "$2.3"
                    }
                ];
            const source = {
                datatype: "json",
                datafields: [
                    { name: "id" },
                    { name: "pId" },
                    { name: "text" },
                    { name: "value" }
                ],
                id: "id",
                localdata: data
            };
            // eslint-disable-next-line
            const dataAdapter = new jqx.dataAdapter(source, { autoBind: true });
    
            let result = dataAdapter.getRecordsHierarchy("id", "pId", "items", [{ name: "text", map: "label" }]);
            console.log(result);

            setTimeout(() => {
                this.$refs.myTree.source = result;
            }, 2000);

        }
    }
</script>
<style>
</style>

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[JenkeNgParticipant]

You use loadServerData to do a demo, I did. Then use dataAdapter.getRecordsHierarchy to get null

[JenkeNgParticipant]

This is my complete code, do you see any problems?
component.append( < div id = “categoryButton” > <div style = “border: none;”id = ‘pmPcId’ > </div></div > `);
let dropDownButton = jqwidgets.createInstance(“#categoryButton”, “jqxDropDownButton”, {
width: 250,
height: 30,
});
const source = {
datatype: “json”,
dataFields: [{
name: “id”,
map: “pc_id”
},
{
name: “pId”,
map: “pc_pid”
},
{
name: “name”,
map: “pc_name”
},
],
url: “/productCateg/getAllProductCategory.do”,
};
const dataAdapter = new jqx.dataAdapter(source, {
loadServerData(serverdata, source, callback) {
getCategory(source.url, source, serverdata).then((res) = >{
callback({
originaldata: res,
records: res,
});
});
},
loadComplete(records) {},
});
dataAdapter.dataBind();
const records = dataAdapter.getRecordsHierarchy(“id”, “pId”, “items”, [{
name: “name”,
map: “label”,
}]);`

[HristoParticipant]

Hello JenkeNg,

It looks fine at all.
The only thing that I think is that the data is getting asynchronously.
You could try to move your code for the records option in the loadComplete callback.
There you could try to add the new source.
Please, take a look at this code snippet:

let records: any;

const dataAdapter = new jqx.dataAdapter(source, {
	loadServerData(serverdata, source, callback) {
		getCategory(source.url, source, serverdata)
			.then((res) = > {
				callback({
					originaldata: res,
					records: res,
				});
			});
	},
	loadComplete(records) {
		records = dataAdapter.getRecordsHierarchy("id", "pId", "items", [{
			name: "name",
			map: "label"
		}]);

		this.$refs.yourWidget.source = records;
	}
});

dataAdapter.dataBind();

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts