New to KendoReact? Start a free 30-day trial
MultiSelectTree
Represents the MultiSelectTree component.
Accepts properties of type MultiSelectTreeProps.
Obtaining the ref
returns an object of type MultiSelectTreeHandle.
jsx
const dataItemKey = 'id';
const checkField = 'checkField';
const checkIndeterminateField = 'checkIndeterminateField';
const subItemsField = 'items';
const expandField = 'expanded';
const textField = 'text';
const fields = {
dataItemKey,
checkField,
checkIndeterminateField,
expandField,
subItemsField,
};
const App = () => {
const [value, setValue] = React.useState([]);
const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
const onChange = (event) =>
setValue(
getMultiSelectTreeValue(data, {
...fields,
...event,
value,
})
);
const onExpandChange = React.useCallback(
(event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
[expanded]
);
const treeData = React.useMemo(
() =>
processMultiSelectTreeData(data, {
expanded,
value,
...fields,
}),
[expanded, value]
);
return (
<div>
<div>Categories:</div>
<MultiSelectTree
style={{
width: '300px',
}}
data={treeData}
value={value}
onChange={onChange}
placeholder="Please select ..."
textField={textField}
dataItemKey={dataItemKey}
checkField={checkField}
checkIndeterminateField={checkIndeterminateField}
expandField={expandField}
subItemsField={subItemsField}
onExpandChange={onExpandChange}
/>
</div>
);
};
ReactDOM.render(<App />, document.querySelector('my-app'));
Name | Type | Default | Description |
---|---|---|---|
props |
|
The props of the MultiSelectTree component. |