Bug report
Sticky Column misalign on scroll with Safari IOS in Desktop Mode
Reproduction of the problem
Open: https://demos.telerik.com/kendo-ui/grid/sticky-columns
Make sure to "Request Desktop Website" with Safari (it works fine in Mobile Mode)
Then try scrolling vertically in the grid particularly first dragging the frozen columns and then dragging the non-frozen columns
Environment
Kendo UI version: 2022.3.1109
jQuery version: All Supported Versions
Browser: Firefox 108.0
Bug report
Reproduction of the problem
Open: https://demos.telerik.com/kendo-ui/grid/frozen-columns
Make sure to "Request Desktop Website" with Safari (it works fine in Mobile Mode)
Then try scrolling vertically in the grid particularly first dragging the frozen columns and then dragging the non-frozen columns
Environment
Kendo UI version: 2022.3.1109
jQuery version: All Supported Versions
Browser: Firefox 108.0
We are using the columns.filterable.ui to initialize a kendoTextArea, if we write something and use the enter key to filter the value is ignored.
Example:
When the number of groups is less than the page size count the grid does not display the entire set of groups
Run this dojo - https://dojo.telerik.com/@efb@qad.com/eCizuraT
Only a subset of the groups is displayed
All the groups should be displayed
When using Grid custom editor, the Kendo Editable adds data-binding for the value for both the hidden and the visible inputs of the ComboBox. This results in a field named [propertyName]_input to appear in the item model after it has been edited.
The way this happens is a bit inconsistent and depends on setup, but in the linked dojo, using tab after editing causes this to happen, but in our applications pressing enter and sometimes even clicking off the editor causes this issue.
See here for the original bug. https://github.com/telerik/kendo-ui-core/issues/3427#issue-244359311
On a grid with the pager refresh button enabled, when the refresh button is clicked, it stays in the highlighted/selected animation state. Only clicking off the button and somewhere else on the page restores the button to its initial visual state.
Grid pager refresh button stuck highlighted | Kendo UI Dojo (telerik.com)
Since 2021.R3; prior versions do not animate the button on click thus do not exhibit this.
Tested in Chrome/Edge.
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
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.
The first unlocked column cannot be dropped into the next locked column.
ShipCountry should become a locked column and move to next to ShipName like how it worked in version 2021.3.914.
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.
Hello,
I am no longer able to change grouped columns in their position. This bug seems to have arisen with the version Kendo UI 2022 R1. I have created a gif and a dojo for you. Dojo Also, as you can see in the gif and dojo, the "group" event is not fired on a reorder.
Thanks.
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.
Title: Keyboard focus loss is observed after closing the filter pop-up by 'Esc' key.
Description: Keyboard users will be impacted here , as focus is getting lost after closing the filter pop-up.
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/filterable
Repro Steps:
1. Open given URL in Edge Dev.
2. "Kendo UI for jQuery" page will be open.
3. Navigate to "Preview" button present under filterable.
4. Navigate to the filter controls present on the table.
5. Activate the filter control using mouse and navigate over the pop-up.
6. Press 'Escape' key on the flyout and Verify that Keyboard focus loss is observed after closing the filter pop-up by 'Esc' key or not
Actual Result:
Keyboard focus loss is observed after closing the filter pop-up by 'Esc' key.
On pressing Tab key further focus start moving from "Related Properties" link.
Expected Result:
Keyboard focus loss should not be observed after performing any action on the page and should restore on the control which has been activated, here after pressing 'Esc' key, focus should restore on 'Filter' button only.
Get a scenario where we have a Grid with the following configs:
Having the above configuration, try to reorder random rows. The value in the Drag Hint shows a number of files that is twice the number of the selected for reordering rows.
The text inside the Drag Hint is "4 items selected"
The text inside the Drag Hint should correspond to the number of the selected rows. In the above scenario, the text should be "2 items selected"
Subject says it all, this has to be a bug or something? I am having the user update what's in the grid and then on cellClose making an ajax call to save the value but it's not firing when the cell changes, only if it stays the same.
Here's a dojo showing off what's happening:
When a PopUp edit mode is used with a custom template, the template is shown with an additional edit field for each column. The problem appears only on a mobile.
Open the following dojo example:
https://dojo.telerik.com/AKoyIqit/7
on a mobile phone and try to edit a record in the Grid. The template appears, but also an input field for each column is shown.
Only the declared template should be shown inside the PopUp window.
Test Environment:
OS: Windows_11Browser: Version 103.0.1264.71 (Official Build) (64-bit)
AT (include version number): Narrator
Repro Steps:
1. Open given URL in Edge Dev.
2. Enable Narrator using 'Ctrl+ Win + Enter' key.
3. Navigate to the filters present on table and activate it.
4. Navigate on the available fields of filter flyout and observe Narrator is announcing label information on fields or not.
Actual Results:
In filter flyout labels are not associated with their respective fields.
Expected Results:
All labels should be associated with their respective labels in filter flyout.
Narrator should also announce the same.
Hi Telerik,
I created a demo code for error of Kendo Grid for jQuery with Bootstrap 5 error when settings 'pageable', please check and fix this
Link online: https://dojo.telerik.com/@vndevil/ICAPeBeg
Source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.802/styles/kendo.default-v2.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.802/js/kendo.all.min.js"></script>
<!-- BEGIN Bootstrap 5.0.2 -->
<!-- PHẢI để ở trên này, trước đống css tự viết ở dưới ^_^ -->
<!-- CHƯA DÙNG ĐƯỢC BOOTSTRAP 5 do nó bỏ hàm Tooltip, đang chờ phiên bản udpate mới -->
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="preload stylesheet" as="style"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<!-- END Bootstrap 5.0.2 -->
</head>
<body>
<div class="mb-3">
<h1>Grid normal<h1>
<div id="grid"></div>
<div id="grid2"></div>
</div>
<div class="mb-3">
<h1>Grid error config 'pageable' error bootstrap tabs<h1>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
type="button" role="tab" aria-controls="home" aria-selected="true">Grid 3 pageable config
error</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
type="button" role="tab" aria-controls="profile" aria-selected="false">Grid 4 pageable
config error</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact"
type="button" role="tab" aria-controls="contact" aria-selected="false">Grid 5 pageable
config error</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div id="grid3"></div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div id="grid4"></div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div id="grid5"></div>
</div>
</div>
</div>
<script>
var gridConfig = {
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
pageable: {
pageSize: 5,
buttonCount: 3,
messages: {
display: '{0} - {1} of {2:#,##} items'
}
}
};
$("#grid").kendoGrid(gridConfig);
$("#grid2").kendoGrid(gridConfig);
$("#grid3").kendoGrid(gridConfig);
$("#grid4").kendoGrid(gridConfig);
$("#grid5").kendoGrid(gridConfig);
</script>
</body>
</html>