jQuery UI Widgets Forums Vue The getRecordsHierarchy method of dataAdapter got null

This topic contains 4 replies, has 2 voices, and was last updated by  Hristo 3 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • JenkeNg
    Participant

    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


    Hristo
    Participant

    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


    JenkeNg
    Participant

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


    JenkeNg
    Participant

    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”,
    }]);`


    Hristo
    Participant

    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

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

You must be logged in to reply to this topic.