Jqxtree bind from json problem

[kashehiParticipant]

Hi,
I want to load a jqxtree from json with fetch but my grid does not show, woul you please help me to find my problem?
this is my code:
import { useState, useEffect } from ‘react’;
import JqxTree, { ITreeProps, jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxtree’;

const Tree = ({ handleEvent, className, style }) => {
const [state, setState] = useState({
width: ‘100%’

});
const Style = { float: “right”, marginRight: 5 };
return (

<JqxTree
height={“100%”}
className={className}
theme={‘energyblue’}
rtl={true}
style={Style}
onNameOfEvent={handleEvent}
/>
)
}

export default Tree

export function PostTree() {
const [source, setSource] = useState({
source: records
})
const source = {
datafields: [
{ name: ‘id’,map: ‘Id’},
{ name: ‘parentid’ },
{ name: ‘Title’ },

],
id: ‘id’,
datatype: ‘json’,

};

const dataAdapter = new jqx.dataAdapter(source, { autoBind: true });
const records = dataAdapter.getRecordsHierarchy(‘id’, ‘ParentId’, ‘items’, [{ name: ‘Title’, map: ‘label’ }]);

useEffect(() => {
BindTreeSemat()

},[]);

//bindtree
function BindTreeSemat() {
fetch(‘http://localhost:59521/api/Charts/SelectCompany_Charts’)
.then((response) => {
if (response.ok) {
const data = response.json()

.then(data =>
setSource(source => ({
…source,
localdata: data
})))
console.log(setSource)
} else {
throw Error(response.status);
}
})

}

return (
<Tree
source={source}

/>
);

}

[kashehiParticipant]

I correct my code but the problem is that all nodes on tree are in the same level ad parent not in diffrent level of parent and child
would you please tell me what is my problem?

export function PostTree() {

const [source, setSource] = useState({
datafields: [
{ name: ‘id’,map: ‘Id’},
{ name: ‘parentid’ },
{ name: ‘Title’ },

],
id: ‘id’,
datatype: ‘json’,

});

const dataAdapter = new jqx.dataAdapter(source, { autoBind: true });
const records = dataAdapter.getRecordsHierarchy(‘id’, ‘ParentId’, ‘items’, [{ name: ‘Title’, map: ‘label’ }]);

useEffect(() => {
BindTreeSemat()

},[]);

//bindtree
function BindTreeSemat() {
fetch(‘http://localhost:59521/api/Charts/SelectCompany_Charts’)
.then((response) => {
if (response.ok) {
const data = response.json()

.then(data =>
setSource(source => ({
…source,
localdata: data
})))
console.log(setSource)
} else {
throw Error(response.status);
}
})

}

return (
<JqxTree
source={records}

/>
);

}

[svetoslav_borislavovParticipant]

Hi,

I can see that your source has got data fields and in the array, you have a parentid field.
On this line: const records = dataAdapter.getRecordsHierarchy(‘id’, ‘ParentId’, ‘items’, [{ name: ‘Title’, map: ‘label’ }]);
you can see that you have ParentId, which should match the data field name -> parentid

If this does not fix the error, please send a demo here support@jqwidgets.com

Best regards,
Svetoslav Borislavov

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

[Author]

Posts