Checkboxes in React Tree.
A live React example of jqxTree, the jQWidgets Tree component, with its complete source code below. It is one of 13 jqxTree demos for React.
checkboxes property – Sets or gets whether the tree should display a checkbox next to each item.height property – Sets or gets the tree's height.hasThreeStates property – Sets or gets whether the tree checkboxes have three states - checked, unchecked and indeterminate.theme property – Sets the widget's theme.width property – Sets or gets the tree's width.checkItem method – Checks a tree item.expandItem method – Expands a tree item by passing an element as parameter.selectItem method – Selects an item.uncheckItem method – Unchecks a tree item.To run it in your own app, install the package with npm install jqwidgets-scripts, add these files to a Vite React and TypeScript project, and import jqx.base.css and a theme in main.tsx. Getting started with jqxTree shows the setup step by step.
import React, { useRef, useState, useEffect, useCallback } from 'react';
import JqxCheckBox, { type ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
import JqxTree from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
interface JqxTreeRef {
selectItem: (item: HTMLLIElement | null) => void;
expandItem: (item: HTMLLIElement | null) => void;
checkItem: (item: HTMLLIElement | null, checked: boolean) => void;
uncheckItem: (item: Element | null) => void;
}
function App() {
const myTree = useRef<JqxTree & JqxTreeRef>(null);
const home = useRef<HTMLLIElement>(null);
const solutions = useRef<HTMLLIElement>(null);
const [checked, setChecked] = useState<ICheckBoxProps['checked']>(true);
const [hasThreeStates, setHasThreeStates] = useState<boolean>(true);
useEffect(() => {
if (myTree.current && home.current && solutions.current) {
myTree.current.selectItem(home.current);
myTree.current.expandItem(solutions.current);
myTree.current.checkItem(solutions.current, true);
myTree.current.uncheckItem(document.querySelector('#manufacturing'));
}
}, []);
const myCheckBoxOnChange = useCallback(
(event: { args: { checked: boolean } }) => {
setChecked(event.args.checked);
setHasThreeStates(event.args.checked);
},
[]
);
const marginTop: React.CSSProperties = { marginTop: '10px' };
return (
<div>
<JqxTree
theme="tailwind-blue-dark"
ref={myTree}
style={{ marginLeft: '20px', float: 'left' }}
hasThreeStates={hasThreeStates}
checkboxes={true}
width={300}
height={450}
>
<ul>
<li ref={home}>Home</li>
<li ref={solutions}>
Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li id="manufacturing">Manufacturing</li>
<li>
Solutions
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing</li>
</ul>
</li>
<li>All industries and solutions</li>
</ul>
</li>
<li>
Products
<ul>
<li>PC products</li>
<li>Mobile products</li>
<li>All products</li>
</ul>
</li>
<li>
Support
<ul>
<li>Support home</li>
<li>Customer Service</li>
<li>Knowledge base</li>
<li>Books</li>
<li>Training and certification</li>
<li>Support programs</li>
<li>Forums</li>
<li>Documentation</li>
<li>Updates</li>
</ul>
</li>
<li>
Communities
<ul>
<li>Designers</li>
<li>Developers</li>
<li>Educators and students</li>
<li>Partners</li>
<li>
By resource
<ul>
<li>Labs</li>
<li>TV</li>
<li>Forums</li>
<li>Exchange</li>
<li>Blogs</li>
<li>Experience Design</li>
</ul>
</li>
</ul>
</li>
<li>
Company
<ul>
<li>About Us</li>
<li>Press</li>
<li>Investor Relations</li>
<li>Corporate Affairs</li>
<li>Careers</li>
<li>Showcase</li>
<li>Events</li>
<li>Contact Us</li>
<li>Become an affiliate</li>
</ul>
</li>
</ul>
</JqxTree>
<div style={{ marginLeft: '60px', float: 'left' }}>
<div style={marginTop}>
<JqxCheckBox
theme="tailwind-blue-dark"
onChange={myCheckBoxOnChange}
checked={checked}
>
Three Check States
</JqxCheckBox>
</div>
</div>
</div>
);
}
export default App;