New to KendoReact? Start a free 30-day trial

Rendering Changes in 8.0.0

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

Animation

Replaced the k-animation-container-relative class with k-animation-container-shown.

AutoComplete

Added k-focus class when the component is focused and not disabled.

Button

The fillMode property now has a clear option

Replaced the span element rendering the the Breadcrumb link with an anchor element, having a href property set to #.

Chat

Replaced the k-toolbar-box class in the component's toolbar with k-chat-toolbar k-toolbar.
Added k-toolbar-group class to the k-button-list element.
Added the k-input-suffix-horizontal class to the k-input-suffix element inside the message box.
Added a new vertical separator is added after the message input through the new k-input-separator k-input-separator-vertical element.

ChunkProgressBar

Replaced the k-progress-chunk class with k-progressbar-chunk.

ColorGradient

Removed the k-icon-button class from the toggle button of the component.

ColorPicker

Removed the k-reset class from the component's popup.
Added k-color-picker-popup class to the component's popup.

ComboBox

Replaced the k-input-md class inside the search textbox in adaptive mode with k-input-lg.
Added k-actionsheet class to the ActionSheet component in adaptive mode.
Added k-text-center element wrapping the title in adaptive mode.
The 'Cancel' button in the adaptive mode now has the following default configurations fillMode={'flat'}, themeColor={'base'} and size={'large'}

DatePicker

Removed the 'k-calendar-container k-group k-reset' classes from the popup of the component.

DateRangePicker

Added 'k-calendar-container class the popup of the component.

Dialog

The k-overlay element is rendered only when the modal prop is set to true.
The k-window-titlebar-actions k-dialog-titlebar-actions element is no longer rendered if the closeIcon property is set to false.

DropDownButton

Removed the k-dropdown-button class.
Removed the k-group class from the component's popup menu.
Removed the k-reset class from the component's popup menu.

DropDownList

The k-input-value-text element is now rendered only if the component has a value.

DropDownTree

Added k-list-container class to the k-dropdowntree-popup element.
Added k-actionsheet and k-adaptive-actionsheet to the ActionSheet component when the adaptive mode is activated.
Added a new k-text-center element wrapping the title of the component in adaptive mode.
The element with class k-input-value-text is now rendered only if the component has a value or a placeholder definition.

Editor

Added k-toolbar-button-group k-button-group-solid classes to the ButtonGroups inside the component's toolbar.
Added k-toolbar-button class to the button of each Editor tool.

Filter component

Added k-button-group-solid class to the ButtonGroup in the Filter toolbar.
Removed the k-filter-dropdown class from the DropDownList inside the Filter toolbar.

FlatColorPicker

Replaced the k-button-group-flat class of the ButtonGroup in the header of the component with k-button-group-solid.
Replaced the k-primary class from the 'Apply' button in the footer of the component with k-button-solid-primary.
Added k-no-color class to the color previews when a value for the current or previous color is not defined.
Added k-coloreditor-footer class to the footer of the component.

Grid

Replaced the filter icon of the column menu with the moreVerticalIcon icon.

ListBox

Added k-listbox-'selected size' class to the component.

MultiSelect

New k-actionsheet and k-adaptive-actionsheet classes are rendered in the ActionSheet component when the adaptive mode is activated
The title in the adaptive mode is now wrapped in an element with class k-text-center

MultiSelectTree

Removed the k-selection-multiple class from the k-input-values element.
Added k-actionsheet and k-adaptive-actionsheet classes to the ActionSheet component when the adaptive mode is activated.

MultiViewCalendar

Removed the k-widget class.
Added k-calendar-md class to the component.

Notification

The element with the k-notification-actions class is now rendered only if the closable property is set to true.

OrgChart

Removed the k-justify-content-... and k-orgchart-group-h classes from the k-orgchart-group elements.
Removed the k-justify-content-around class from the k-orgchart-node-container element.
Added a new showAvatar property to the component, controlling if an avatar will be rendered for the component's nodes.

Added k-picker-solid and k-hidden classes to the select element displayed inside the Pager buttons when the component is resized.
Added a display: 'inline-flex' style to the select element displayed inside the buttons when the component is resized.
Added a new k-disabled class when the Pager is disabled.

PDFViewer

Added k-toolbar-button-group k-button-group-solid classes to the ButtonGroup's inside the component's toolbar.
Added k-group-start and k-group-end classes to the first and last elements in the ButtonGroups.
Added k-toolbar-combobox class to the zoom ComboBox inside the toolbar.
Added a vertical separator to the searchbox of the search tool.

ProgressBar

Replaced k-progress-chunk class with k-progressbar-chunk.

RadioButton

Added k-radio-wrap element wrapping the inputs defining each radio option.

RadioGroup

Replaced the k-radio-item class with k-radio-list-item.

RangeSlider

Added k-range-slider class to the component.
Added k-draghandle-start and k-draghandle-end classes to the drag handles in the component.

Signature

Added k-signature-[name of the fillMode] class to the component.

Slider

Added k-draghandle-end class to the drag handle of the component.

SliderLabel

Removed the style definition from the SliderLabel element.
Replaced the k-tick-vertical and k-tick-horizontal classes with the conditionally rendered k-tick-large class.

SplitButton

Removed the k-group class from the component's popup menu.
Removed the k-reset class from the component's popup menu.

Splitter

Removed the k-widget class.

Stepper

The element with the k-step-label class is now rendered conditionally based on the label and optional properties.

Switch

Removed the k-rounded-... class.
When the labels are passed as empty strings, no DOM element is rendered for the labels. Previously, the labels were rendered every time, no matter if the label has content or not.

TaskBoard

Removed the k-widget class.
Added k-toolbar-md class to the toolbar.
Added k-card-details class to the button inside the card's header.

TextArea

Added k-resize class rendered conditionally, based on the resizable prop value.

Timeline

Replaced the k-event-collapse element with a KendoReact Button with the following definition

<Button className={'k-event-collapse'} fillMode={'flat'} svgIcon={chevronRightIcon} />

Replaced the navigation buttons in the horizontal mode with KendoReact Buttons.
The element with the k-card-actions k-actions classes is now rendered only if actions are defined for the card.

TimePicker

Removed the k-group k-reset class have been removed from the TimePicker popup.
Added a k-scrollable-placeholder element to the lists inside the popup of the component.
Added k-content k-scrollable class to the k-time-container element.
Added k-list-container class to the k-timepicker-popup element.
Added k-timeselector-md class to the k-timeselector element.
Added k-actions-horizontal class to the time selector in the TimePicker popup.

Upload

Removed the k-reset class from the k-upload-files element.