React Tree Grid

[Harish_TelanakulaParticipant]

Hi Team,

We are working on jqwidgets treegrid for our requirement. We are using react for that. We are having more than 100 rows in the tree grid .When we do rowclick we are doing setstate to perform some operations. When I do the setstate immediately the row what ever I selected is moving to top or bottom(screen is jumping duw to rerender) . Can you please suggest some workaround for that.

[svetoslav_borislavovParticipant]

Hi,

Could you please send us a code that reproduces the error.
Here is a simple component that sets state whenever the selection is changed:
import { useState } from “react”;
import JqxTreeGrid, {
jqx,
} from “jqwidgets-scripts/jqwidgets-react-tsx/jqxtreegrid”;

const Tree = () => {
const [data, setData] = useState(generateordersdata(100));

const [columns, setColumns] = useState([
{ align: “center”, dataField: “name”, text: “Order Name”, width: 220 },
{ align: “center”, dataField: “customer”, text: “Customer”, width: 200 },
{
align: “center”,
cellsAlign: “right”,
cellsFormat: “c2”,
dataField: “price”,
text: “Price”,
width: 80,
},
{
align: “center”,
cellsFormat: “dd-MMMM-yyyy hh:mm”,
cellsRenderer: (rowKey, column, cellValue, rowData, cellText) => {
if (rowData.level === 0) {
return dataAdapter.formatDate(cellValue, “dd-MMMM-yyyy”);
}
return cellText;
},
dataField: “date”,
text: “Order Date”,
},
]);

const [selectedIndex, setSelectedIndex] = useState(-1);

const source = {
dataFields: [
{ name: “name”, type: “string” },
{ name: “quantity”, type: “number” },
{ name: “id”, type: “string” },
{ name: “parentid”, type: “number” },
{ name: “price”, type: “number” },
{ name: “date”, type: “date” },
{ name: “customer”, type: “string” },
],
dataType: “array”,
hierarchy: {
keyDataField: { name: “id” },
parentDataField: { name: “parentid” },
},
id: “id”,
localData: data,
};
const dataAdapter = new jqx.dataAdapter(source);

const handleRowSelect = (e) => {
setSelectedIndex(e.args.boundIndex);
};

return (
<>
<p>Selected index: {selectedIndex}</p>
<JqxTreeGrid
width={“90%”}
height={“auto”}
source={dataAdapter}
pageable={true}
sortable={true}
columns={columns}
onRowSelect={handleRowSelect}
/>
</>
);
};

export default Tree;

export function generateordersdata(rowscount) {
// prepare the data
let data = new Array();
if (rowscount == undefined) rowscount = 10;
let firstNames = [
“Andrew”,
“Nancy”,
“Shelley”,
“Regina”,
“Yoshi”,
“Antoni”,
“Mayumi”,
“Ian”,
“Peter”,
“Lars”,
“Petra”,
“Martin”,
“Sven”,
“Elio”,
“Beate”,
“Cheryl”,
“Michael”,
“Guylene”,
];

let lastNames = [
“Fuller”,
“Davolio”,
“Burke”,
“Murphy”,
“Nagase”,
“Saavedra”,
“Ohno”,
“Devling”,
“Wilson”,
“Peterson”,
“Winkler”,
“Bein”,
“Petersen”,
“Rossi”,
“Vileid”,
“Saylor”,
“Bjorn”,
“Nodier”,
];

let productNames = [
“Black Tea”,
“Green Tea”,
“Caffe Espresso”,
“Doubleshot Espresso”,
“Caffe Latte”,
“White Chocolate Mocha”,
“Caramel Latte”,
“Caffe Americano”,
“Cappuccino”,
“Espresso Truffle”,
“Espresso con Panna”,
“Peppermint Mocha Twist”,
];

let priceValues = [
“2.25”,
“1.5”,
“3.0”,
“3.3”,
“4.5”,
“3.6”,
“3.8”,
“2.5”,
“5.0”,
“1.75”,
“3.25”,
“4.0”,
];

let companyNames = [
“Dolor Foundation”,
“Vivamus Non Lorem LLP”,
“Vel Ltd”,
“Turpis Incorporated”,
“Egestas Nunc PC”,
“At Pretium Aliquet Associates”,
“Feugiat Inc.”,
“Lacus Industries”,
“Senectus Et Foundation”,
“Sed LLC”,
“Maecenas Mi Felis LLC”,
“Pede Blandit Ltd”,
“Pellentesque Habitant Morbi Institute”,
“Mollis Vitae Industries”,
“Malesuada Vel Convallis LLP”,
“Risus Duis Corp.”,
“Convallis LLP”,
“Lobortis Augue LLC”,
“Auctor LLP”,
“Neque Inc.”,
“Lorem Eu Corporation”,
];

for (let i = 0; i < rowscount; i++) {
let row = {};
let productindex = Math.floor(Math.random() * productNames.length);
let price = parseFloat(priceValues[productindex]);
let quantity = 2 + Math.round(Math.random() * 10);

row[“id”] = i;
row[“parentid”] = null;
row[“name”] = “Order ” + i;
row[“firstname”] =
firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“customer”] =
companyNames[Math.floor(Math.random() * companyNames.length)];
let date = new Date();
let month = Math.floor(Math.random() * 11);
let day = Math.floor(Math.random() * 27);
date.setFullYear(2016, month, day);
date.setHours(0, 0, 0, 0);
row[“date”] = date;
row[“price”] = “”;
row[“quantity”] = “”;
data.push(row);

let subRowsCount = 1 + Math.round(Math.random() * 8);
let t = 0;
let q = 0;
for (let j = 0; j < subRowsCount; j++) {
let subRow = {};
let productindex = Math.floor(Math.random() * productNames.length);
let price = parseFloat(priceValues[productindex]);
let quantity = 1;
subRow[“name”] = productNames[productindex];
subRow[“id”] = “” + i + “.” + (1 + j);
subRow[“parentid”] = i;
subRow[“price”] = price;
subRow[“quantity”] = 1;
let date = new Date();
date.setFullYear(2016, month, day);
date.setHours(
Math.floor(Math.random() * 23),
Math.floor(Math.random() * 59),
0,
0
);
subRow[“date”] = date;
row[“firstname”] =
firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
subRow[“customer”] = row[“firstname”] + ” ” + row[“lastname”];
t += quantity * price;
data.push(subRow);
q += quantity;
}
row[“price”] = t;
row[“quantity”] = 1;
}

return data;
}

Best regards,
Svetoslav Borislavov

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

[Author]

Posts