Skip to content

Commit 0c2ffdb

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 288d51f commit 0c2ffdb

File tree

1 file changed

+281
-57
lines changed

1 file changed

+281
-57
lines changed

‎docs/backwards-compatibility/2023-backward-compatibility.md

Lines changed: 281 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -10,70 +10,294 @@ position: 0
1010

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

13-
## Kendo UI 2023 R1
13+
## Kendo UI 2023 R1 SP1
1414

15-
**ToolBar**
15+
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:
1616

17-
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.
18-
19-
```html
20-
<div id="toolbar"></div>
21-
<script>
22-
$("#toolbar").kendoToolBar({
23-
items: [
24-
{ type: "button", id: "btn1", text: "Button 1", togglable: true },
25-
{ type: "button", id: "btn2", text: "Button 2" }
26-
],
27-
click: function(e) {
28-
console.log("click:");
29-
console.log(kendo.widgetInstance(e.target));
30-
},
31-
toggle: function(e) {
32-
console.log("toggle: ", e.checked);
33-
console.log(kendo.widgetInstance(e.target));
34-
}
35-
});
36-
</script>
37-
```
17+
* [Grid]({% slug overview_kendoui_grid_widget %})
18+
* [FileManager]({% slug overview_kendoui_filemanager_widget %})
19+
* [TreeList]({% slug overview_kendoui_treelist_widget %})
20+
* [Gantt]({% slug overview_kendoui_gantt_widget %})
21+
* [PivotGrid]({% slug overview_kendoui_pivotgrid_widget %})
22+
* [ListView]({% slug overview_kendoui_listview_widget %})
23+
* [ProgressBar]({% slug overview_kendoui_progressbar_widget %})
24+
* [Notification]({% slug overview_kendoui_notification_widget %})
25+
* [Upload]({% slug overview_kendoui_upload_widget %})
26+
* [Pager]({% slug overview_kendoui_pager_widget %})
27+
* [Toolbar]({% slug api-web-toolbar %})
28+
* [Window]({% slug overview_kendoui_window_widget %})
29+
* [Editor]({% slug overview_kendoui_editor_widget %})
30+
* [Calendar]({% overview_kendoui_calendar_widget %}) and [MultiViewCalendar](overview_kendoui_multiviewcalendar_widget)
31+
* Animation Containers and their dependent components
3832

39-
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>`).
33+
**Animation Containers**
4034

41-
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.
35+
* 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.
36+
* The `.k-animation-container` elements are now holding another wrapping element with the `.k-child-animation-container` class.
4237

43-
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.
38+
**Grid**
4439

45-
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.
40+
> All rendering changes in the Grid also apply to the FileManager, TreeList, Gantt, and PivotGrid as these components use the Grid internally.
4641
47-
## Kendo UI 2023 R1 SP1
42+
* 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.
43+
* The `.k-widget` class is now removed from the `.k-grid` element.
44+
* 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.
45+
* The sorting icon is now wrapped in a `<span>` element:
46+
47+
```
48+
<span class="k-sort-icon">
49+
<span class="k-icon k-i-sort-asc-small"></span>
50+
</span>
51+
```
52+
53+
* The headings of the Grid are now updated with the new header rendering:
54+
55+
```
56+
<!--- Default header cell --->
57+
<th class="k-header">
58+
<span class="k-cell-inner">
59+
<span class="k-link">
60+
<span class="k-column-title"> ProductName </span>
61+
</span>
62+
</span>
63+
</th>
64+
65+
<!--- Header cell with sorting--->
66+
<th class="k-header k-filterable">
67+
<span class="k-cell-inner">
68+
<span class="k-link">
69+
<span class="k-column-title"> ProductName </span>
70+
<span class="k-sort-icon">
71+
<span class="k-icon k-i-sort-asc-small"></span>
72+
</span>
73+
</span>
74+
</span>
75+
</th>
76+
77+
<!--- Header cell with filter menu--->
78+
<th class="k-header k-filterable">
79+
<span class="k-cell-inner">
80+
<span class="k-link">
81+
<span class="k-column-title"> ProductName </span>
82+
</span>
83+
<a href="#" class="k-grid-filter-menu k-grid-header-menu"><Icon name="filter" /></a>
84+
</span>
85+
</th>
86+
87+
<!--- Header cell with column menu--->
88+
<th class="k-header k-filterable">
89+
<span class="k-cell-inner">
90+
<span class="k-link">
91+
<span class="k-column-title"> ProductName </span>
92+
</span>
93+
<a class="k-grid-header-menu k-grid-column-menu" href="#"><Icon name="more-vertical" /></a>
94+
</span>
95+
</th>
96+
```
97+
98+
* 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.
99+
* By default, the table elements inside the Grid are of medium-sized. The `.k-table-md` class is added to the `.k-table` element.
100+
* 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.
101+
* The `alt` rows now have the `.k-table-alt-row` class.
102+
103+
**ListView**
104+
105+
* The `.k-pager-wrap` class is now removed from the `.k-pager` element.
106+
* The `.k-listview-item` wrapper is now added to the item templates.
107+
* The `.k-listview-item` class is now removed from the item template children.
108+
* The `.k-item` class is now replaced with `.k-progressbar-chunk`.
109+
110+
**ProgressBar**
111+
112+
* The `.k-widget` class is now removed.
113+
* A `.k-chunk-progressbar` class has been added to the Chunk ProgressBar.
114+
* The `.k-progressbar-chunks` class has been added to the `<ul>` element.
115+
* An additional `.k-progressbar-value` class is now added to the `<div>` element with the `.k-selected` class in the default ProgressBar.
116+
117+
**Notification**
118+
119+
* The `.k-widget` class is now removed.
120+
* The `k-notification-wrap` class has also been removed.
121+
* 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`.
122+
123+
```
124+
<span class="k-icon k-i-x">...</span>
125+
```
126+
127+
* A `.k-notification-actions` container added wrapping to the closable icon.
128+
129+
```
130+
<span class="k-notification-actions">
131+
<span class="k-notification-action k-notification-close-action">
132+
<span class="k-icon k-i-x">...</span>
133+
</span>
134+
...
135+
</span>
136+
```
137+
138+
**Upload**
139+
140+
* The `.k-widget` class is now removed from the `.k-upload` element.
141+
* All `<em>` and `<strong>` elements have been replaced with `span` or `<div>` elements.
142+
* A `.k-upload-dropzone` class has been added to the `.k-dropzone` element.
143+
* The `k-dropzone-hover` and `.k-dropzone-hovered` classes are now replaced with the `.k-hover` class.
144+
* The **Upload** button and input are no longer nested but are on one level, wrapped inside a `<div>` element.
145+
146+
```
147+
<div class="k-upload-button-wrap">
148+
<label for="upload-input"> <!-->optional element<-->
149+
<button class="k-upload-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
150+
<span class="k-button-text">Select files...</span>
151+
</button>
152+
</label>
153+
<input id="upload-input">
154+
</div>
155+
```
156+
157+
* The `.k-upload-status-total` class has been removed from the `.k-upload-status` element.
158+
* The `.k-validation-icon` class is now removed from the `.upload-status` icon.
159+
* The `.k-file-error` class has been added to `.k-file-invalid`.
160+
* `.k-file-single` and `.k-file-multiple` wrapper elements have been added inside the `.k-file` element for single and multiple files respectively.
161+
* 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`.
162+
* The `.k-file-group` icon class is now replaced with the `.k-file-icon` class.
163+
* The `.k-file-name-size-wrap` class is now replaced with the `.k-file-info` class.
164+
* The `.k-file-name-invalid` class has been removed from the `.k-file-name` element.
165+
* The `.k-text-success` and `.k-text-error` classes have been removed from the `.k-validation-message` element.
166+
* The `.k-file-information` class is now replaced with a `.k-file-summary` class.
167+
* The Upload action buttons are no longer wrapped in a `.k-upload-status` class but in the `.k-upload-actions` class.
168+
* The progress bar is now replaced with the [ProgressBar](/controls/interactivity/progressbar/overview) component without visible labels.
169+
170+
**Pager**
171+
172+
* The `.k-widget` class is now removed from the `.k-pager` element.
173+
* The `.k-pager-numbers` element is now a `<div>` element.
174+
* 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.
175+
* 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.
176+
* The `.k-link` class is now removed from the component.
177+
* The `.k-pager-wrap` class selector is now removed.
178+
* The `.k-pager-mobile-md` and `.k-pager-mobile-sm` classes are added when internal Pager elements are shown or hidden.
179+
180+
**Toolbar**
181+
182+
* The `.k-widget` class is now removed from the `.k-toolbar` element.
183+
* The `.k-toolbar-resizable` class is added when the Toolbar is responsive.
184+
* The `.k-overflow-anchor` class has been replaced with the `.k-toolbar-overflow-button` class.
185+
186+
**Window**
187+
188+
* The `.k-window-titleless` class is now removed.
189+
* The `.k-window-actions` class in the title bar has been replaced with `.k-window-titlebar-actions`.
190+
* The `.k-window-buttongroup` and `.k-window-buttons` classes are replaced with `.k-window-actions`.
191+
* The `.k-window-titlebar-action` class is added to action buttons inside the title bar.
192+
* The `.k-dialog-{something}` classes are removed from the component.
193+
194+
**Dialog**
195+
196+
* A `.k-window` class is now added to the component.
197+
* The `.k-dialog-actions` class in the title bar has been replaced with the `.k-dialog-titlebar-actions` class.
198+
* The `.k-window-titlebar-action` and `.k-dialog-titlebar-action` classes have been added to the action buttons.
199+
* The `.k-dialog-buttongroup` and `.k-dialog-buttons` classes are now replaced with `.k-dialog-actions`.
200+
* 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.
201+
202+
```
203+
<!-- Primary themeColor -->
204+
<div class="k-window k-dialog k-dialog-primary">...</div>
205+
206+
<!-- Dark themeColor -->
207+
<div class="k-window k-dialog k-dialog-dark">...</div>
208+
209+
<!-- Light themeColor -->
210+
<div class="k-window k-dialog k-dialog-light">...</div>
211+
```
48212
49213
**Editor**
50214
51-
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.
52-
53-
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.
54-
55-
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:
56-
57-
```dojo
58-
<textarea id="editor" rows="10" cols="30" style="width:100%; height: 440px;"></textarea>
59-
$("#editor").kendoEditor({
60-
tools: [
61-
["bold"],
62-
["italic"],
63-
["underline"],
64-
["strikethrough"]
65-
]
66-
});
67-
```
68-
69-
Multiple tools could also be grouped in a group by following the same approach:
70-
71-
```dojo
72-
<textarea id="editor" rows="10" cols="30" style="width:100%; height: 440px;"></textarea>
73-
$("#editor").kendoEditor({
74-
tools: [
75-
["bold", "italic"],
76-
["underline", "strikethrough"]
77-
]
78-
});
79-
```
215+
* 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 %}).
216+
* 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.
217+
* 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:
218+
219+
```dojo
220+
<textarea id="editor" rows="10" cols="30" style="width:100%; height: 440px;"></textarea>
221+
$("#editor").kendoEditor({
222+
tools: [
223+
["bold"],
224+
["italic"],
225+
["underline"],
226+
["strikethrough"]
227+
]
228+
});
229+
```
230+
231+
You can also group multiple tools in a group by following the same approach:
232+
233+
```dojo
234+
<textarea id="editor" rows="10" cols="30" style="width:100%; height: 440px;"></textarea>
235+
$("#editor").kendoEditor({
236+
tools: [
237+
["bold", "italic"],
238+
["underline", "strikethrough"]
239+
]
240+
});
241+
```
242+
243+
* The `table` element has been replaced with a `<div>` element.
244+
* The toolbar is no longer wrapped inside the `.k-editor-toolbar-wrap` element.
245+
* The toolbar is no longer a `<ul>` with `<li>` elements, but a [Toolbar](/controls/navigation/toolbar/overview) component.
246+
* The `.k-editor-toolbar` class is now added to the toolbar.
247+
* The `.k-resizable` class has been replaced with the `.k-editor-resizable` one.
248+
249+
**Editor Popup**
250+
251+
* Instead of the Dialog component, all Editor popups now use the [Window]({% slug overview_kendoui_window_widget %}).
252+
* The `.k-editor-window` has been added to all popups.
253+
* All inputs in popups have been replaced with the TextBox, NumericTextBox, and other respective components.
254+
* 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.
255+
* Action buttons have been moved outside the form.
256+
* The `.k-editor-table-wizard-dialog` class has been replaced with the `.k-editor-table-wizard-window` class.
257+
258+
**Calendar and MultiViewCalendar**
259+
260+
* The text of the title buttons is now wrapped in a `<span>` element with the `.k-button-text` class.
261+
* The navigation classes have been replaced as follows:
262+
263+
```
264+
k-nav-today k-calendar-nav-today
265+
k-nav-prev k-calendar-nav-prev
266+
k-nav-next k-calendar-nav-next
267+
k-nav-fast k-calendar-nav-today
268+
k-prev-view k-calendar-nav-prev
269+
k-next-view k-calendar-nav-next
270+
```
271+
272+
273+
## Kendo UI 2023 R1
274+
275+
**ToolBar**
276+
277+
* 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.
278+
279+
```html
280+
<div id="toolbar"></div>
281+
<script>
282+
$("#toolbar").kendoToolBar({
283+
items: [
284+
{ type: "button", id: "btn1", text: "Button 1", togglable: true },
285+
{ type: "button", id: "btn2", text: "Button 2" }
286+
],
287+
click: function(e) {
288+
console.log("click:");
289+
console.log(kendo.widgetInstance(e.target));
290+
},
291+
toggle: function(e) {
292+
console.log("toggle: ", e.checked);
293+
console.log(kendo.widgetInstance(e.target));
294+
}
295+
});
296+
</script>
297+
```
298+
299+
* 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>`).
300+
* 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 %}).
301+
* 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.
302+
* The ToolBar **Overflow** menu will open upon each of its button clicks. That is the behavior of the ContextMenu component used in that scenario.
303+

0 commit comments

Comments
 (0)