Rendering Changes in 17.0.0

The Kendo UI for Angular 17.0.0 release introduces changes in the rendering of a number of components.

Breadcrumb

• Removed k-breadcrumb-delimiter-icon and k-icon classes from separator wrapper element.
• Added k-breadcrumb-delimiter-icon class to separator icon.

Button

• Added k-button-arrow wrapper.

Chip

• Removed k-chip-has-icon when no avatar is present.

DateRange

• Other month days are now hidden. k-empty class is used instead of k-other-month.

DateTimePicker

• Removed k-input-solid, k-rounded-md and k-input-md classes from the .k-input element.
• Moved the Set button to the right of the Cancel button in adaptive mode.
• Replaced k-selected with k-active on the active tab in the popup.

DropDownButton

• Added k-menu-button class on the button element.
• Added k-menu-button-arrow class on the arrow wrapper.
• Removed k-dropdown-button class from wrapper.

DropDownTree

• Removed k-input-value-text wrapper when no value is present.

Filter

• Added .k-toolbar-solid class to elements with class .k-toolbar in filter groups and filter expressions.

Grid

• Integrated the Kendo UI for Angular Pager component.
• Integrated Kendo UI for Angular Input components.
• Removed the k-filtercell-boolean class from the wrapper of the boolean filter cell.
• Added class k-table-group-td to table cells with k-group-cell class.
• Removed the k-sort-icon wrapper element from headers when there is no sorting indicator rendered.
• Removed the class k-grid-table-wrap from the content table wrapper.
• Removed the class k-alt from the detail rows in master-detail Grids.
• Added class k-expanded on expanded master rows in master-detail Grids.
• Removed class k-touch-action-auto from content table td elements.

ListView

• The default value of the bordered is now false. The k-listview-bordered class is not rendered by default.
• Removed the k-d-flex class.

Menu

• Swapped the colors of active and inactive menu items.

MultiSelect

• Removed k-selection-multiple class from tag list.

MultiSelectTree

• Removed k-readonly class on inner input.

Pager

• The kendo-datapager selector is deprecated (but still supported for backward compatibility). Replace it with kendo-pager.

• All internal pager elements' selectors that follow the pattern kendo-datapager-xxx are deprecated (but still supported for backward compatibility). Replace them with kendo-pager-xxx.

  Prior version 17.0.0.

  html

  <kendo-datapager>
    <ng-template kendoDataPagerTemplate>
        <kendo-datapager-prev-buttons></kendo-datapager-prev-buttons>
        ...

  Starting with version 17.0.0.

  html

  <kendo-pager>
    <ng-template kendoPagerTemplate>
        <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
        ...

• Removed k-label from the .k-pager-input element within the kendo-pager-input component.

• The visibility of the internal pager elements in responsive mode is controlled by toggling the k-hidden class instead of using style.display.

Panelbar

• Switched the expanded font icon of the items. Previously arrow-chevron-up was used, now changed to chevron-up.

PivotGrid

• Added k-form-md class to the configurator form.
• Added k-form-vertical class to a vertical configurator form and k-form-horizontal class to a horizontal configurator form.
• Moved the .k-checkbox-wrap element outside of the .k-treeview-leaf element in the configurator.
• Replaced the k-hstack k-justify-content-end classes with k-actions-end k-actions-horizontal in the .k-pivotgrid-configurator-actions element.
• Removed the k-color-inherit class from the gear icon of the configurator.
• Added k-flex-row class to the wrapper of the PivotGrid when the configuratorSettings property is not set.
• Added k-pivotgrid-header-title class to the cell that wraps the column header title text.
• Added k-pivotgrid-content class to the cell that wraps the values text.
• Replaced the k-pivotgrid-header-total class with k-pivotgrid-total on total cells in the values table.
• Added k-column-fields class to the columns ChipList in the configurator.
• Added k-row-fields class to the rows ChipList in the configurator.
• Added k-filter-fields class to the values ChipList in the configurator.
• Replaced the k-rounded-full class with k-rounded-md in the Chips of the ChipList.

Popover

• Removed k-popup-transparent from the internal wrapper element of the generated Popup.

Stepper

• Added k-progress-start to the progress bar and removed k-progress-end.

Switch

• Removed k-rounded-full class from the wrapper.

Tabstrip

• Added stretched TabAlignment option.
• Removed k-tabstrip-item class from the tab wrapper.
• Added k-first class to the first tab.
• Added k-last class to the last tab.
• Removed k-pos-relative and added k-header class to the wrapper element.
• Swapped the colors of active and inactive tabs.

TextArea

• Removed !k-overflow-y-auto class from the <textarea> element when resizable is both.

TileLayout

• Removed k-cursor-grabbing from header when dragging.
• Removed k-touch-action-none and k-touch-action-auto from header wrapper.
• Removed k-cursor-grab and added k-cursor-move to the tile header.
• Removed k-layout-item-hint-reorder from k-layout-item-hint element.
• Removed k-pos-relative from wrapper.

ToolBar

• Added fillMode option. Class k-toolbar-solid is added to the wrapper element by default; varies based on the fillMode value.
• Added k-button-group-solid to ToolBarButtonGroup component wrapper.
• Removed k-toolbar-menu-button from ToolBarDropDownButton kendo-dropdownbutton element.
• Added k-toolbar-menu-button to the internal <button> element of the ToolBarDropDownButton component.

TimePicker

• Removed k-input-solid, k-rounded-md and k-input-md classes from the .k-input element.
• Moved the Set button to the right of the Cancel button in adaptive mode.

TreeList

• Integrated the Kendo UI for Angular Pager component.
• Integrated Kendo UI for Angular Input components.
• Removed the k-filtercell-boolean class from the wrapper of the boolean filter cell.
• Removed the k-sort-icon wrapper element from headers when there is no sorting indicator rendered.
• Removed the class k-grid-table-wrap from the content table wrapper.

Typography

• The margin option is removed (a documented breaking change). Adding margin-related classes and styles is no longer a built-in feature.