Enabling single selection mode on the Kendo UI TreeView

1 Answer 55 Views

TreeView

Klaus asked on 07 Dec 2024, 08:23 PM

Hello, I am trying to enable single selection mode on the Kendo UI TreeView and update the styling of each node as the item is selected. However, I am running into a few challenges. I am working in TypeScript. I have looked at all the examples and while simple, they simple do not work as listed unless I am missing something.

My TreeView is configured like this:

const [selectedLayer, setSelectedLayer] = useState(['']);
const OnLayerItemSelected = (event: TreeViewItemClickEvent) => {

    const selectedItemId = String(event.item.id);
    setSelectedLayer([ids]);
 
    const item = event.item;
    item.selected = !item.selected;
// other code 
}
 
<TreeView
    className={"margin-top-5 margin-left-minus-2p5em"}
    data={nonContextualWorkspaceGroups}
    item={(props) =>
_CustomNonContextualLegendItemRenderer({
            ...props,
onCheckChange: onLayerVisibilityChanged,
        })}
    selectField={"selected"}
    draggable={true}
    expandIcons={false}
    checkboxes={false}

    aria-multiselectable = {false}
    onExpandChange={onLayerExpansionChanged}
    onCheckChange={onLayerVisibilityChanged}
    onItemClick={OnLayerItemSelected}
/>

With the above code, my application crashes with this error:

If I instead do this pasted below, the application does not crash but single select mode is not enabled and a selected node in the tree looks like this:


const [selectedLayer, setSelectedLayer] = useState({
    ids: ["100"],
    idField : "id"
});

const OnLayerItemSelected = (event: TreeViewItemClickEvent) => {

    const selectedItemId = String(event.item.id);
    setSelectedLayer({ids : [selectedItemId], idField:'id'});
 
    const item = event.item;
    item.selected = !item.selected;
// other code 
}

<TreeView
    className={"margin-top-5 margin-left-minus-2p5em"}
   data={processTreeViewItems(nonContextualWorkspaceGroups, {
select: selectedLayer,
//check: visibleLayers,
        //expand: expandedWorkspace,
    })}
    item={(props) =>
_CustomNonContextualLegendItemRenderer({
            ...props,
onCheckChange: onLayerVisibilityChanged,
        })}
    selectField={"selected"}
    draggable={true}
    expandIcons={false}
    checkboxes={false}

    aria-multiselectable = {false}
    onExpandChange={onLayerExpansionChanged}
    onCheckChange={onLayerVisibilityChanged}
    onItemClick={OnLayerItemSelected}
/>

Enabling single selection mode on the Kendo UI TreeView

1 Answer, 1 is accepted