New to Kendo UI for Vue? Start a free 30-day trial

Rendering Changes in 11.0.0

Updated on Nov 10, 2026

The Kendo UI for Vue 11.0.0 release introduces changes in the rendering of the Menu, the ContextMenu, the Scheduler events, and the custom items of the TreeView, DropDownTree, and MultiSelectTree. If your application overrides the built-in CSS rules or queries the generated markup, for example in tests, review the following changes.

  • ContextMenu—The component always renders a Menu with contextMenu. The vertical root ul element renders k-context-menu k-menu-group [k-menu-group-sm|md|lg] with role="menu", and no longer renders the k-menu, k-reset, k-menu-vertical, and k-widget classes.
  • ContextMenu—The popup closes and queries its items through [role="menuitem"] and .k-menu-popup instead of the .k-menu-item selector.
  • Menu—The root ul element renders k-reset k-header k-menu k-menu-horizontal|k-menu-vertical and no longer renders the k-widget class. It renders k-menu-sm|md|lg when the new size property is set.
  • Menu—The nested popup lists render k-menu-group [k-menu-group-sm|md|lg], computed from size, and no longer render the k-group, k-reset, and hardcoded k-menu-group-md classes.
  • Menu—The k-first and k-last classes are no longer rendered on the menu items.
  • Menu—Separators render li.k-separator.k-item with the cssClass of the item merged in.
  • Menu—A disabled MenuItemLink renders the k-disabled class.
  • Menu—The items with the new description, actionsRender, groupHeader, and groupHeaderRender fields render span.k-menu-link-text, span.k-menu-link-description, span.k-menu-link-actions, li.k-menu-group-header, and Icon.k-menu-link-icon. Text-based selectors such as li.k-menu-item[.="Text"] may no longer match.

For more information, see Menu Rendering and ContextMenu Rendering.

Scheduler

  • SchedulerItem—The resolved resource color is set as the --kendo-scheduler-event-color inline CSS variable. The inline borderColor and backgroundColor styles are no longer set, so a Kendo theme that consumes the variable is required. Custom components that need the color must read the --kendo-scheduler-event-color variable. For more information, see Scheduler Resources.
  • SchedulerItem—The k-event-drag-hint class is rendered on the original item while it is dragged, and the k-selected class is rendered on the drag hint.
  • SchedulerItem—Multi-day timed events render in the all-day area with the k-event-all-day class and k-event-all-day-time spans for the start and end time. Before, they rendered only in the time slots.
  • SchedulerItem—The resize hint sets the resolved color through the --kendo-marquee-color inline CSS variable instead of inline styles on the k-marquee-color element. The k-marquee-color and k-marquee-text elements of the resize hint have keys and no inline color.
  • SchedulerTask, SchedulerEditTask, SchedulerViewTask—The k-scheduler-mark element keeps its inline color and backgroundColor styles and does not use the --kendo-scheduler-event-color variable. The color value is now resolved through the theme, so it can differ from the configured resource color.

TreeView

  • TreeView, DropDownTree, MultiSelectTree—A custom item, which you set through the item property, renders directly inside the span.k-treeview-leaf element. The span.k-treeview-leaf-text element is no longer rendered around it. The default rendering without the item property still renders span.k-treeview-leaf-text. Update the CSS selectors and tests that expect .k-treeview-leaf-text around a custom item, or add the k-treeview-leaf-text class to the root element of your custom item so that they keep matching.

For more information, see TreeView Custom Rendering, DropDownTree Custom Rendering, and MultiSelectTree Custom Rendering.

For the changes in the component behavior and API, see Breaking Changes in 11.0.0.

In this article
MenuSchedulerTreeView
Not finding the help you need?
Contact Support