Jqxtree select event

[kashehiParticipant]

hi, I have tree on my react project,In my previous app I used jqxwidgets scripts and this code work for me to get some data of tree elemen.
$(‘#jqxTree’).on(‘rowSelect’, function (event) {
var args = event.args;
var row = args.row;
selectedNode = row;
var label = selectedNode.Title;
parentNodeID = selectedNode.ParentId;
$(“#Archive_Name”).val(label);
if (eshterak) {
Ajax2(“ArchiveTypes/FetchUserShareTypeArchive”, { ArchiveTypeID: selectedNode.ArchiveTypeId.split(“:”)[1] }, SuccessFetchUserShareTypeArchive, function () { alert(“error”); }, “get”);
}
});

But now I need that code in react, would you please help me?
thank you

[svetoslav_borislavovParticipant]

Hi,

Here you are:
import JqxTree, { jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxtree’;
import { useState } from ‘react’;
import { useEffect } from ‘react’;

const initialData = [
{
‘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’
}
];

function KashehiComponent() {

const [records, setRecords] = useState([]);
const [selectedNode, setSelectedNode] = useState(null);
const [parentNodeID, setParentNodeID] = useState(null);

useEffect(() => {

const source = {
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ },
{ name: ‘value’ }
],
datatype: ‘json’,
id: ‘id’,
localdata: initialData
};
const dataAdapter = new jqx.dataAdapter(source, { autoBind: true });

setRecords(dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’ }]))
}, []);

useEffect(() => {
setParentNodeID(selectedNode.ParentId);
}, [selectedNode])

const onSelect = (e) => {
const args = e.args;

const row = args.row;

setSelectedNode(row)
// selectedNode = row;

// parentNodeID = selectedNode.ParentId;

const label = selectedNode.Title;

const Archive_Name = document.querySelector(‘#Archive_Name’)

if (Archive_Name) {
Archive_Name.value = label
}
// $(“#Archive_Name”).val(label);

if (eshterak) {
// Ajax2(
// “ArchiveTypes/FetchUserShareTypeArchive”,
// { ArchiveTypeID: selectedNode.ArchiveTypeId.split(“:”)[1] },
// SuccessFetchUserShareTypeArchive,
// function () { alert(“error”); },
// “get”
// );

const bodyData = { ArchiveTypeID: selectedNode.ArchiveTypeId.split(“:”)[1] };

fetch(“ArchiveTypes/FetchUserShareTypeArchive”, {
method: ‘GET’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify(bodyData)
})
.then(res => res.json())
.then(SuccessFetchUserShareTypeArchive)
.catch(err => alert(‘error’))
}
}
return (
<div className=”application”>
<JqxTree
source={records}
width={400}
onItemClick={onSelect}
/>
</div >
);

}

export default KashehiComponent;

I hope this helps!

Best regards,
Svetoslav Borislavov

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

[kashehiParticipant]

Hi,Thank you for response, But my problem is that when I click on tree item and “onselect” method is run
const row = args.row;
is undefiend, I dont know Why is happened,Would you please help me?
thank you

[svetoslav_borislavovParticipant]

Hi,

My apologies, in the onSelect handler, you should get the selected item this way:

const args = e.args;
const item = treeRef.current.getItem(args.element);

setSelectedNode(item)

I hope this now helps!

Best regards,
Svetoslav Borislavov

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

[kashehiParticipant]

Thank you,
I did that but my problem was:
the object that return just lable and automated id,I need all of property related to item, as the same as json fields
like:
‘id’: ’10’,
‘parentid’: ‘6’,
‘text’: ‘Cappuccino’,
‘value’: ‘$2.3’
thank you

[kashehiParticipant]

It is better to say How can I get return id from json not id that return from element of tree?

Thank You

[kashehiParticipant]

I found my problem, I should use
datafields: [{name: ‘id‘}, {name: ‘parentid‘}
not datafields: [{name: ‘Id‘}, {name: ‘ParentId‘}

[adminKeymaster]

Thanks for the update

[Author]

Posts