Rendering Changes in 4.0.0

Calendar
Card
ChunkProgressBar
(Common) Date Pickers
(Common) Selects
Dialog
Editor
FileSelect
Filter
Form
Gantt
Grid
ListView
MultiSelect
Notification
Pager
ProgressBar
Splitter
Toolbar
TreeList
Upload
Window

Calendar

The <span class="k-calendar-nav-today k-today"> CSS class has been changed to a Flat button (<button class="k-button k-calendar-nav-today k-button-flat k-rounded-md k-button-md k-button-flat-primary"><span class="k-button-text">Today</span></button>).

Card

The following classes related to the Telerik UI for Blazor Card component have been renamed:

Pre-4.0.0	4.0.0
`k-card-actions-start`	`k-actions-start`
`k-card-actions-end`	`k-actions-end`
`k-card-actions-center`	`k-actions-center`
`k-card-actions-stretched`	`k-actions-stretched`

ChunkProgressBar

Added the k-chunk-progressbar CSS class to the <div class="k-progressbar>.
Added the k-progressbar-chunks CSS class to the <ul> element.
Replaced the k-item class of the <li> elements with the k-progressbar-chunk class.

Common for Date Pickers

All date pickers that incorporate a calendar, namely, the DatePicker, DateTimePicker, DateRangePicker, and TimePicker, inherit the change of the <span class="k-calendar-nav-today k-today">CSS class to a Flat button.
Added the k-[COMPONENT]-popup class to the popup element of all date pickers, namely, the DatePicker, DateTimePicker, DateRangePicker, and TimePicker.

Common for Selects

The k-[COMPONENT]-popup class has been added to the popup element of all components providing a selection option such as the AutoComplete, ColorPicker, ComboBox, DropDownList, MultiColumnComboBox, and MultiSelect.

Dialog

Added k-rounded-md to the buttons in the predefined dialogs.
Renamed the k-window-actions and k-dialog-actions classes to k-window-titlebar-actions and k-dialog-titlebar-actions.
Renamed the k-window-action and k-dialog-action classes to k-window-titlebar-action and k-dialog-titlebar-action.
Removed the k-dialog-buttongroup class from the <div class="k-actions>.
Added k-actions-horizontal, k-window-actions, and k-dialog-actions to <div class="k-actions>.

Editor

Added the k-editor-window class to all popups.
Added the k-editor-toolbar class to the Editor toolbar.

FileSelect

Upload button and input are no longer nested but are on one level wrapped inside a <div class="k-upload-button-wrap">.
Replaced k-file-group-wrapper, k-file-invalid-group-wrapper, k-multiple-files-group-wrapper and k-multiple-files-invalid-group-wrapper classes with k-file-icon-wrapper class.
Replaced k-file-group class with k-file-iconclass.
Replaced k-file-name-size-wrapper class with k-file-info class.
Removed k-file-name-invalid class from <span class="k-file-name">.
Removed k-text-success and k-text-error classes from <span class="k-file-validation-message">.

Filter

The k-toolbar-item class has been added to <div class="k-filter-toolbar-item>.

Form

k-form-{size} has been added to the main wrapping element of the Telerik UI for Blazor Form component (<form class="k-form">). It's necessary to introduce the Size options of the Form.

Gantt

Added the k-grid-md class to the <div class="k-grid> element. This action ensures the default medium size of the Gantt tree.
Added table-specific classes to the table elements of the Gantt tree:

Prior to 4.0.0	4.0.0 and Later
`<table>`	`<table class="k-table">`
`<thead>`	`<thead class="k-table-thead">`
`<tbody>`	`<tbody class="k-table-tbody">`
`<tfoot>`	`<tfoot class="k-table-tfoot">`
`<th>`	`<th class="k-table-th">`
`<tr>`	`<tr class="k-table-row">`
`<td>`	`<td class="k-table-td">`
`<tr class="k-grouping-row">`	`<tr class="k-table-group-row">`

Grid

Wrapped the sorting icon in a <span class="k-sort-icon"> element.

  <span class="k-sort-icon">
        <span class="k-icon k-i-sort-asc-small"></span>
  </span>

Added k-grid-{size} to the main wrapping element of the component (<div class="k-grid">). It's necessary to introduce the Size options of the Grid. The child elements inherit the k-grid-{size} class.
Added the k-grid-header-table, k-grid-table, and k-grid-footer-table Grid-specific classes to the header, body, and footer of the tables.
Added table-specific classes to the table elements of the Grid:

Prior to 4.0.0	4.0.0 and Later
`<table>`	`<table class="k-table">`
`<thead>`	`<thead class="k-table-thead">`
`<tbody>`	`<tbody class="k-table-tbody">`
`<tfoot>`	`<tfoot class="k-table-tfoot">`
`<th>`	`<th class="k-table-th">`
`<tr>`	`<tr class="k-table-row">`
`<td>`	`<td class="k-table-td">`
`<tr class="k-grouping-row">`	`<tr class="k-table-group-row">`

Grid Grouping

Removed <div class="k-indicator-container"> in favor of <div class="k-chip>. The Group value is now rendered in a <span class="k-chip-content">. The Close icon is now rendered in a <span class="k-chip-actions"> container.
Changed the Close icon from <span class="k-button-icon k-icon k-i-x"></span> to <span class="k-button-icon k-icon k-i-x-circle"></span>.
Removed the k-grouping-header-flex class from the grouping header.
Renamed the class of the empty <div class="k-indicator-container"> to <div class="k-grouping-drop-container">.

ListView

The <div class="k-listview-item"> wrapper has been added to the Item template.

MultiSelect

Added the k-text-ellipsis class to the <span class="k-chip-label> element.
Removed the k-input-values and k-selection-multiple classes from the <div class="k-chip-list"> element.
Wrapped the <div class="k-chip-list"> element in a <div class="k-input-values"> container.

Notification

Removed the <div class="k-notification-wrap"> element.
Replaced the closable Notification icon <a class="k-icon k-i-x"> with a <span class="k-icon k-i-x">.
Wrapped the closable icon in a <span class="k-notification-actions"> container.

Replaced <ul class="k-pager-numbers"> with a <div class="k-pager-numbers">.
Replaced the <a class="k-link k-page-nav"> navigation buttons with Flat buttons <button class="k-pager-nav k-button k-button-{size} k-button-flat k-button-flat-base k-icon-button">.
Replaced the <span class="k-link> page numbers with Flat primary buttons <button class="k-button k-button-{size} k-button-flat k-button-flat-primary">.
Removed the k-floatwrap, k-link, k-pager-wrap, and k-label classes.
Added k-pager-{size} to the main wrapping element of the component (<div class="k-pager">). It's necessary to introduce the Size options of the Form.

ProgressBar

Added the k-progressbar-progress class to the <div class="k-selected> element.
Changed the inline style of the <div class="k-progressbar> from --kendo-progressbar-progress to --kendo-progressbar-value. The implemented style controls the progress width and height.

Splitter

The k-collapse-prev and k-collapse-next classes have been removed from the <span class="k-icon> element.

Added the k-toolbar-resizable class to the main <div class="k-toolbar> wrapping element of the component. Applicable when the Toolbar is responsive.
Renamed the k-overflow-anchor class to k-toolbar-overflow-button.
Added Toolbar-specific classes to all built-in tools such as k-toolbar-button, k-toolbar-toggle-button, k-toolbar-button-group, and more.
All template items are now wrapped in a <div class="k-toolbar-item"> element.
Added k-toolbar-{size} to the main <div class="k-toolbar"> wrapping element of the component. It's necessary to introduce the Size options of the Toolbar.

Treelist