New to Kendo UI for AngularStart a free 30-day trial

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.

  • 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.
  • 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.
  • 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.
  • 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.