jQuery UI Widgets Forums Getting Started React Tree Grid

This topic contains 1 reply, has 2 voices, and was last updated by  svetoslav_borislavov 7 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • React Tree Grid #133783

    Harish_Telanakula
    Participant

    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.

    React Tree Grid #133799

    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/

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

You must be logged in to reply to this topic.