Skip to content

Commit

Permalink
Sync with Kendo UI Professional
Browse files Browse the repository at this point in the history
  • Loading branch information
Kendo Bot committed Mar 15, 2023
1 parent 288d51f commit 0c2ffdb
Showing 1 changed file with 281 additions and 57 deletions.
338 changes: 281 additions & 57 deletions docs/backwards-compatibility/2023-backward-compatibility.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,70 +10,294 @@ position: 0

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

## Kendo UI 2023 R1
## Kendo UI 2023 R1 SP1

**ToolBar**
As of the 2023 R1 SP1 release, to unify their support for the new [ThemeBuilder Pro](https://docs.telerik.com/themebuilder/introduction), the following components have changed their rendering:

Starting with R1 2023 the tools in the ToolBar are actual widget instances (instead of ToolBar items). As a result, the `click` and `toggle` event arguments objects no longer hold a reference to the ToolBar item (`e.item`). From that release on, the widget instance of the tool can be taken using the `kendo.widgetInstance()` method. When rendered in the OverflowMenu or the popup of a DropDownButton/SplitButton those tools are menu items. Hence, they are not Kendo widgets. A reference to the jQuery elements is still available in those cases in the `e.target` event argument.

```html
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{ type: "button", id: "btn1", text: "Button 1", togglable: true },
{ type: "button", id: "btn2", text: "Button 2" }
],
click: function(e) {
console.log("click:");
console.log(kendo.widgetInstance(e.target));
},
toggle: function(e) {
console.log("toggle: ", e.checked);
console.log(kendo.widgetInstance(e.target));
}
});
</script>
```
* [Grid]({% slug overview_kendoui_grid_widget %})
* [FileManager]({% slug overview_kendoui_filemanager_widget %})
* [TreeList]({% slug overview_kendoui_treelist_widget %})
* [Gantt]({% slug overview_kendoui_gantt_widget %})
* [PivotGrid]({% slug overview_kendoui_pivotgrid_widget %})
* [ListView]({% slug overview_kendoui_listview_widget %})
* [ProgressBar]({% slug overview_kendoui_progressbar_widget %})
* [Notification]({% slug overview_kendoui_notification_widget %})
* [Upload]({% slug overview_kendoui_upload_widget %})
* [Pager]({% slug overview_kendoui_pager_widget %})
* [Toolbar]({% slug api-web-toolbar %})
* [Window]({% slug overview_kendoui_window_widget %})
* [Editor]({% slug overview_kendoui_editor_widget %})
* [Calendar]({% overview_kendoui_calendar_widget %}) and [MultiViewCalendar](overview_kendoui_multiviewcalendar_widget)
* Animation Containers and their dependent components

Starting with R1 2023 the ToolBar buttons will always be rendered as `<button>` elements (instead of `<a>`) unless they have a `url` configured in their options. If a `url` is present, those will be rendered as links (`<a>`).
**Animation Containers**

Starting with R1 2023 the ToolBar no longer requires its custom tools to be registered. To explore the new simplified way of defining custom tools in the ToolBar, refer to the [Custom Tools]({% slug custom_tools_kendoui_toolbar %}) documentation article.
* Animation containers are all components that represent or hold a popup, for example, the Grid filter menu and column, and popup editor, Tooltip, SplitButton, DropDownList, and more.
* The `.k-animation-container` elements are now holding another wrapping element with the `.k-child-animation-container` class.

Starting with R1 2023 release the ToolBar no longer allows the use of togglable and non-togglable buttons in the same ButtonGroup. If such a configuration is present, all buttons will be rendered and behave as simple (non-togglable) buttons.
**Grid**

Starting with R1 2023 release the ToolBar Overflow menu will open on each click on its button. That is the behavior of the ContextMenu component used in that scenario.
> All rendering changes in the Grid also apply to the FileManager, TreeList, Gantt, and PivotGrid as these components use the Grid internally.
## Kendo UI 2023 R1 SP1
* Except for the popups, the sizing option now propagates to all elements inside the Grid. These include the table, toolbar, pager, buttons, inputs, pickers, chip lists, and more.
* The `.k-widget` class is now removed from the `.k-grid` element.
* The sorting icons will be replaced with their `.k-i-sort-asc-small` and `.k-i-sort-desc-small` general names instead of their `.k-i-sort-asc-sm` and `.k-i-sort-desc-sm` aliases.
* The sorting icon is now wrapped in a `<span>` element:

```
<span class="k-sort-icon">
<span class="k-icon k-i-sort-asc-small"></span>
</span>
```

* The headings of the Grid are now updated with the new header rendering:

```
<!--- Default header cell --->
<th class="k-header">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title"> ProductName </span>
</span>
</span>
</th>
<!--- Header cell with sorting--->
<th class="k-header k-filterable">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title"> ProductName </span>
<span class="k-sort-icon">
<span class="k-icon k-i-sort-asc-small"></span>
</span>
</span>
</span>
</th>
<!--- Header cell with filter menu--->
<th class="k-header k-filterable">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title"> ProductName </span>
</span>
<a href="#" class="k-grid-filter-menu k-grid-header-menu"><Icon name="filter" /></a>
</span>
</th>
<!--- Header cell with column menu--->
<th class="k-header k-filterable">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title"> ProductName </span>
</span>
<a class="k-grid-header-menu k-grid-column-menu" href="#"><Icon name="more-vertical" /></a>
</span>
</th>
```

* The `.k-table`, `.k-table-row`, `.k-table-thead`, `.k-table-tbody`, `.k-table-tfoot`, `.k-table-th`, `.k-table-td`, and `.k-table-group-row` table-specific classes are now added to the Grid.
* By default, the table elements inside the Grid are of medium-sized. The `.k-table-md` class is added to the `.k-table` element.
* The `.k-grid-header-table` , `.k-grid-table`, and `.k-grid-footer-table` Grid-specific classes are now added to the header, body, and footer tables.
* The `alt` rows now have the `.k-table-alt-row` class.

**ListView**

* The `.k-pager-wrap` class is now removed from the `.k-pager` element.
* The `.k-listview-item` wrapper is now added to the item templates.
* The `.k-listview-item` class is now removed from the item template children.
* The `.k-item` class is now replaced with `.k-progressbar-chunk`.

**ProgressBar**

* The `.k-widget` class is now removed.
* A `.k-chunk-progressbar` class has been added to the Chunk ProgressBar.
* The `.k-progressbar-chunks` class has been added to the `<ul>` element.
* An additional `.k-progressbar-value` class is now added to the `<div>` element with the `.k-selected` class in the default ProgressBar.

**Notification**

* The `.k-widget` class is now removed.
* The `k-notification-wrap` class has also been removed.
* The closable `<a class="k-icon k-i-close"></a>` notification icon is now replaced with a `<span>` element and the icon class `.k-i-close` name has been changed to `.k-i-x`.

```
<span class="k-icon k-i-x">...</span>
```

* A `.k-notification-actions` container added wrapping to the closable icon.

```
<span class="k-notification-actions">
<span class="k-notification-action k-notification-close-action">
<span class="k-icon k-i-x">...</span>
</span>
...
</span>
```

**Upload**

* The `.k-widget` class is now removed from the `.k-upload` element.
* All `<em>` and `<strong>` elements have been replaced with `span` or `<div>` elements.
* A `.k-upload-dropzone` class has been added to the `.k-dropzone` element.
* The `k-dropzone-hover` and `.k-dropzone-hovered` classes are now replaced with the `.k-hover` class.
* The **Upload** button and input are no longer nested but are on one level, wrapped inside a `<div>` element.

```
<div class="k-upload-button-wrap">
<label for="upload-input"> <!-->optional element<-->
<button class="k-upload-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
<span class="k-button-text">Select files...</span>
</button>
</label>
<input id="upload-input">
</div>
```

* The `.k-upload-status-total` class has been removed from the `.k-upload-status` element.
* The `.k-validation-icon` class is now removed from the `.upload-status` icon.
* The `.k-file-error` class has been added to `.k-file-invalid`.
* `.k-file-single` and `.k-file-multiple` wrapper elements have been added inside the `.k-file` element for single and multiple files respectively.
* The `.k-file-group-wrapper`, `.k-file-invalid-group-wrapper`, `.k-multiple-files-group-wrapperand`, and `.k-multiple-files-invalid-group-wrapper` classes are now replaced with `.k-file-icon-wrapper`.
* The `.k-file-group` icon class is now replaced with the `.k-file-icon` class.
* The `.k-file-name-size-wrap` class is now replaced with the `.k-file-info` class.
* The `.k-file-name-invalid` class has been removed from the `.k-file-name` element.
* The `.k-text-success` and `.k-text-error` classes have been removed from the `.k-validation-message` element.
* The `.k-file-information` class is now replaced with a `.k-file-summary` class.
* The Upload action buttons are no longer wrapped in a `.k-upload-status` class but in the `.k-upload-actions` class.
* The progress bar is now replaced with the [ProgressBar](/controls/interactivity/progressbar/overview) component without visible labels.

**Pager**

* The `.k-widget` class is now removed from the `.k-pager` element.
* The `.k-pager-numbers` element is now a `<div>` element.
* The `<a class="k-link k-page-nav"></a>` navigation buttons have been replaced with `<button class="k-pager-nav k-button k-button-{size} k-button-flat k-button-flat-base k-icon-button">...</button>` flat buttons.
* The `<span class="k-link></span>` page numbers are now replaced with `<button class="k-button k-button-{size} k-button-flat k-button-flat-primary">...</button>` flat primary buttons.
* The `.k-link` class is now removed from the component.
* The `.k-pager-wrap` class selector is now removed.
* The `.k-pager-mobile-md` and `.k-pager-mobile-sm` classes are added when internal Pager elements are shown or hidden.

**Toolbar**

* The `.k-widget` class is now removed from the `.k-toolbar` element.
* The `.k-toolbar-resizable` class is added when the Toolbar is responsive.
* The `.k-overflow-anchor` class has been replaced with the `.k-toolbar-overflow-button` class.

**Window**

* The `.k-window-titleless` class is now removed.
* The `.k-window-actions` class in the title bar has been replaced with `.k-window-titlebar-actions`.
* The `.k-window-buttongroup` and `.k-window-buttons` classes are replaced with `.k-window-actions`.
* The `.k-window-titlebar-action` class is added to action buttons inside the title bar.
* The `.k-dialog-{something}` classes are removed from the component.

**Dialog**

* A `.k-window` class is now added to the component.
* The `.k-dialog-actions` class in the title bar has been replaced with the `.k-dialog-titlebar-actions` class.
* The `.k-window-titlebar-action` and `.k-dialog-titlebar-action` classes have been added to the action buttons.
* The `.k-dialog-buttongroup` and `.k-dialog-buttons` classes are now replaced with `.k-dialog-actions`.
* A new `.k-dialog-{value}` theme color property has been added to the `.k-window` element. It supports the `primary`, `dark`, and `light` theme colors.

```
<!-- Primary themeColor -->
<div class="k-window k-dialog k-dialog-primary">...</div>
<!-- Dark themeColor -->
<div class="k-window k-dialog k-dialog-dark">...</div>
<!-- Light themeColor -->
<div class="k-window k-dialog k-dialog-light">...</div>
```

**Editor**

Starting with R1 2023 SP1 the Editor widget features an improved method to register custom Tools. The main difference with the previous implementation is the substitution of the `ToolTemplate` instance with a `ui` configuration object. An example of of the new approach of registering tools could be found in the [Create Custom Editor Tool]({% slug editor-custom-tool %}) KB article.

Starting with R1 2023 SP1 release the Editor no longer allows the use of togglable and non-togglable buttons in the same ButtonGroup of its ToolBar. If such a configuration is present, all buttons will be rendered as simple (non-togglable) buttons.

Starting with R1 2023 SP1 release the `break` pseudo tool is no longer needed in order to separate tools from the same logical group. In order to display such tools separately, you should simply place them in separate arrays in the `tools` configuration:

```dojo
<textarea id="editor" rows="10" cols="30" style="width:100%; height: 440px;"></textarea>
$("#editor").kendoEditor({
tools: [
["bold"],
["italic"],
["underline"],
["strikethrough"]
]
});
```

Multiple tools could also be grouped in a group by following the same approach:

```dojo
<textarea id="editor" rows="10" cols="30" style="width:100%; height: 440px;"></textarea>
$("#editor").kendoEditor({
tools: [
["bold", "italic"],
["underline", "strikethrough"]
]
});
```
* As of R1 2023 SP1, the Editor features an improved method to register custom tools. The main difference from the previous implementation is the substitution of the `ToolTemplate` instance with a `ui` configuration object. An example of the new approach of registering tools is available in the knowledge-base article on [creating custom Editor tools]({% slug editor-custom-tool %}).
* The Editor no longer allows the use of togglable and non-togglable buttons in the same ButtonGroup of its ToolBar. If such a configuration is present, all buttons will be rendered as simple (non-togglable) buttons.
* The `break` pseudo tool is no longer needed for separating tools from the same logical group. To display such tools separately, place them in separate arrays in the `tools` configuration:

```dojo
<textarea id="editor" rows="10" cols="30" style="width:100%; height: 440px;"></textarea>
$("#editor").kendoEditor({
tools: [
["bold"],
["italic"],
["underline"],
["strikethrough"]
]
});
```

You can also group multiple tools in a group by following the same approach:

```dojo
<textarea id="editor" rows="10" cols="30" style="width:100%; height: 440px;"></textarea>
$("#editor").kendoEditor({
tools: [
["bold", "italic"],
["underline", "strikethrough"]
]
});
```

* The `table` element has been replaced with a `<div>` element.
* The toolbar is no longer wrapped inside the `.k-editor-toolbar-wrap` element.
* The toolbar is no longer a `<ul>` with `<li>` elements, but a [Toolbar](/controls/navigation/toolbar/overview) component.
* The `.k-editor-toolbar` class is now added to the toolbar.
* The `.k-resizable` class has been replaced with the `.k-editor-resizable` one.

**Editor Popup**

* Instead of the Dialog component, all Editor popups now use the [Window]({% slug overview_kendoui_window_widget %}).
* The `.k-editor-window` has been added to all popups.
* All inputs in popups have been replaced with the TextBox, NumericTextBox, and other respective components.
* Instead of the `.k-edit-form-container`, `.k-edit-form-content`, `.k-edit-label classes`, and similar classe, the Form component is now used inside the popups.
* Action buttons have been moved outside the form.
* The `.k-editor-table-wizard-dialog` class has been replaced with the `.k-editor-table-wizard-window` class.

**Calendar and MultiViewCalendar**

* The text of the title buttons is now wrapped in a `<span>` element with the `.k-button-text` class.
* The navigation classes have been replaced as follows:

```
k-nav-today k-calendar-nav-today
k-nav-prev k-calendar-nav-prev
k-nav-next k-calendar-nav-next
k-nav-fast k-calendar-nav-today
k-prev-view k-calendar-nav-prev
k-next-view k-calendar-nav-next
```


## Kendo UI 2023 R1

**ToolBar**

* As of the R1 2023 release, the tools in the ToolBar are actual component instances instead of ToolBar items. As a result, the `click` and `toggle` event argument objects no longer hold a reference to the ToolBar item (`e.item`). From that release on, the component instance of the tool can be taken by using the `kendo.widgetInstance()` method. When rendered in the `OverflowMenu` or the popup of a DropDownButton or a SplitButton those tools are menu items. Hence, they are not Kendo UI controls. A reference to the jQuery elements is still available in those cases in the `e.target` event argument.

```html
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{ type: "button", id: "btn1", text: "Button 1", togglable: true },
{ type: "button", id: "btn2", text: "Button 2" }
],
click: function(e) {
console.log("click:");
console.log(kendo.widgetInstance(e.target));
},
toggle: function(e) {
console.log("toggle: ", e.checked);
console.log(kendo.widgetInstance(e.target));
}
});
</script>
```

* The ToolBar buttons will always be rendered as `<button>` elements (instead of `<a>`) unless they have a `url` configured in their options. If a `url` is present, those will be rendered as links (`<a>`).
* The ToolBar no longer requires you to register its custom tools. To explore the new simplified way of defining custom tools in the ToolBar, refer to the article about the [custom tools of the ToolBar]({% slug custom_tools_kendoui_toolbar %}).
* The ToolBar won't allow you to use togglable and non-togglable buttons in the same ButtonGroup. If such a configuration is present, all buttons will be rendered and behave as simple (non-togglable) buttons.
* The ToolBar **Overflow** menu will open upon each of its button clicks. That is the behavior of the ContextMenu component used in that scenario.

0 comments on commit 0c2ffdb

Please sign in to comment.