Styling the checkbox on the Kendo UI React TreeView

[Klaus]

Hello, I am trying to customize each node in the Kendo UI React Treeview. So far my code looks like this:

    <TreeView
        className={"margin-top-15"}
        data={processTreeViewItems(contextualWorkspaceGroups, {
            //select: selectedLayer,
            //check: check,
            //expand: expandedWorkspace,
        })}
        focusIdField={"id"}
        draggable={false}
        expandIcons={false}
        item={customContextualLegendItemRenderer}
        onExpandChange={onLayerExpansionChanged}
        aria-multiselectable={true}
        onItemClick={OnLayerItemSelected}
        checkboxes={true}
        onCheckChange={onLayerVisibilityChanged}
    />
</div>

where the item template is defined as follows:

const customContextualLegendItemRenderer = ( props : any ) => {
    return (
        <div className={'contextualLegendItem'}>
            <SvgIcon className={"contextualLegendItemTypeIcon"} icon={aggregateFieldsIcon}/>
            <span className={"contextualLegendItemTypeText"}>{"Workflow"}</span>
            <span className={"contextualLegendItemText"}>{props.item.text}</span>
            <Label className={"contextualLegendItemStatusLabel"}>{props.item.status}</Label>
        </div>
    );
};

That seems to work, but I also need to control the checkbox's location and style. How do I do this?  

[Vessy]

Hi,

To control the location and style of the checkboxes in the KendoReact TreeView, you can extend your custom renderer to include and style the checkbox directly. Here’s how you can achieve this:

• Include the Checkbox in the Custom Renderer: You can manually add a checkbox input element within your custom renderer function. This allows you to have full control over its position and appearance.

• Style the Checkbox: Apply custom styles to the checkbox as needed to achieve the desired look and feel.

Here's an updated version of your customContextualLegendItemRenderer function to include and style a checkbox:

• https://stackblitz.com/edit/react-x3cqkm-ejzjhh?file=app%2Fapp.jsx,index.html 
  

    const customContextualLegendItemRenderer = (props) => {
      const handleCheckboxChange = (event) => {
        // Propagate the checkbox change event
        if (props.onCheckChange) {
          props.onCheckChange({
            item: props.item,
            checked: event.target.checked,
          });
        }
      };
  
      return (
        <div className="contextualLegendItem">
          <input
            type="checkbox"
            checked={props.item.checked || false}
            onChange={handleCheckboxChange}
            className="custom-checkbox"
          />
          <SvgIcon
            className="contextualLegendItemTypeIcon"
            icon={aggregateFieldsIcon}
          />
          <span className="contextualLegendItemTypeText">{'Workflow'}</span>
          <span className="contextualLegendItemText">{props.item.text}</span>
          <Label className="contextualLegendItemStatusLabel">
            {props.item.status}
          </Label>
        </div>
      );
    };

• Custom Styles: Add CSS styles to position and style the checkbox as desired. For example:

.custom-checkbox {
  margin-right: 10px; /* Adjust the spacing */
  /* Add more styles as needed */
}

By embedding the checkbox within your custom item renderer, you gain full control over its styling and positioning. Make sure to handle the checkbox state appropriately by using the onCheckChange handler to update the state when a checkbox is checked or unchecked.

For more information on custom rendering in the TreeView, you can refer to the following resource:

• https://www.telerik.com/kendo-react-ui/components/treeview/custom-rendering/

Regards,

Vessy
Progress Telerik

[Klaus]

That worked, thank you. 

 

[Vessy]

You are most welcome, Klaus :)