we discovered that if you have navagatable set to true and you perform a deletion using the inline delete button, the grid scrolls back to the top. setting navagatable to false prevents the scrolling from occuring.
this was using KendoGrid with JQuery.
I realize this has been covered by this workaround in the past, but the need to write extra code for moving the column back to the original position makes this seem a bit "hacky" and most importantly, the user experience of being allowed to drag the column in the first place just to see it jump back seems wrong.
The good news is that the kendoGrid already has a mechanism for preventing the columnReorder event from getting fired in the first place! The bad news is that it only happens for columns that have either of these 2 classes ["k-group-cell, "k-hierarchy-cell"]
My request is to have a configuration option that enforces that same behavior for specific columns as:
1. Add a "reorderable" flag to be set as part of the column configuration (set it to false for those we want to keep in place)
2. This flag will set a class on those columns the same way it works for columns with "k-group-cell" or "k-hierarchy-cell" classes, so the event can be prevented.
There is one important caveat to consider with this approach: Only columns at the front and the back of the grid can be locked in place, so there needs to be validation to prevent having non-reorderable columns among reorderable ones.
Hello,
Just upgraded to 2022.2.802 Kendo UI for jQuery and noticed that when clicking on a row in a grid it correctly highlights it (e.g. dark blue), but doesn't maintain the selection when moving the mouse from the row. This appears to be a breaking change - at least for our code. Previously it would still be selected/highlighted when moving the mouse away from the row.
Cheers,
Nick
Original posted on the forum. Looks like someone else has this issue as well.
https://www.telerik.com/forums/grid-does-not-maintain-row-selection-visually-highlighted
When exporting all the lines in the grid with saveAsExcel the excel is formatted in the event handler when the ExcelExport event is fired.
I would like to have the exact same effect when calling the exportSelectedToExcel method.
Incorrect role as link is defined for header controls of 'Branches' table.
Repro-Steps:
2. Enable Narrator using 'Ctrl+ Win + Enter' key.
3. Navigate to header controls present on the 'Branches' table using Tab key.
4. Verify that incorrect role as link is defined for header controls of 'Branches' table or not.
It is functioning as a button. On activating the header control filter is activating.
User Impact:
This article describes how to disable the resizing functionality for specific columns in a grid while all other columns stay resizable. This works fine, as long as the grid is not sortable: After the user tries to resize a non-resizable column for the first time, the cursor is set to "col-resize" every time a column's header is hovered, even outside the resize area and without trying to resize it. This DOJO demonstrates the described behavior.
We have found out that the DOM of grid column headers looks differently when the grid is sortable. Also, the style that sets the cursor is set on a different element and therefore no longer removed by the workaround proposed in the mentioned article.
This DOJO contains an adapted version of the workaround that fixes the issue.
Bug report
Row filter Clear icon does not clear the autocomplete in Grid since 2022.1.119
Reproduction of the problem
Open the demo: https://demos.telerik.com/kendo-ui/grid/filter-row
It will toggle the mode and display the Filter clear button outside of the autocomplete edit box but will not clear the filter.
Expected/desired behavior
AutoComplete shall be cleared
The issue is introduced with 2022 R1 (2022.1.119)
Environment
Kendo UI version: 2022.1.119 or above
Browser: [all]
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>
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.
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:
Bug report
Get a scenario where we have a Grid with the following configs:
- There is a selectable column in the Grid
- There are one or more locked columns
- The reorderable.row value to true
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.
- Note: In a scenario with a selectable column to be able to reorder rows, we have to select these rows at first
Reproduction of the problem
- Open this Dojo example
- Select two random rows in the Grid by checking their checkboxes
- Use the Contact Title column to start the row dragging(We need this column because the rows' reorder cannot start from a locked column)
Current behavior
The text inside the Drag Hint is "4 items selected"
Expected/desired behavior
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"
Environment
- Kendo UI version: 2022.2.802
- jQuery version: x.y
- Browser: [all]
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.
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.
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
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.
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.
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
Hello
Today I noticed a bug in the GRID control.
If it applies formatting so as not to wrap the line.
Then the standard export to PDF incorrectly shows these lines too long.
I have modified this example
https://dojo.telerik.com/@p.korczak@info-kor.pl/aNOvOYIP
by adding a line
toolbar: [{name: "excel"}, {name: "pdf"}],
and see those lines where the description is too long
Paweł
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,
With a grid configured with the Search, if a search is carried out with pre-existing filters on non-searchable columns, the pre-filtered columns are cleared in the search result.
Consider a basic grid as per the following Dojo:
https://dojo.telerik.com/axuFURen
It is configured to search on one column - name.
I can filter on the age, to show those aged 33
With the age filter applied, I then want to search that dataset, so I enter a value in the search control.
The result is that I only get the data filtered on the search input - the age filter has been cleared.
Summary
The search control should be configurable to either combine or ignore other filters.