Hi,
Using Fluor´s commercial purchase, we were able to get latest kendoui.for.jquery.2022.3.913.commercial, previously we were using v2019.1.220
After migration, I see that when using a kendoTreeList, that has a column template, it does not properly render the template content.
Template to render:
<script id="actions-template" type="text/x-kendo-template">
<div id="actions-revenue" ng-show="options.displayPeriod =='MONTHLY'">
<a class="delay-input-screen-pbwbs-overview pl-1" id="delayButton-#: id #" style="display: none;">
<i class="fas fa-calendar-alt" /></a>
</div>
<div id="actions-edit" ng-show="options.displayPeriod =='MONTHLY'">
<a class="edit-input-screen-pbwbs-overview pl-1" id="editButton-#: id #" style="display: none;">
<i class="fas fa-pencil-alt" /></a>
</div>
<div id="actions-delete" ng-show="options.displayPeriod =='MONTHLY'">
<a class="delete-input-screen-pbwbs-overview pl-1" id="deleteButton-#: id #" style="display: none;">
<i class="fas fa-trash-alt" /></a>
</div>
</script>
Rendered template (good one) with previous version v2019.1.220
<td role="gridcell" style="white-space: nowrap;">
<div id="actions-revenue" ng-show="options.displayPeriod =='MONTHLY'">
<a class="delay-input-screen-pbwbs-overview pl-1" id="delayButton-3" ><i class="fas fa-calendar-alt"></i></a>
</div>
<div id="actions-edit" ng-show="options.displayPeriod =='MONTHLY'">
<a class="edit-input-screen-pbwbs-overview pl-1" id="editButton-3" ><i class="fas fa-pencil-alt"></i></a>
</div>
<div id="actions-delete" ng-show="options.displayPeriod =='MONTHLY'">
<a class="delete-input-screen-pbwbs-overview pl-1" id="deleteButton-3" ><i class="fas fa-trash-alt"></i></a>
</div>
</td>
Rendered template (buggy one) after upgrading to version 2022.3.913
<td role="gridcell" aria-describedby="d51133dd-fb81-4e68-9d56-4d61aab7f81a" class="" style="white-space: nowrap;">
<div id="actions-revenue" ng-show="options.displayPeriod =='MONTHLY'">
<a class="delay-input-screen-pbwbs-overview pl-1" id="delayButton-3" >
<i class="fas fa-calendar-alt"></i></a><i class="fas fa-calendar-alt">
</i></div><i class="fas fa-calendar-alt">
<div id="actions-edit" ng-show="options.displayPeriod =='MONTHLY'">
<a class="edit-input-screen-pbwbs-overview pl-1" id="editButton-3" >
<i class="fas fa-pencil-alt"></i></a><i class="fas fa-pencil-alt">
</i></div><i class="fas fa-pencil-alt">
<div id="actions-delete" ng-show="options.displayPeriod =='MONTHLY'">
<a class="delete-input-screen-pbwbs-overview pl-1" id="deleteButton-3" >
<i class="fas fa-trash-alt"></i></a><i class="fas fa-trash-alt">
</i></div><i class="fas fa-trash-alt">
</i></i></i></td>
As we can see in the original template there are icons wrapped in anchors, previous version rendered the template ok, but new version scrambles this tags…
I have also been playing in the Dojo and this seems to be the case.
Regards….
There are several problems when extending a widget .
In this example we have extended the DropDownTree.
- Some properties like fillMode, no matter if we set in in the options or in the extended widget it self (kendoDemoDropDownTree)
sets the value but never actually applies. Also the dataSource must be in the following format
selectedProductId: [{ id: "a" }, { id: "c" }],and not
selectedProductId: ["b", "c"]So some properties are supported and other that have been added later not.
I present you the source code (https://dojo.telerik.com/ewewERiD)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default-ocean-blue.min.css">
</head>
<body>
<input id="dropdowntreeExt" data-bind="value: selectedProductId">
<script>
(function ($) {
var kendo = window.kendo,
ui = kendo.ui,
DropDownTree = ui.DropDownTree;
var DemoDropDownTree = DropDownTree.extend({
init: function (element, options) {
DropDownTree.fn.init.call(this, element, options);
$(element).parent().addClass("k-picker-solid k-picker k-rounded");
},
options: {
name: "DemoDropDownTree",
checkboxes: true,
fillMode: "flat"
}
});
ui.plugin(DemoDropDownTree);
})(jQuery);
var viewModel = kendo.observable({
selectedProductId: [{ id: "a" }, { id: "c" }],
//selectedProductId: ["b", "c"],
products: [
{ id: "a", name: "Coffee" },
{ id: "b", name: "Tea" },
{ id: "c", name: "Juice" }
]
});
kendo.bind($("#dropdowntreeExt"), viewModel);
//kendoDemoDropDownTree
//kendoDropDownTree
$("#dropdowntreeExt").kendoDemoDropDownTree({
valuePrimitive: true,
dataTextField: "name",
dataValueField: "id",
//checkboxes: true,
dataSource: viewModel.products//,
//fillMode: "flat"
});
alert($("#dropdowntreeExt").data("kendoDemoDropDownTree").options['fillMode']);
</script>
</body>
</html>(!) This also applies in the latest versions as well (2022R2 and 2022R3).
2. if you place the properties in kendoDropDownTree, everything works well and the datasource also accepts the format selectedProductId: ["b", "c"]
3. Many options, like autoWidth property, don't apply in extended widgets (i.e. MultiSelect, DropDownList, DropDownTree etc).
4, In DropDownTree for the extended widget, valuePrimitive: true is not applicable. Instead of returning an array of the selected keys, it returns an array of the entire item.
Bug report
The recurring events are not rendered as expected in some scenarios depending on the start time set.
Reproduction of the problem
- Open the Dojo
The difference between the first and the second event is the start time.
Current behavior
The first event is not rendered for every week, but it is rendered for every second week.
Expected/desired behavior
When the recurring rule is 'FREQ=WEEKLY' the event should be displayed every week, despite of its starting time.
The issue is a regression. The last working version is 2020 R1 SP1 (2020.1.219).
In 2020 R1 SP2 (2020.1.406) there is a bug related to missing events fixed with 2020.2.513. - Dojo with 2020.1.406
Starting with 2020 R2 (2020.2.513) the current behavior is introduced.
The issue might be related also to: #5978
Environment
- Kendo UI version: 2022.2.802
- Browser: [all ]
Pager gets a wrong / small `-sm` class on grid. Corrected when browser window resizes.
**Repro:**
1) Make window big on desktop
2) Run this: https://dojo.telerik.com/arUtuyuf
3) Resize browser, just 1 pixel needed, while looking at pager
Even though the window is big, it initially show up with small classes.
Bug report
Spreadsheet doеs not allow selecting of multiple cells when opened on Microsoft Surface. It is also not possible to resize columns.
Reproduction of the problem
Issue 1
- Open the Spreadsheet Index demo on a Microsoft Surface device.
- Click in a cell and try to drag the selection to select multiple cells
Issue 2
In the Spreadsheet Index demo select a column. Try to place the mouse in between columns for the icon to be changed and to will be able to resize the column.
Current behavior
Currently, the selection in the Spreadsheet could not be expanded to multiple cells and the columns could not be resized when the Spreadsheet is used on a Microsoft Surface device.
Expected/desired behavior
The Spreadsheet should allow selecting multiple cells and resizing columns when opened on a Microsoft Surface device.
Environment
- Kendo UI version: 2022.2.510
- jQuery version: x.y
- Browser: [all ]
Bug report
When the Switch is used inside a Kendo Grid popup it is not rendered as expected.
Reproduction of the problem
- Open the Dojo - https://dojo.telerik.com/@NeliKondova/uRaJITug
- Click on the Edit button
Current behavior
The Switch is rendered incorrectly:
Expected/desired behavior
The Switch thumb should be rendered inside the Switch track.
The issue is a regression starting width Kendo 2022.3.913
Environment
- Kendo UI version: 2022.3.913
- Browser: [all ]
Hello,
We found a bug in the latest version of Kendo related to the reordering columns in Treelist when inside a Grid DetailTemplate
See the Dojo below to replicate the problem:
https://dojo.telerik.com/exotEsej
Expand the detail row under a grid row and attempt to drag one of the treelist column titles to the left or right and note that an error is thrown.
Uncaught TypeError: Cannot read properties of undefined (reading 'lockable')
Let us know when you have a workaround for this as it prevents us from promoting this version of Kendo to our production environment.
Thank you,
Brad Garner
Hello!
dataSource.query causes Javascript Error "Cannot read properties of undefined (reading 'length')"
just only in the new 2022.3.913 Version
see Kendo UI Snippet | Kendo UI Dojo (telerik.com)
Regards
Andreas
Describe the bug
When the FloatingActionButton is rendered on Safari and iOS an additional outline border is displayed.
To reproduce
Steps to reproduce the behavior:
Expected behavior
There should bo no additional square border around the FAB
Screenshots
Affected package (please remove the unneeded items)
- theme-default
- theme-bootstrap
- theme-material
Affected suites (please remove the unneeded items)
- Kendo UI for jQuery
Affected browsers (please remove the unneeded items)
- Safari
Build system information (please remove the unneeded items)
- OS: [Mac]
Workaroundt
.k-fab{ outline: none; }
When calling setOptions on the numericTextBox, the spinner locks up if there is a "factor" option set.
https://dojo.telerik.com/OYiYogis
See the above Dojo.
Removing the factor seems to fix the issue, but I need the factor so that a user can type in 10 for 10% when the type is percentage but 10 for $10.00 when the type is currency.
Bug report
When the width of the DropDownList is set using the list.width and the DropDownList gets open there is a slight delay of expanding the popup width.
Reproduction of the problem
- Open the Dojo and open the DropDownList
Current behavior
There is a delay of expanding the popup width.
The issue is a regression starting with 2022 R1 SP1
####Workaround
$('.k-popup').width(600);
Dojo
Expected/desired behavior
There should be no delay when the width od the DropDownlist is set..
Environment
- Kendo UI version: 2022.2.802
- Browser: [all ]
Description:
Screen reader dependent user will be impacted if blank column headers are defined on the table. They get no information about that column.
Test environment:
Microsoft Edge Version 105.0.1343.33 (Official build) (64-bit)
OS version (OS Build 22000.856)
URL: https://demos.telerik.com/kendo-ui/grid/aggregates?_ga=2.128136910.351146969.1663006247-1325185890.1643853544
Repro Steps:
1. Open the given URL in Edge .
2. Enable Narrator using 'Ctrl+ Win + Enter' key.
3. Navigate to the table present Aggregate page. And navigate to the column headers.
4. Observe whether Blank column header is defined on the table or not.
Actual Result:
Blank column header should not be defined on the table present on Aggregates page.
The narrator only reads its position.
Expected Result:
Appropriate name should be defined for the blank column header is defined on the table present on Aggregates page.
The narrator should also announce the same.
Additional Notes:
Same issue is observed on similar tables defined on the page.
Enhancement
Currently, when checkboxes are enabled, the selected items cannot be sent to a remote end-point via form submit. Research possible workarounds for the senario - rendering an additional input elements, parsing or other suitable approach that allows submitting the value of the widget.
Hi,
We have a grid with virtual scroll enabled.
When double-clicking on the first 15 rows resize handles, it behaves correctly, i.e it automatically fits the columns size to max row width.
The problem occurs now when we begin scrolling horizontally the grid : starting to the 16th column (red backgrounded) resize handle double click action behaves weirdly. Sometimes it fires a scroll event without doing else, sometimes it resizes the column but in the wrong way by reducing width.
Check this JsFiddle to reproduce the problem. Problematic column are red backgrounded.
Bug report
In a virtual DropDownList with a value set, the first item is marked as selected as well. The issue occurs when using jQuery 3.4.1 or later.
Reproduction of the problem
- Open this Dojo example. - https://dojo.telerik.com/@martin.tabakov@progress.com/UkOmiYEj
- Open the DropDownList.
Current behavior
Two items are marked as selected.
Expected/desired behavior
Only the item with value 3 should appear as selected.
Environment
- Kendo UI version: 2021.3.914
- **jQuery version: 3.4.1 and later
- Browser: [all]
Bug report
If you select a text in the Editor, the ForeColor value is not updated to match the color of the selected text.
Reproduction of the problem
- Open this Dojo example - https://dojo.telerik.com/IHAGOfom/6
- Select the first line
- Select a color from the tool
- Select the second line
Current behavior
The value of the ForeColor tool is not updated to match the second line
Expected/desired behavior
The ForeColor value should change based on the selected text
Environment
- Kendo UI version: 2022.3.913
- Browser: [all]
Bug report
According to the ARIA spec, the TreeView non-parent nodes should not have the aria-expanded. Otherwise they would be incorrectly described to assistive technologies as parent nodes.
Reproduction of the problem
- Open this Demo - https://demos.telerik.com/kendo-ui/treeview/remote-data-binding
- Inspect the li element for a node that has no children e.g Janet Leverling
Expected/desired behavior
The bottom nodes shouldn't have an aria-expanded attribute.
Environment
- Kendo UI version: 2022.3.913
- Browser: [all]
The problem can be observed in the following example from the documentation:
Description:
If screen reader is not announcing the role as button for Grid pagination controls then users will confuse and not able to utilize the control properly.
Environment (OS, Application):
Test Environment:
OS version (OS Build 22000.856)
Microsoft Edge : Version 105.0.1343.25 (Official build) (64-bit)
URL: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/pageable
AT (include version number):
Narrator
Repro Steps:
1. Open given URL in Microsoft Edge .
2. "pageable - API Reference - Kendo UI Grid | Kendo UI for jQuery" page will open.
3. Turn on Narrator.
4. Navigate to the Grid pagination buttons using keyboard.
5. Verify that screen reader is announcing role as button or not.
Actual Results:
The pagination buttons at the bottom of grids have their role defined as link.
Expected Results:
The pagination buttons at the bottom of grids should have their role defined as a button, not link.
Additional notes:
This issue is present on any page grid pagination is used, so should address it globally
Description:
Users who rely on high contrast Aquatic/ Desert mode will be affected here as they will face difficulty in knowing which control is focused right now.
Environment (OS, Application):
Test Environment:
Microsoft Edge : Version 105.0.1343.25 (Official build) (64-bit)
OS version (OS Build 22000.856)
URL: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/filterable.messages
Pre-Requisites (if any):
1. Go to system settings.
2. Navigate to 'Accessibility' and activate it.
3. Navigate to 'Contrast theme' and activate it.
4. Select 'Desert/Aquatic' High Contrast theme in the combo box.
Repro Steps:
1. Open given URL in Edge.
2. Kendo UI for jQuery "filterable.messages" page will be open.
3. Go to preview button and activate it.
4. Turn on High contrast theme.
5. Navigate to filters and activate it. Expand 'Show items with value that:' drop drown of filters.
5. Navigate over drop drown and Observe the issue.
Actual Results:
User is not able to recognize, which list item is focused or selected in 'Show items with value that:' drop drown of filters in high contrast Aquatic/ Desert mode.
Expected Results:
A proper rectangular colorful boundary should be defined which indicates the currently selected/focused list item under the Show items with value that:' accordingly in high contrast Aquatic/ Desert mode.
Additional notes:
The same issue can be observed throughout the page where a similar dropdown appears.