New to Telerik UI for Blazor? Download free 30-day trial

Rendering Changes in 4.0.0

Calendar

  • Changed <span class="k-calendar-nav-today k-today"> 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

  • Renamed the following classes:
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 k-chunk-progressbar class to the <div class="k-progressbar>.
  • Added k-progressbar-chunks class to the <ul> element.
  • Replaced the k-item class of the <li> elements with k-progressbar-chunk class.

Common - Date Pickers

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

Common - Selects

  • Added k-[COMPONENT]-popup class to the popup element of all selects (AutoComplete, ColorPicker, ComboBox, DropDownList, MultiColumnComboBox, MultiSelect).

Dialog

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

Editor

  • Added k-editor-window class to all popups.
  • Added 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

  • Added k-toolbar-item class to the <div class="k-filter-toolbar-item>.

Form

  • Added k-form-{size} to the main wrapping element of the component (<form class="k-form">). Necessary to introduce the Size options of the Form.

Gantt

  • Added k-grid-md class to the <div class="k-grid> element - this ensures the default medium size of the Tree.

  • Added table-specific classes to the table elements of the Gantt Tree:

Pre-4.0.0 4.0.0
<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 sorting icon in a <span class="k-sort-icon">
    <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">). Necessary to introduce the Size options of the Grid. The child elements inherit the k-grid-{size} class.

  • Added Grid-specific classes added to header, body and footer tables - k-grid-header-table, k-grid-table, k-grid-footer-table.

  • Added table-specific classes to the table elements of the Grid:

Pre-4.0.0 4.0.0
<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

  • Added <div class="k-listview-item"> wrapper to Item Template.

MultiSelect

  • Added k-text-ellipsis class to the <span class="k-chip-label> element.
  • Removed 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 <div class="k-notification-wrap"> element.
  • Replaced 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.

Pager

  • Replaced <ul class="k-pager-numbers"> with a <div class="k-pager-numbers">.
  • Replaced navigation buttons <a class="k-link k-page-nav"> with flat buttons <button class="k-pager-nav k-button k-button-{size} k-button-flat k-button-flat-base k-icon-button">.
  • Replaced page numbers <span class="k-link> with flat primary buttons <button class="k-button k-button-{size} k-button-flat k-button-flat-primary">
  • Removed 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">). Necessary to introduce the Size options of the Form.

ProgressBar

  • Added 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. (This style conrols the progress width/height.)

Splitter

  • Removed the k-collapse-prev and k-collapse-next classes from the <span class="k-icon>.

Toolbar

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

Treelist

  • Wrapped sorting icon in a <span class="k-sort-icon">
    <span class="k-sort-icon">
        <span class="k-icon k-i-sort-asc-small"></span>
    </span>
  • Added k-grid-md class to the <div class="k-grid> element - this ensures the default medium size of the TreeList.

  • Added table-specific classes to the table elements of the TreeList:

Pre-4.0.0 4.0.0
<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">

Upload

  • Upload button and input are no longer nested and are now siblings wrapped inside a <div class="k-upload-button-wrap">.
  • Removed k-header class from <div class="k-upload>.
  • Added k-upload-async class to <div class="k-upload>.
  • Added k-upload-dropzone class to <div class="k-dropzone">.
  • Removed k-upload-status-total class from <div class="k-upload-status">.
  • Removed k-reset class from the <ul class="k-upload-files">.
  • Replaced <div class="k-progressbar"> with a <TelerikProgressBar> component without visible labels.
  • 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-name-size-wrapper class with k-file-info class.
  • Removed k-text-success and k-text-error classes from <span class="k-file-validation-message">.

Action buttons

The following changes are applicable when AutoUpload = "false", so the action buttons Clear and Upload are rendered:

  • Added k-actions-horizontal class to <div class="k-actions>.
  • Removed k-clear-selected and k-upload-selected classes from the action buttons.
  • Added k-rounded-md class to the action buttons.
  • Wrapped the buttons text in a <span class="k-button-text">.

Window

  • Removed k-window-wrapper class from the <div class="k-window>.
  • Removed k-dialog-content class from the <div class="k-window-content>.
  • Removed k-dialog-titlebar and k-header classes from the <div class="k-window-titlebar>.
  • Renamed k-window-actions to k-window-titlebar-actions
  • Renamed k-window-action to k-window-titlebar-action
In this article