New to KendoReact? Start a free 30-day trial

handleTreeViewCheckChange

Function

Definition

Package:@progress/kendo-react-treeview

Syntax:

jsx

const App = () => {
   const [check, setCheck] = React.useState([]);
   const [items] = React.useState(tree);

   const onCheckChange = (event) => {
       setCheck(handleTreeViewCheckChange(event, check, items));
   }

   return (
       <div>
           <TreeView
               checkboxes={true} onCheckChange={onCheckChange}
               data={processTreeViewItems(items, { check })}
           />
           <div style={{ marginTop: 5 }}>
               <i>Press SPACE to check/uncheck the active item</i>
               <div className="example-config">
                   Checked Indices: {check.join(",")}
               </div>
           </div>
       </div>
   );
}

const tree = [ {
   text: 'Furniture', expanded: true, items: [
       { text: 'Tables & Chairs' }, { text: 'Sofas' }, { text: 'Occasional Furniture' } ]
}, {
   text: 'Decor', expanded: true, items: [
       { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' } ]
} ];

handleTreeViewCheckChange

A helper function which updates the check descriptor.

Parameters:eventTreeViewExpandChangeEvent

The event that triggered the change.

checkstring[] | TreeViewCheckDescriptor

The check descriptor that will be updated.

data?null | any[]

The TreeView items.

settingsTreeViewCheckChangeSettings

The additional settings that configure the update of the check descriptor.

childrenField?string

The field that points to the dataItem sub items. Defaults to items. The default behavior allows the selection of multiple items.

Returns:

any[] | TreeViewCheckDescriptor intersected with { ids: any[] }

The updated copy of the input check descriptor.