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


  • R1 2023 is the last official release of Kendo jQuery, where Less Themes are supported and shipped with the product.
  • With the upcoming R3 2023 release, the fonts will no longer be delivered with the Telerik and Kendo UI themes. To continue using the font icons, you must add a separate CDN reference to the font icons stylesheet.

Kendo UI R1 2022 introduces new rendering for some of the components. As the new rendering implementation is an ongoing effort, changes and touch-ups can occur after the release.

The new rendering will cover the entire list of the Kendo UI web components.

Larger visual updates like these can have implications in the form of visual regressions which can appear when upgrading from a version before R1 2022.

The team have caught and resolved most of the visual regression issues while getting ready for R1 2022. However, it is possible that some additional post-release problems occur. The team will address all issues as quickly as possible and will continue to push out updates with fixes to the themes and components after the R1 2022 release.

What Is the Reason behind These Changes?

The new rendering provides developers with the ability to change a particular styling option of a component. This helps to avoid the need of manually overriding the CSS styles of a component.

One of the main reasons behind these changes is the feedback provided by the customers. It shows that currently the themes are difficult to customize and require more effort.

The emergence of design languages over the past few years is also an important factor. Customers prefer to customize the default themes to fit their business requirements, instead of using them straight out-of-the-box.

That said, the new rendering aims to ease the customization of components and allow developers to implement any design requirements with less work.

Styling Options

The styling options under the hood represent a set of CSS classes applied in the rendering to change the appearance of a component. Each individual component supports different options. For example, a textarea element can have a configurable overflow, however, this option doesn't make sense in the context of a button element.

Check the Appearance documentation articles in the Updated Components section to learn about the available styling options for each component.

Overriding Default Component Options

The new rendering implementations also enable you to globally change the default styling options of the components.

The following example showcases how to overwrite the default size of the Button component. Note that if the code is placed at the root of the project right after the kendo.all.min.js script, all Kendo UI Button components will have a large size by default. If the code is placed at the beginning of a particular page, all Kendo UI Button components on that page will have a large size by default.

    kendo.ui['Button'].fn.options['size'] = "large";

The overriding mechanism follows the kendo.ui[WidgetName].fn.options[OptionName] = [value]; structure.

The following example showcases a full implementation of the override:

    kendo.ui['Button'].fn.options['size'] = "large";
    kendo.ui['Button'].fn.options['rounded'] = "full";

<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<button id="button4">Button 4</button>

        themeColor: "primary"

        themeColor: "warning"

        shape: "secondary"

        themeColor: "dark"

State Classes

Apart from the new styling options, the state classes have also been changed. The k-state-default class has been removed from the entire Kendo suite, except for the PivotGrid, where logic relies on it.

The following table showcases the old and updated versions of the Kendo state classes:

Old Class New Class
k-state-default N/A
k-state-active k-active
k-state-selected k-selected
k-state-disabled k-disabled
k-state-focus k-focus
k-state-hover k-hover

Updated Components

Component Appearance Documentation
AutoComplete AutoComplete Appearance Documentation
Avatar Avatar 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

Less Themes Migration

R1 2023 is the last official release of Kendo jQuery, where Less Themes are supported and shipped with the product.

For additional information about the required steps for migrating to a Sass theme, visit the Less Migration help article.

In this article