Upgrade / Rendering Changes

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

Rendering Changes in 6.0.0

The span.k-breadcrumb-item-text element renders only if the Breadcrumb item has text.

ButtonGroup

When a ButtonGroupButton inside a ButtonGroup has no ChildContent, it no longer renders an empty span.k-button-text.

UI for Blazor 5.1.1 UI for Blazor 6.0.0 

<button class="k-button">
    <span class="k-button-icon">...</span>
    <span class="k-button-text"></span>
</button>


<button class="k-button">
    <span class="k-button-icon"></span>

</button>

Calendar

  • The tbody element in the year, decade, and century view renders a k-calendar-tbody CSS class.
  • The button.k-calendar-title button for the month name in the month view renders a k-button-primary CSS class and has the theme's "primary" text color.
  • The button.k-calendar-nav-today element renders a role="link" attribute.

Chip

  • The span.k-chip-label element no longer renders a k-text-ellipsis CSS class.
  • The built-in icon container (span.k-icon) no longer renders a k-chip-icon CSS class.

DateRangePicker

  • The first and last table cell (td.k-calendar-td) in the selected range render k-range-start and k-range-end CSS classes.
  • The div.k-popup element renders a k-calendar-container CSS class.

Drawer

  • The Drawer items (li.k-drawer-item) render a k-level-0 CSS class.
  • The div.k-drawer-items element is removed. The k-drawer-items CSS class is moved to the child ul element.
UI for Blazor 5.1.1 UI for Blazor 6.0.0 

<div class="k-drawer-container">
    <div class="k-drawer">
        <div class="k-drawer-wrapper">
            <div class="k-drawer-items">
                <ul>
                    <li class="k-drawer-item">...</li>
                    <li class="k-drawer-item">...</li>
                    <li class="k-drawer-item">...</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="k-drawer-content">...</div>
</div>


<div class="k-drawer-container">
    <div class="k-drawer">
        <div class="k-drawer-wrapper">

            <ul class="k-drawer-items">
                <li class="k-drawer-item k-level-0">...</li>
                <li class="k-drawer-item k-level-0">...</li>
                <li class="k-drawer-item k-level-0">...</li>
            </ul>

        </div>
    </div>
    <div class="k-drawer-content">...</div>
</div>

The ul.k-menu-group element in the popup no longer renders k-group and k-reset CSS classes.

DropZone

  • The span.k-icon child of div.k-dropzone-inner renders a k-dropzone-icon CSS class.
  • The DropZone hint and note elements (span.k-dropzone-hint and span.k-dropzone-note) no longer render when HintText and NoteText are empty.

Editor

Editor toolbar buttons (button.k-button) that are inside a ButtonGroup no longer render k-toolbar-button and k-toolbar-toggle-button CSS classes.

FileManager

  • The Splitter component (div.k-splitter) renders a k-filemanager-splitter CSS class.
  • The content pane (div.k-pane.k-filemanager-content) renders a k-scrollable CSS class.
  • The TreeView parent (div.k-filemanager-navigation-container) no longer renders.
  • The ListView component (div.k-listview.k-filemanager-listview) renders a k-selectable CSS class.
  • The ListView parent (div.k-filemanager-view.k-filemanager-view-list) no longer renders.
  • The div.k-file-preview element in the Details pane renders as a span.k-file-preview.
  • The div.k-file-name element in the Details pane no longer renders a k-user-select-none CSS class.
  • The SplitButton (span.k-split-button) in the toolbar renders a k-toolbar-split-button CSS class.
  • The div.k-filemanager-search-tool element and its child span.k-searchbox are merged into one element div.k-filemanager-search-tool k-searchbox, which no longer renders a k-toolbar-last-visible CSS class.

FileSelect

The HTML rendering of the FileSelect and Upload components is almost identical. This section includes changes that are specific to the FileSelect. For more changes, refer to the Upload section below.

  • The component container (div.k-upload) no longer renders a k-header CSS class.
  • The div.k-upload element renders a k-upload-async CSS class.

FloatingLabel

The label.k-label element renders as label.k-floating-label.

Grid and TreeList

The changes below apply to the TreeList only when the two components have the same feature.

  • The row dragging handle container (td.k-drag-cell) renders a k-table-td CSS class.
  • A master table row (tr.k-table-row) renders a k-expanded CSS class when it is expanded in a hierarchy scenario.
  • The first empty cell in a grouped row (td.k-group-cell) renders a k-table-group-td CSS class.
  • The group expand/collapse icon (span.k-icon) no longer renders a k-cursor-pointer CSS class.
  • The And/Or filter operator drop down (span.k-dropdownlist) renders a k-filter-and or k-filter-or CSS class.
  • The filter menu container (div.k-filter-menu) no longer renders k-group and k-reset CSS classes.

Filtering CheckBoxList

  • The filtering checkbox list (ul.k-multicheck-wrap) no longer renders a k-reset CSS class.
  • The filtering checkbox (input.k-checkbox) is wrapped in the label.k-checkbox-label element, which used to come after it in older versions.
  • The Select All filtering checkbox container (li.k-item) renders a k-check-all-wrap CSS class.
  • The filtering checkbox list item (li.k-item) no longer renders a span.k-state-default element.
UI for Blazor 5.1.1 UI for Blazor 6.0.0 

<ul class="k-reset k-multicheck-wrap">
    <li class="k-item">
        <span class="k-state-default">
            <span class="k-checkbox-wrap">
                <input type="checkbox" class="k-checkbox" />
            </span>
            <label class="k-checkbox-label">Select All</label>
        </span>
    </li>
    <li class="k-item">
        <span class="k-state-default">
            <span class="k-checkbox-wrap">
                <input type="checkbox" class="k-checkbox" />
            </span>
            <label class="k-checkbox-label">Text</label>
        </span>
    </li>
</ul>


<ul class="k-multicheck-wrap">
    <li class="k-item k-check-all-wrap">
        <label class="k-checkbox-label">
            <span class="k-checkbox-wrap">
                <input type="checkbox" class="k-checkbox" />
            </span>
            Select All
        </label>
    </li>
    <li class="k-item">
        <label class="k-checkbox-label">
            <span class="k-checkbox-wrap">
                <input type="checkbox" class="k-checkbox" />
            </span>
            Text
        </label>
    </li>
</ul>

ListView

The ListView container (div.k-listview) no longer renders a k-d-flex CSS class.

LoaderContainer

  • The Text container (div.k-loader-container-label) prepends a ! to its ThemeColor CSS class. This means that the theme color is applied with an !important keyword, so you also need to use !important to override it.
  • The z-index value of div.k-loader-container is 20001, compared to 2001 in older versions. As a result, the LoaderContaier will show on top of popup Windows and Dialogs. If necessary, show the LoaderContainer after closing the popup.

MultiColumnComboBox

The FooterTemplate container (div.k-table-footer) renders a single span.k-table-td element instead of a table.k-table.

UI for Blazor 5.1.1 UI for Blazor 6.0.0 

<div class="k-table-footer">
    <table class="k-table">
        <tfoot class="k-table-tfoot">
            <tr class="k-table-row">
                <td class="k-table-td">
                    FooterTemplate content
                </td>
            </tr>
        </tfoot>
    </table>
</div>


<div class="k-table-footer">



    <span class="k-table-td">
        FooterTemplate content
    </span>



</div>

Notification

The optional span.k-icon element renders a k-notification-status CSS class.

NumericTextBox

The arrow buttons (button.k-spinner-increase and button.k-spinner-decrease) render an additional CSS class that reflects the NumericTextBox Size. The default Size is medium, so the new CSS class is k-button-md.

Pager

The rendering changes in the Pager also affect the components that use a Pager component internally, such as the Grid, ListView, and the TreeList.

  • When the InputType is PagerInputType.Input, the Page and of XX labels inside span.k-pager-input are rendered inside spans.
  • The selected option element in the native page number drop down (select.k-picker) no longer renders a k-selected CSS class. The select element shows on small screens instead of the pager buttons when the Pager Adaptive parameter is set to true.
  • The page number buttons (button.k-button) render their content in a span.k-button-text.
UI for Blazor 5.1.1 UI for Blazor 6.0.0 

<button class="k-button">
    10
</button>
<button class="k-button">
    ...
</button>


<button class="k-button">
    <span class="k-button-text">10</span>
</button>
<button class="k-button">
    <span class="k-button-text">...</span>
</button>

PanelBar

  • Expanded items (li.k-panelbar-item) render a k-expanded CSS class instead of k-state-expanded.
  • Child item groups (ul.k-panelbar-group) no longer render k-group and k-panel CSS classes.
  • The <ContentTemplate> wrapper (div.k-panelbar-content) no longer renders a k-content CSS class.
  • The li.k-panelbar-item element renders a k-panelbar-header CSS class only when it is a root PanelBar item.

PdfViewer

  • The PDF document container (div.k-canvas) renders a k-enable-text-selection or k-enable-panning CSS class, depending on the current component state and the user. By default, the PDF Viewer is in text selection mode.
  • The width and height styles of the div.k-page element are set in pt (points) instead of px (pixels).
  • The Zoom toolbar button group (div.k-button-group) render k-toolbar-button-group and k-button-group-flat CSS classes.
  • The Zoom Out and Zoom In toolbar buttons (button.k-button) no longer render a k-toolbar-button CSS class.
  • The Zoom In button no longer renders a k-group-start CSS class.
  • The Zoom drop down renders a k-toolbar-combobox CSS class.
  • All toolbar buttons (button.k-button.k-button-solid.k-button-solid-base) apply flat Button FillMode and render as button.k-button.k-button-flat.k-button-flat-base.
  • The Folder Open icon (span.k-icon.k-svg-icon.k-svg-i-folder-open) in an empty PDF Viewer renders as an Upload icon (span.k-icon.k-svg-icon.k-svg-i-upload) with a k-dropzone-icon CSS class. If using font icons, then span.k-icon.k-font-icon.k-i-folder-open renders as span.k-icon.k-font-icon.k-i-upload.
  • The Upload icon is followed by a span.k-dropzone-hint element.
  • The Upload icon and drop zone hint render inside a div.k-external-dropzone element, which wraps a div.k-dropzone-hint element.
UI for Blazor 5.1.1 UI for Blazor 6.0.0 



<span class="k-icon k-svg-i-folder-open">
    ...
</span>







<div class="k-external-dropzone">
    <div class="k-dropzone-inner">
        <span class="k-icon k-svg-i-upload k-dropzone-icon">
            ...
        </span>
        <span class="k-dropzone-hint">
            ...
        </span>
    </div>
</div>

ProgressBar

The two span.k-progress-status elements no longer render if the ProgressBar label is not visible.

RadioGroup

  • The item container (li.k-radio-item) renders as li.k-radio-list-item.
  • The radio button element (input.k-radio) renders a k-checked CSS class when checked.
  • The input.k-radio element is wrapped in a span.k-radio-wrap.
UI for Blazor 5.1.1 UI for Blazor 6.0.0 

<li class="k-radio-item">

    <input type="radio" class="k-radio" />

    <label class="k-radio-label">
        RadioGroup item label
    </label>
</li>


<li class="k-radio-list-item">
    <span class="k-radio-wrap">
        <input type="radio" class="k-radio k-checked" />
    </span>
    <label class="k-radio-label">
        RadioGroup item label
    </label>
</li>

Scheduler

The Scheduler div.k-scheduler-layout element renders a k-scheduler-dayview or k-scheduler-weekview CSS class when the component shows its Day view or Week view, respectively.

Stepper and Wizard

  • The span.k-step-label element does not render if the respective step as no Label.
  • The span.k-step element renders a k-step-optional CSS class when the step is optional.

Switch

The span.k-switch element no longer renders a k-rounded-full CSS class.

TileLayout

  • The TileLayout item header (div.k-tilelayout-item-header) renders a k-cursor-move CSS class instead of k-cursor-grab and k-cursor-grabbing.
  • The header title (h5.k-card-title) renders as a div.k-card-title element.
  • The TileLayout item body (div.k-tilelayout-item-body) no longer renders a k-overflow-hidden CSS class.

TreeView

The child div of the TreeView item container (li.k-treeview-item > div) renders as a span element.

Upload

  • The Upload container (div.k-upload) renders a k-upload-empty CSS class when the file list is empty.
  • The progress bar (div.k-progressbar) inside each file item (li.k-file) always renders, but has a k-hidden CSS class when not visible.
  • The file icon (span.k-icon) inside each file item renders a k-file-icon CSS class instead of k-file-group.
  • The span.k-file-info element renders as a div.
  • The span.k-upload-status element in the file list is replaced by div.k-upload-actions.
  • The button.k-button elements in the file list render k-button-md and k-rounded-md CSS classes.
  • The remove icons (span.k-icon) in the file list no longer render a k-delete CSS class.
  • The span.k-upload-status element in the top area contains only the upload status label and no longer wraps the Loader component and the status icon.
UI for Blazor 5.1.1 UI for Blazor 6.0.0 

<div class="k-upload">
    <div class="k-upload-dropzone k-dropzone">
        <div class="k-upload-button-wrap">
            ...
        </div>
        <span class="k-dropzone-hint">Drag and drop files here to upload</span>
        <span class="k-upload-status">
            <span class="k-icon">
                ...
            </span>

            Done
        </span>
    </div>
</div>


<div class="k-upload">
    <div class="k-upload-dropzone k-dropzone">
        <div class="k-upload-button-wrap">
            ...
        </div>
        <span class="k-dropzone-hint">Drag and drop files here to upload</span>

        <span class="k-icon">
            ...
        </span>
        <span class="k-upload-status">
            Done
        </span>
    </div>
</div>

See Also

In this article
Related articles
Not finding the help you need? Improve this article