Rendering Changes in 16.0.0

Updated on Aug 11, 2026

The KendoReact 16.0.0 release introduces changes in the rendering of several components.

Buttons

• The internal DOM role attribute has changed on ButtonItem, DropDownButton, and SplitButton: role="menuitem" is now role="listitem", and role="menu" is now role="list".
• The k-segmented-control-button-text <span> inside SegmentedControl is no longer rendered when the text prop is falsy.

Chat

• The file list <ul> element in FileBox now has role="list" and a localized aria-label attribute.
• The horizontal scroll wrapper <div class="k-files-scroll"> now has role="presentation".
• Each file item <li class="k-file-box"> now has role="listitem" and an aria-label combining the file name and size.

ColorGradient

• Contrast validation spans changed from .k-text-success and .k-text-error to .!k-text-success and .!k-text-error.

Date Inputs

• The HorizontalViewList wrapper <div> now has role="grid".
• The calendar <table class="k-calendar-table"> inside HorizontalViewList role changed from "grid" to "none".
• The ViewList <table> role changed from "grid" to "table".
• The <thead> element now has role="rowgroup".
• The <tbody> element now has role="rowgroup".
• Weekday header <th> elements now have role="columnheader" and an aria-label with the full weekday name.
• The week-number <tr> in the month view now has aria-hidden="true" and role="row".
• Calendar cells now have role="gridcell". The aria-selected attribute is now set to true only when selected and omitted otherwise.
• The TodayCommand button no longer renders with themeColor="base" and role="link".
• aria-activedescendant on the calendar view element is now only set when the active view is month view.

FlatColorPicker

• Contrast validation spans changed from .k-text-success and .k-text-error to .!k-text-success and .!k-text-error.

Grid

• Group header row content is now wrapped in <div class="k-grouping-row-content"> with <span class="k-grouping-row-text"> replacing the previous <p class="k-reset"> with <span class="k-value">.
• The group header cell <span> in grouped column headers now receives the k-grouping-row-text class when rendering a group column.
• The SmartBox root element now renders k-rounded-{size} and k-input-{fillMode} CSS classes. The k-icon class has been removed from the cancel button icon.

Menu

• The submenu list element classes changed from k-group k-menu-group k-reset k-menu-group-md to k-menu-group.

MultiSelect

• The custom-value container element class changed from k-list with a size modifier to k-list-custom-value.
• The custom-value item element class changed from k-list-item k-custom-item to k-list-custom-value.
• When the selectAll prop is enabled, a new sticky header is rendered at the top of the popup list: <div class="k-list-sticky-header"> containing <div class="k-list-sticky-header-item">.

Scheduler

Date Header

• When the date format includes both day-of-week and day components, the DateHeaderCell now renders separate .k-scheduler-date-day (for the weekday) and .k-link.k-nav-day (for the day number) elements instead of a single .k-link.k-nav-day element.

Edit Form

• A new Delete button with a trash icon is rendered in the actions bar when editing an existing event with editable.remove enabled.
• The All Day editor now uses a Switch component instead of a Checkbox, rendered inside a k-scheduler-edit-form-row element with the id k-is-allday-switch instead of k-is-allday-checkbox.
• The Cancel button no longer renders a cancel icon (icon="cancel" / .k-svg-i-cancel).
• The description field label is now rendered as an SVG icon (commentIcon) instead of a Label component with text.
• The dialog actions bar layout changed from 'start' to 'end'.
• The dialog title is now dynamic: "New event" for new events and "Edit event" for existing events, instead of the static "Event" title.
• The edit form Dialog no longer renders the k-scheduler-edit-dialog CSS class and now uses a fixed width of 650 instead of minWidth: 400.
• The RecurrenceEditor is no longer rendered inline inside a .k-recurrence-editor div. It is replaced by a k-scheduler-recurrence-button Button that opens a separate SchedulerRecurrenceDialog.
• Resource field labels are now rendered as SVG icons (when SchedulerResource.svgIcon is set) instead of Label components with the resource name.
• The Save button no longer renders a save icon (icon="save" / .k-svg-i-save).
• The start/end date fields are now split into separate date and time pickers instead of a combined component. They are wrapped in a new k-scheduler-datetime-section container with a k-scheduler-datetime-grid layout.
• Start and end field labels now use the class k-scheduler-datetime-label instead of k-form-label.
• The timezone editors now use DropDownList instead of ComboBox.
• The timezone toggle is now a flat primary Button with a globe icon instead of separate Checkbox + Label pairs for start and end timezone checked states.
• The title field label is now rendered as an SVG icon (commentIcon) instead of a Label component with text.

Events

• Continuation arrows for multi-day events are now wrapped in .k-event-continuation elements instead of being rendered directly inside .k-event-actions.
• The event content now renders separate .k-event-title and .k-event-time elements instead of a single .k-event-time element containing both the title and time.
• The event root element now applies containerType: 'size' (or 'normal' for auto-height items) as an inline style for container query support.
• Recurrence and exception icons are now wrapped in .k-event-recurrence-icon elements.
• Read-only events now render the k-readonly CSS class on the event element.
• Removed the .k-event-actions wrapper and the .k-event-delete delete button from the SchedulerItem component. Events no longer render an inline delete action.
• Vertical continuation arrows now use chevronUpIcon (.k-svg-i-chevron-up) and chevronDownIcon (.k-svg-i-chevron-down) for tail and head respectively.

Month View

• Clicking the Show more button now opens a MoreEventsPopover (.k-scheduler-popover) listing hidden events.
• The Show more button now renders with size="xs", fillMode="flat", and themeColor="primary" attributes, and displays a text label (e.g., "2 more") instead of a horizontal-more icon (.k-svg-i-more-horizontal).

Toolbar

• Added a new New event button (.k-toolbar-button with themeColor="primary" and a plus icon) at the start of the toolbar when the Scheduler is editable.
• A k-separator element is now rendered between the date picker and the view selector at certain responsive levels.
• The previous/next navigation ButtonGroup now renders with the classes k-button-group-flat k-toolbar-button-group instead of k-scheduler-navigation, and both buttons use fillMode="flat".
• The previous/next navigation buttons no longer render the icon (font icon) attribute; only svgIcon is used.
• The previous/next navigation buttons no longer render role="button".
• Responsive toolbar behavior is now driven by a container-query-based collapse level instead of window.matchMedia('(min-width: 1024px)'). At narrow widths, the Today button, navigation arrows, and date picker collapse progressively.
• The Today button is now a standalone flat Button (.k-toolbar-button) instead of being part of the ButtonGroup.
• The view selector no longer wraps in a .k-scheduler-tools container at mobile breakpoints. The DropDownButton now uses the k-toolbar-menu-button class with fillMode="flat" instead of k-views-dropdown, and renders a k-menu-button-arrow k-button-arrow end icon element with an SvgIcon instead of an inline IconWrap.