The Grid does not currently support MVVM bindings for events deeper than one level of nesting. Please fix this.
The grid validation does not work well when the grid is part of a complex form containing simple fields and a Kendo Validator. See this forum thread: http://www.telerik.com/forums/grid-custom-validation-not-shown The grid validation should integrate better with a form level kendo validator so you can validate both the grid and the simple fields easily.
Test Environment:
OS: Windows 11 Version 22H2(OS build 22621.1992)
Browser: Edge browser version 115.0.1902
Screen Reader: Narrator.
Repro Steps:
- Open URL: Kendo UI Snippet | Kendo UI Dojo (telerik.com)
- Navigate to the Choose Library combo box and select 'Kendo UI 2022 R2' option.
- Navigate to the Run button and activate it.
- Open Narrator using 'Ctrl + Win + Enter' key.
- Press 'T' key to navigate table in quick navigation mode.
- Navigate the table header controls using up arrow.
- Observe that narrator announce role as link on Filter controls or not.
Actual Result:
Incorrect role defined as "link" for the "Metric type filter column setting" button.
Expected Result:
Correct role defined as "link" for the "Metric type filter column setting" button.
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.
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.
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.
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>
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.
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
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.
Add support for flexible width to columns on a "weight" basis (like XAML grid).
Ps. I'm writting the example in MVC wrappers because I'm not familiar with the javascript initialization but I am posting this in Kendo UI Web category because it's a core feature and assume it would be implemented accordingly in every wrappers without having to specify them.
@(Html.Kendo()
.Grid<Employee>()
.Name("EmployeesGrid")
.Columns(cols =>
{
cols.Bound(o => o.FirstName).Width("*");
cols.Bound(o => o.LastName).Width("2*");
cols.Bound(o => o.Initials).Width("Auto");
cols.Bound(o => o.JobTitle).Width("200"); // Or 200px
}))
-Assuming the grid is 900 pixel wide and the longest Initials (including header?) is 100 pixel
-Ignoring the lost horizontal space in padding, margin, borders, scrollbars and anything else
This example would give the following result:
FirstName column: 200px
LastName column: 400px
Initials column: 100px
JobTitle column: 200px
We are using the latest version (5.4.0) of the "Classic" SASS theme for Kendo UI and override several scss variables to adapt the grid's look&feel to our requirements. One thing we did was setting $grid-header-padding-x and $grid-header-padding-y to 2px each.
If the content of the grid header is long enough to be truncated, sorting indicators etc. are partially moved out of the cell.
Since I cannot modify scss variables in DOJOs, I have tried to apply CSS styles to simulate the behavior: https://dojo.telerik.com/EMOYUREh.
As you can see, the th element applies some padding that .k-cell-inner removes again. On the right side, however, the negative margin is bigger than the padding added by the th element which causes the content to move out of the cell.
You guys do such a great job of allowing us to extend your product for our needs. And I know that you have recently added the Search Panel to allow us to perform a search against the dataSource. However, I would like to put that search box/button somewhere else completely on my page.
I've been able to get around this by using the code in kendo.grid.js to use my own click/keypress events to invoke the filter based on the new search options.
configureSearch takes two jQuery selector strings to hook into click/keypress events. I only want to search when the user hits ENTER instead of after each keypress. Then it executes the private search function.configureSearch(inputSelector: string, clickSelector: string) {
const searchFn = this.search;
if (this.grid.options.search == null) {
throw "search field(s) not set for grid.";
}
const inputElement = $(inputSelector).keypress(function (this: HTMLElement, e) {
const keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode === 13) {
searchFn($(this));
}
});
$(clickSelector).click(e => {
searchFn(inputElement);
});
}
private search(inputElement: JQuery<HTMLElement>) {
const options = this.grid.options;
const dsOptions = this.dataSource.options as kendo.ui.GridScrollable; // HACK: dataSource.options isn't really a GridScrollable, but it's similar
let searchFields: string[] | any = options.search ? options.search.fields : null;
let expression: kendo.data.DataSourceFilters = {
filters: [],
logic: "or"
};
const value = inputElement.val();
if (!searchFields) {
searchFields = getColumnsFields(options.columns);
}
// NOTE: Thankfully we don't use endless
if (dsOptions.endless) {
dsOptions.endless = null;
//(this as any)._endlessPageSize = this.dataSource.options.pageSize;
}
if (value) {
for (let i = 0; i < searchFields.length; i++) {
expression.filters.push({
field: searchFields[i],
operator: "contains",
value: value
});
}
} else {
expression = {};
}
this.dataSource.filter(expression);
// from Telerik:
function leafColumns(columns: kendo.ui.GridColumn[]): kendo.ui.GridColumn[] {
/* Hiding ... go see Telerik source code */
}
function getColumnsFields(columns: kendo.ui.GridColumn[]): string[] {
/* Hiding ... go see Telerik source code */
}
}
Create grid as groupable and try to set column title as "<span class='glyphicon glyphicon-cloud'></span>"
$("#grid").kendoGrid({
groupable: true,
columns: [{
field: "name",
title: "<span class='glyphicon glyphicon-cloud'></span>"
//, groupable: false
}, {
field: "age",
title: "Age"
}]
});Expected result - column title as glyphicon glyphicon-cloud but actual is wrong
To fix the problem - set up column as groupable: false (just uncomment) and title will be ok
But if I want to use such title and groupable: true - I cannot
Full example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/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/2021.3.914/js/kendo.all.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
groupable: true,
columns: [{
field: "name",
title: "<span class='glyphicon glyphicon-cloud'></span>"
//, groupable: false
}, {
field: "age",
title: "Age"
}]
});
</script>
</body>
and on dojo: https://dojo.telerik.com/EWUnarUf/2
Hi,
When the grid is initially hidden and then revealed programmatically, the pageSizes (and several other elements) are not rendered.
Reproducer:
- Go to https://dojo.telerik.com/EBugiKAZ
- Press Run and click the button, see no pageSizes and no "1 - 1 of 4 items" text
- Resize the browser window and see the elements appear (requires a minimum size, seems responsive related)
This also breaks when you have grid in a hidden div that you toggle open and it breaks in both Chrome and Firefox
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]
$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,
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