jeudi 18 mai 2023

How to load the children on demand in react checkbox tree along with virtual scrolling

            import React, { us
eState } from 'react';
                import CheckboxTree from 'react-checkbox-tree';
                import 'react-checkbox-tree/lib/react-checkbox-tree.css';
                import { List } from 'react-virtualized';
                import 'react-virtualized/styles.css';
                import {
                MdCheckBox,
                MdCheckBoxOutlineBlank,
                MdChevronRight,
                MdKeyboardArrowDown,
                MdAddBox,
                MdIndeterminateCheckBox,
                } from "react-icons/md";

                const VirtualizedCheckboxTree = () => {
                const [treeData, setTreeData] = useState([
                    {
                    value: 'node1',
                    label: 'Node 1',
                    children: [], // Initially empty
                    },
                    {
                    value: 'node2',
                    label: 'Node 2',
                    children: [], // Initially empty
                    },
                    {
                    value: 'node3',
                    label: 'Node 3',
                    children: [], // Initially empty
                    },
                ]);

                const orgNodeIcons = {
                    check: <MdCheckBox className="rct-icon rct-icon-check" />,
                    uncheck: <MdCheckBoxOutlineBlank className="rct-icon rct-icon-uncheck" />,
                    halfCheck: (
                    <MdIndeterminateCheckBox className="rct-icon rct-icon-half-check" />
                    ),
                    expandClose: <MdChevronRight className="rct-icon rct-icon-expand-close" />,
                    expandOpen: <MdKeyboardArrowDown className="rct-icon rct-icon-expand-open" />,
                    expandAll: <MdAddBox className="rct-icon rct-icon-expand-all" />,
                    collapseAll: (
                    <MdIndeterminateCheckBox className="rct-icon rct-icon-collapse-all" />
                    ),
                    parentClose: <></>,
                    parentOpen: <></>,
                    leaf: <></>,
                };
                const handleLoadMore = (parentNode) => {
                    // Simulate loading data from an API
                    setTimeout(() => {
                    const updatedTreeData = [...treeData];
                    const parentIndex = updatedTreeData.findIndex(
                        (node) => node.value === parentNode[0]
                    );

                    if (parentIndex !== -1) {
                        // Dynamically add children nodes
                        const children = [
                        { value: 'newNode1', label: 'New Node 1' },
                        { value: 'newNode2', label: 'New Node 2' },
                        ];

                        updatedTreeData[parentIndex].children = children;

                        setTreeData(updatedTreeData);
                    }
                    }, 1000);
                };

                const rowRenderer = ({ key, index, style }) => (
                    <div key={key} style={style}>
                    <CheckboxTree
                        nodes={treeData}
                        checked={[]}
                        expanded={[]}
                        onExpand={handleLoadMore}
                        showExpandAll
                        icons={orgNodeIcons}

                    />
                    </div>
                );

                return (
                    <div style=>
                    <List
                        width={300}
                        height={400}
                        rowCount={1}
                        rowHeight={400}
                        rowRenderer={rowRenderer}
                    />
                    </div>
                );
                };

                export default VirtualizedCheckboxTree;

` In the above example i tried to add the children when user click on the expand icon but iam getting the below error

enter image description here

Help me with a working example to load the children on demand and also achieve the virtual scrolling

Help me with a working example to load the children on demand and also achieve the virtual scrolling

`




Aucun commentaire:

Enregistrer un commentaire