The checked property on the TreeViewCheckChangeEvent.item is not synchronized with UI action

[Klaus]

I am evaluating the KendoUI TreeView using this code snippet:

<TreeView
    data={processTreeViewItems(workspaceGroups.current, {
      select: select,
      check: check,
      expand: expand,
    })}
    focusIdField={"id"}
    draggable={true}
    expandIcons={true}
    onExpandChange={onItemExpansionChanged}
    aria-multiselectable={true}
    onItemClick={onLayerItemClicked}
    checkboxes={true}
    onCheckChange={onItemCheckedChanged}
/>

I have declared a few constants and eventhandlers as follows:

function App() {


    const [check, setCheck] = React.useState({
        ids: ["100"],
        idField: "id",
    });
    const [expand, setExpand] = useState({
        ids: ["PROJECT WORKSPACES (5)", "Site Access Plan (8)"],
        idField: "text",
    });
    const [select, setSelect] = useState({
        ids: ["100"],
        idField: "id",
    });

I am having issues retrieving the correct value of the checked property from event.item in the onItemCheckedChange handler that looks like this:

const onLayerVisibilityChanged = (event: TreeViewCheckChangeEvent) => {

console.info("tree node checked or unchecked!!!")
const settings = {
singleMode: false,
checkChildren: true,
checkParents: false,
};

debugger

     // if the UI checkbox is clicked, this value is false.
     // if the checkbox is unclicked, this value is true. It seems to be delayed.
     console.info(event.item.checked)

};

 

What am I missing?  I am using KendoUI TreeView 8.5.0.

[Ina]

Hello, Klaus,

Thank you for reaching out to us.

To get the reference to the actual object, within the `onCheckChange` event you have access to the index of the checked item and to the actual data item:

• https://www.telerik.com/kendo-react-ui/components/treeview/api/TreeViewProps/#toc-oncheckchange 
• https://www.telerik.com/kendo-react-ui/components/treeview/api/TreeViewCheckChangeEvent/ 

Within the `onCheckChange` event you have access to the clicked data item:

  const onCheckChange = (event) => {
    alert(event.item.text);
    ...
  };

If the item was previously checked, the `event.item.checked` is going to be true.

You can also check the following article, explaining more about the TreeView items checking:

https://www.telerik.com/kendo-react-ui/components/treeview/checkboxes/check-all/#toc-updating-items-directly 

If further assistance is needed or if I misunderstood the requirement, please do not hesitate to contact us again.

Regards,
Ina
Progress Telerik