So we are loving the sticky columns in Kendo UI v2020.3.1118 JQuery Grid however we are experiencing a synchronisation issue between the column headers and the filter rows.
The attached screenshots and video show the problem.
I tried to find a solution in your KB's but am reaching out to you in case you can recommend a solution?
Ideally, the filter row would know about the sticky columns, but it seems not to.
Kind Regards, Garry.
Bug report
When there are sticky columns in Grid and the horizontal scrollbar is visible, the text of the columns is overlapping while scrolling.
Reproduction of the problem
- Open the Dojo in fullscreen
- Resize the browser in order for the horizontal scrollbar to be visible and scroll
Current behavior
The text of the columns is overlapping
Expected/desired behavior
The text of the columns in Grid should not overlap whiles scrolling
Workaround
window.addEventListener('resize', function(){ $("#grid").data().kendoGrid._updateStickyColumns(false); });
Environment
- Kendo UI version: 2021.1.119
- Browser: [all ]
Bug report
In a Grid with checkboxes in the first column, when tabbing through the Grid, the checkbox in the first row is skipped.
Reproduction of the problem
- Open this Dojo example - https://dojo.telerik.com/@martin.tabakov@progress.com/EZERotAN/5.
- Start navigating from the beginning of the Grid.
Current behavior
While navigating, the checkbox on the first row is skipped and the ID column will be focused instead.
Expected/desired behavior
The checkbox should not be skipped.
Environment
- Kendo UI version: 2020.3.1118
- Browser: [all]
Bug report
In a Grid with checkboxes in the first column, if you navigate through the Grid for a second time, only the checkboxes are focused.
Reproduction of the problem
- Open this Dojo example - https://dojo.telerik.com/@martin.tabakov@progress.com/EZERotAN/5.
- Navigate through the whole Grid with tab.
- Navigate a second time through the Grid.
Current behavior
When navigating through the Grid for a second time, only the checkboxes are focused.
Expected/desired behavior
All the cells of the Grid should be focused.
Environment
- Kendo UI version: 2020.3.1118
- Browser: [all]
Version of Kendo UI Grid: v2016.3.1028
There appear to be a few accessibility issues with the pager control for kendo grid when using a screen reader:
2. When navigating to the pages--screen reader is narrating some irrelevant information about the page elements say 'Link label one of one , Link two of two label one , Link three of three label one.
Obviously an older version of the kendo ui grid is being used--but I wanted to confirm that these issues have been fixed for more recent versions. For accessibility compliance a user should be informed via screen reader if a link is disabled and pages should be clearly announced when selected.
Thanks!
Hi,
Hopefully you can help us out with this!
On Kendo Grid, when filtering, we have an option 'Select All' as you can see below.
Now if we run a search for 'B' we get the below:
Now the select all option has disappeared and in some cases we would have a lot of options to enable.
Any ideas?
Thanks
Mark
$scope.OptionsGridApplication_Team_Settings = {
dataSource: $scope.DataGridApplication_Team_Settings,
resizable: false, selectable: "single",
columns: [
{
field: "TeamName",
title: "TeamName",
encoded: false,
hidden: true,
attributes: { "class": "ellipsisTextSpan", },
template: function (e) { return createCoulumnTitle(fakingAngularCharacter(e.TeamName)) },
groupHeaderTemplate: function (e) {
var html = '';
html = html + '<span class="headerTeamGroup" data_TeamId="' + e.value + '" title="' + e.value + '">';
html = html + stringCutterA(e.value, 131);
html = html + '</span>';
return html;
},
},
{
field: "SystemIdentifier", title: "Environment Name", encoded: false,
attributes: { "class": "ellipsisTextSpan", }, template: function (e) { return createCoulumnTitle(fakingAngularCharacter(e.SystemIdentifier)) }
},
{
field: "EnvironmentType", title: "Environment Type", encoded: false,
attributes: { "class": "ellipsisTextSpan", }, template: function (e) { return createCoulumnTitle(fakingAngularCharacter(e.EnvironmentType)) }
},
{
field: "URL", title: "Environment URL", encoded: false,
attributes: { "class": "ellipsisTextSpan", }, template: function (e) { return createCoulumnTitle(fakingAngularCharacter(e.URL)) }
}
],
dataBound: function () {
debugger;
serviceFactory.AccessibilityGridEmpty(this);
}
};
Hi
Please see the attached. The search box styles are broken.
Hi,
I raised a forum support ticket for hiding the scrollbar when the data rows is <= pagesize. https://www.telerik.com/account/support-tickets/view-ticket/1493109
The response was to set the scrollbar overflow to auto and padding removed which caused overlapping of the scrollbar with the last column when visible.
Feature is requested to have this feature inbuilt with Grids having Virtual Scroller to avoid it.
Thanks
Devna
I'm currently get my application up to WCAG 2.1 compliance, however im come across an issue with the kendo grid that is causing it to fail.
when I load up the page there are no issues, the column headers id is a randomly guid and the cells below aria-describedby attributes reference that guid.
However when I press on the column header it sorts the column however in doing so it changes the id of header and this causes the cells below to have their aria-describedby attribute to reference an id that doesn't exist anymore.
I have the grid keyboard navigable.
Is there anyway to force it to always use an id?
Bug report
Reproducible in mobile mode enabled
1. Open below demo and enable mobile mode
2. Refresh
https://demos.telerik.com/kendo-ui/grid/editing
Current behavior
Error is thrown, grid not bound
Expected/desired behavior
No error shall appear
Environment
Kendo UI version: 2020.3.1021
jQuery version: x.y
Browser: [Chrome | Firefox ]
Hi,
I updated my project to Kendo UI for jQuery 2020.3.1021 but then all Grids stopped working on mobile or tablet devices. When downgrading to 2020.3.930 grids works fine. Also tried it with 2020.3.1028 but same issue.
I have tested it on iPad, iPad Pro, Samsung S10. Same issue with Chrome/Edge Chromium and emulate a mobile/tablet device.
In the browser console you can see the javascript error: "Cannot read property 'rows' of null".
Reproduction of the problem:
- Go to https://demos.telerik.com/kendo-ui/grid/index
- Hit F12 top open the Developer toolbar
- Click on "Toogle device toolbar" (CTRL + SHIFT + M)
- Choose any device, ex: iPad, iPhone
- Reload page to make the changes take effect
- Click on "Run live demo"
- Grid not loading!!
- Console is showing a JavaScript error: "Cannot read property 'rows' of null"
### Feature Request
The TypeScript definitions of the Kendo UI Grid are missing the "editable" object - the object that is built runtime when the grid enters edit mode.
### Environment
* **Kendo UI version:** 2020.3.915
* **jQuery version:** 1.12.4
* **Browser:** [all]
Bug report
When the dataSource is set with the setDataSource method
Reproduction of the problem
Dojo example.
- Run the dojo
- Click the button
- Focus the first Grid cell. Press and hold the Down Arrow key to navigate through the rows
Current behavior
The scroll position is not updated while scrolling and navigation stops at 10347.
Expected/desired behavior
Scroll position is properly updated and the user can navigate to the end of the page.
Environment
- Kendo UI version: 2020.3.915
- jQuery version: x.y
- Browser: [all ]
Bug report
Selecting cells from the frozen table in Frozen columns + selectable: "multiple cell" scenario selects the bellow cells from the non-frozen table
Reproduction of the problem
Open below Dojo
https://dojo.telerik.com/exobAcEl
Scroll the horizontal scrollbar to the right.
Select some cells from the frozen table.
Move the scroller back to its original position.
Expected/desired behavior
Cells from the non-frozen table shall not be selected.
EnvironmentKendo UI version: [all]
Browser: all
Bug report
Draggable does not respect dragging object width in Grid upon dragging a column
Reproduction of the problem
Open below Dojo
https://dojo.telerik.com/iSiSeCeb
Drag Shipped Date column from the right corner
Huge gap appear between the dragged column object and the pointer
Expected/desired behavior
Pointer shall be over the dragged object
EnvironmentKendo UI version: [all]
Browser: all
Bug report
In Grid Multi filtering checkboxes and their labels are misaligned.
Reproduction of the problem
In the official demo: https://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes
Expected/desired behavior
Checkboxes and labels shall be aligned.
Workaround:
The following CSS can be applied:
<style>
.k-label span {
vertical-align: top;
}
</style>Dojo: https://dojo.telerik.com/OgiYEBiB
Environment
Kendo UI version: [all]
Browser: [all ]