How can I customize the design of a Kendo UI Drawer?

[Tejas]

I have a drawer design like this. I'm trying to create it, but I don't know how to design this kind of image. I am use Kendo react drawer

 

const CustomItem = (props: DrawerItemProps) => {

  const { visible, ...others } = props;

  let dataExpanded = props.expanded;

  const arrowDir = dataExpanded ? chevronDownIcon : chevronRightIcon;

  return visible === false ? null : (

    <DrawerItem {...others}>

      <SvgIcon icon={props.svgIcon} />

      <span className={'k-item-text'}>{props.text}</span>

      {dataExpanded !== undefined && (

        <SvgIcon

          icon={arrowDir}

          style={{

            marginLeft: 'auto',

          }}

        />

      )}

    </DrawerItem>

  );

};

[Yanko]

Hi, Tejas,

Thank you for the picture and example code snippet provided.

I suggest continuing with the implementation of the hierarchical drawer (a drawer with nested items) to achieve the layout from the picture. You can refer to the Hierarchical Drawer article for guidance on structuring your components:

• https://www.telerik.com/kendo-react-ui/components/layout/drawer/custom_rendering 

The provided CustomItem component is one of the steps required for the hierarchical drawer. You can extend the example with further logic to dynamically expand and collapse the drawer items by modifying the dataExpanded property.

Furthermore, you can apply custom styles to the drawer items to match your design requirements. You can use inline styles or CSS classes.

If you have further questions, feel free to ask!

Regards,
Yanko
Progress Telerik