New to Kendo UI for jQuery? Download free 30-day trial

2022 Releases

This article lists the breaking or important changes in the 2022 releases of Kendo UI.

Kendo UI 2022 R3

Selectable

As of the 2022 R3 release, the Selectable events mechanism is altered for a variety of the components. The change event will now be fired only when selection/deselection is performed. Invoking the client-side API methods would not fire the event as well.

Below you can find a list of the impacted components:

  • Grid
  • Calendar
  • MultiViewCalendar
  • ListBox
  • ListView
  • TreeList
  • FileManager
  • Gantt

Kendo UI 2022 R2 SP1

Toolbar

As of 2022 R2 SP1, the Toolbar's SplitButton is replaced with the standalone SplitButton widget.

Old vs New Rendering of the SplitButton in the Toolbar

Old

    <div class="k-split-button k-button-group k-rounded-md" tabindex="0" id="f1beae85-2137-47b1-8ed0-a7cb1465a5ea_wrapper" data-overflow="auto" data-uid="f1beae85-2137-47b1-8ed0-a7cb1465a5ea" aria-disabled="false">
        <a role="button" class="k-button k-button-md k-button-rectangle k-rounded-md k-button-solid k-button-solid-base" type="splitButton" data-uid="f1beae85-2137-47b1-8ed0-a7cb1465a5ea" data-overflow="auto" aria-disabled="false">
            <span class="k-button-text">Paste</span>
        </a>
        <a class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button k-split-button-arrow">
            <span class="k-icon k-i-arrow-s"></span>
            </a>
    </div>
    <ul class="k-list-container k-split-container k-group k-menu-group k-reset k-menu-group-md k-popup k-state-border-up" id="f1beae85-2137-47b1-8ed0-a7cb1465a5ea_optionlist" data-uid="a57c3928-7cc4-44b4-9695-91f65fd99664" data-role="popup" aria-hidden="false" style="position: absolute; font-family: Arial, Helvetica, sans-serif; min-width: 77px; display: block; transform: translateY(0px);">
        <li class="k-menu-item k-item">
            <span tabindex="0" class="k-link k-menu-link" data-uid="d25b1945-3901-44a4-b824-14c612ef17f5" data-overflow="auto" aria-disabled="false">
                <span class="k-icon k-i-paste-plain-text"></span>
                <span class="k-menu-link-text">Keep Text Only</span></span>
        </li>
        <li class="k-menu-item k-item">
            <span tabindex="0" class="k-link k-menu-link" data-uid="bb574191-a650-4f2a-9f7d-7a82b5aea10a" data-overflow="auto" aria-disabled="false">
                <span class="k-icon k-i-paste-as-html"></span>
                <span class="k-menu-link-text">Paste as HTML</span>
            </span>
        </li>
    </ul>

New

    <div id="default_wrapper" class="k-split-button k-button-group k-rounded-md">
        <button id="default" data-role="splitbutton" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="default_buttonmenu" aria-label="Paste splitbutton">
        <span class="k-icon k-i-paste k-button-icon"></span>
        <span class="k-button-text">Paste</span></button><button tabindex="-1" aria-label="arrow-button" class="k-split-button-arrow k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button" type="button"><span class="k-icon k-i-arrow-s k-button-icon"></span>
        </button>
    </div>
    <div data-role="buttonmenu" class="k-menu-popup k-popup k-group k-reset k-split-wrapper k-state-border-up" aria-hidden="false" style="display: block; position: absolute; min-width: 99px; transform: translateY(0px);">
    <ul role="menu" class="k-group k-menu-group k-reset k-menu-group-md" id="default_buttonmenu">
      <li id="keep-text" role="menuitem" class="k-item k-menu-item" tabindex="0">
          <span class="k-link k-menu-link">
              <span class="k-icon k-i-paste-plain-text"></span>
              <span class="k-menu-link-text">Keep Text Only</span>
            </span>
        </li>
      <li id="paste-html" role="menuitem" class="k-item k-menu-item" tabindex="0">
          <span class="k-link k-menu-link">
              <span class="k-icon k-i-paste-as-html"></span>
              <span class="k-menu-link-text">Paste as HTML</span>
            </span>
        </li>
   </ul>
</div>

Kendo UI R1 2022 SP2

Button

As of the 2022 R1 SP2 release the shape configuration option of the Button component is no longer available. The Button height is determined by the specified size and font-size, while the width depends on the size, font-size, and text length.

Kendo UI 2022 R1 SP1

Scheduler

As of the 2022 R1 SP1 release the Scheduler exposes a modified keyboard navigation behavior. The main reason behind the change is to make the widget a single Tab stop element on the page. This allows for easier navigation to and away from the Scheduler. For further details on the new keyboard navigation behavior, refer to the Keyboard Navigation demo.

Kendo UI 2022 R1

The R1 2022 release begins to introduce a concept of sizing component capabilities. The components will be able to be configured through:

  • [themeColor]
  • [size]
  • [shape]
  • [rounded]
  • [fillMode]

For more information regarding the concept and reasoning behind it, refer to the article about styling.

Updated Components

The following table lists the first part of the updated components.

Component Appearance Documentation
AutoComplete AutoComplete Appearance Documentation
Button Button Appearance Documentation
ColorPicker ColorPicker Appearance Documentation
ComboBox ComboBox Appearance Documentation
DateInput DateInput Appearance Documentation
DatePicker DatePicker Appearance Documentation
DateRangePicker DateRangePicker Appearance Documentation
DateTimePicker DateTimePicker Appearance Documentation
DropDownList DropDownList Appearance Documentation
DropDownTree DropDownTree Appearance Documentation
FloatingActionButton FloatingActionButton Appearance Documentation
MaskedTextBox MaskedTextBox Appearance Documentation
Menu Menu Appearance Documentation
MultiColumnComboBox MultiColumnComboBox Appearance Documentation
MultiSelect MultiSelect Appearance Documentation
NumericTextBox NumericTextBox Appearance Documentation
Slider Slider Appearance Documentation
Switch Switch Appearance Documentation
TextArea TextArea Appearance Documentation
TextBox TextBox Appearance Documentation
TimePicker TimePicker Appearance Documentation
TreeView TreeView Appearance Documentation`

Button

All button variables in SASS themes are changed and have prefix $kendo-. For example, $button-* is changed to $kendo-button-*. The reason behind this change is to to prevent overwriting custom variables.

The state variables $button-focused and $button-hovered are changed to $kendo-button-focus and $kendo-button-hover.

In this article