Updating the source for a jqxTree

[nepalmerParticipant]

Hi,
I’m exploring using the jQWidgets and I’m trying to figure out how to update the source for the jqxTree.

I can successfully populate the initial contents using the example, but I’m trying to understand how to update the source on demand, say the user makes a selection.

For example in my test I’ve got this

{/* @ts-ignore */}
<JqxDropDownList ref={myDimensionListBox}
theme={‘office’}
onChange={onDimensionSelected}
width={200} height={25}
source={source} selectedIndex={selectedDimension} />
{/* @ts-ignore */}
<JqxTree ref={myTree}
theme={‘office’}
source={treeSRC}
allowDrag={false}
onSelect={onTreeSelect}
width={“100%”} height={“80%”}>
</JqxTree>

So in the onDimensionSelected function I’d like to set the source for the tree.

What would be the process to do that?

Also, I’m relatively new to using React so this maybe something simple that I’m not familiar with yet.

Thanks

[svetoslav_borislavovParticipant]

Hi,

Here is an example of changing the source of the tree.
When the dropdown fires a change, you are updating the state of the index
then in a useEffect you should get the new data, create a new source for it, create a new adapter and set the state for the new adapter.
(New source and new adapter is created because the new data may contain different fields).

import { useRef } from ‘react’;
import ‘./App.css’;

import JqxDropDownList from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist’;
import JqxTree, { jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxtree’;
import { useState } from ‘react’;
import { useEffect } from ‘react’;

const defaultTreeData = [
{
‘id’: ‘2’,
‘parentid’: ‘1’,
‘text’: ‘Hot Chocolate’,
‘value’: ‘$2.3’
}, {
‘id’: ‘3’,
‘parentid’: ‘1’,
‘text’: ‘Peppermint Hot Chocolate’,
‘value’: ‘$2.3’
}, {
‘id’: ‘4’,
‘parentid’: ‘1’,
‘text’: ‘Salted Caramel Hot Chocolate’,
‘value’: ‘$2.3’
}, {
‘id’: ‘5’,
‘parentid’: ‘1’,
‘text’: ‘White Hot Chocolate’,
‘value’: ‘$2.3’
}, {
‘id’: ‘1’,
‘parentid’: ‘-1’,
‘text’: ‘Chocolate Beverage’,
‘value’: ‘$2.3’
}, {
‘id’: ‘6’,
‘parentid’: ‘-1’,
‘text’: ‘Espresso Beverage’,
‘value’: ‘$2.3’
}, {
‘id’: ‘7’,
‘parentid’: ‘6’,
‘text’: ‘Caffe Americano’,
‘value’: ‘$2.3’
}, {
‘id’: ‘8’,
‘parentid’: ‘6’,
‘text’: ‘Caffe Latte’,
‘value’: ‘$2.3’
}, {
‘id’: ‘9’,
‘parentid’: ‘6’,
‘text’: ‘Caffe Mocha’,
‘value’: ‘$2.3’
}, {
‘id’: ’10’,
‘parentid’: ‘6’,
‘text’: ‘Cappuccino’,
‘value’: ‘$2.3’
}, {
‘id’: ’11’,
‘parentid’: ‘6’,
‘text’: ‘Pumpkin Spice Latte’,
‘value’: ‘$2.3’
}, {
‘id’: ’12’,
‘parentid’: ‘-1’,
‘text’: ‘Frappuccino’
}, {
‘id’: ’13’,
‘parentid’: ’12’,
‘text’: ‘Caffe Vanilla Frappuccino’,
‘value’: ‘$2.3’
}, {
‘id’: ’15’,
‘parentid’: ’13’,
‘text’: ‘450 calories’,
‘value’: ‘$2.3’
}, {
‘id’: ’16’,
‘parentid’: ’13’,
‘text’: ’16g fat’,
‘value’: ‘$2.3’
}, {
‘id’: ’17’,
‘parentid’: ’13’,
‘text’: ’13g protein’,
‘value’: ‘$2.3’
}, {
‘id’: ’14’,
‘parentid’: ’12’,
‘text’: ‘Caffe Vanilla Frappuccino Light’,
‘value’: ‘$2.3’
}
]

const chocolateData = [
{
‘id’: ‘1’,
‘parentid’: ‘-1’,
‘text’: ‘Chocolate Beverage’,
‘value’: ‘$2.3’
}, {
‘id’: ‘2’,
‘parentid’: ‘1’,
‘text’: ‘Hot Chocolate’,
‘value’: ‘$2.3’
}, {
‘id’: ‘3’,
‘parentid’: ‘1’,
‘text’: ‘Peppermint Hot Chocolate’,
‘value’: ‘$2.3’
}, {
‘id’: ‘4’,
‘parentid’: ‘1’,
‘text’: ‘Salted Caramel Hot Chocolate’,
‘value’: ‘$2.3’
}, {
‘id’: ‘5’,
‘parentid’: ‘1’,
‘text’: ‘White Hot Chocolate’,
‘value’: ‘$2.3’
}]
const espressoData = [{
‘id’: ‘6’,
‘parentid’: ‘-1’,
‘text’: ‘Espresso Beverage’,
‘value’: ‘$2.3’
}, {
‘id’: ‘7’,
‘parentid’: ‘6’,
‘text’: ‘Caffe Americano’,
‘value’: ‘$2.3’
}, {
‘id’: ‘8’,
‘parentid’: ‘6’,
‘text’: ‘Caffe Latte’,
‘value’: ‘$2.3’
}, {
‘id’: ‘9’,
‘parentid’: ‘6’,
‘text’: ‘Caffe Mocha’,
‘value’: ‘$2.3’
}, {
‘id’: ’10’,
‘parentid’: ‘6’,
‘text’: ‘Cappuccino’,
‘value’: ‘$2.3’
}, {
‘id’: ’11’,
‘parentid’: ‘6’,
‘text’: ‘Pumpkin Spice Latte’,
‘value’: ‘$2.3’
}]
const frappuchinoData = [{
‘id’: ’12’,
‘parentid’: ‘-1’,
‘text’: ‘Frappuccino’
}, {
‘id’: ’13’,
‘parentid’: ’12’,
‘text’: ‘Caffe Vanilla Frappuccino’,
‘value’: ‘$2.3’
}, {
‘id’: ’15’,
‘parentid’: ’13’,
‘text’: ‘450 calories’,
‘value’: ‘$2.3’
}, {
‘id’: ’16’,
‘parentid’: ’13’,
‘text’: ’16g fat’,
‘value’: ‘$2.3’
}, {
‘id’: ’17’,
‘parentid’: ’13’,
‘text’: ’13g protein’,
‘value’: ‘$2.3’
}, {
‘id’: ’14’,
‘parentid’: ’12’,
‘text’: ‘Caffe Vanilla Frappuccino Light’,
‘value’: ‘$2.3’
}]

function App() {

const myTree = useRef()
const myDimensionListBox = useRef()

const [treeAdapter, setTreeAdapter] = useState();

const [selectedDimension, setSelectedDimension] = useState();

useEffect(() => {

let data = []

switch (selectedDimension) {
case 0:
data = chocolateData
break;
case 1:
data = espressoData
break;
case 2:
data = frappuchinoData
break;
default:
data = defaultTreeData
break;
}
const treeSource = {
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ },
{ name: ‘value’ }
],
id: ‘id’,
localdata: data
}

const adapter = new jqx.dataAdapter(treeSource, { autoBind: true })
setTreeAdapter(adapter)

}, [selectedDimension])

const source = [
“Chocolate”,
“Espresso”,
“Frappuchino”
]

const onDimensionSelected = (e) => {
const newIndex = e.args.index;

setSelectedDimension(newIndex)
}

const onTreeSelect = (e) => {

}

const records = treeAdapter
?.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’ }]) || [];

return (
<div className=”application”>
<JqxDropDownList
ref={myDimensionListBox}
onChange={onDimensionSelected}
selectedIndex={selectedDimension}
width={200} height={25}
source={source}
/>
<JqxTree
ref={myTree}
source={records}
allowDrag={false}
onSelect={onTreeSelect}
width={“100%”}
height={“80%”}
>
</JqxTree>
</div >
);

}

export default App;

Best regards,
Svetoslav Borislavov

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

[Author]

Posts