Declined
Last Updated: 01 Aug 2023 08:14 by ADMIN

Test Environment:

OS: Windows 11 Version 22H2(OS build 22621.1992)

Browser: Edge browser version 115.0.1902

Screen Reader: Narrator.

 

Repro Steps:

  1. Open URL: Kendo UI Snippet | Kendo UI Dojo (telerik.com)
  2. Navigate to the Choose Library combo box and select 'Kendo UI 2022 R2' option.
  3. Navigate to the Run button and activate it.
  4. Open Narrator using 'Ctrl + Win + Enter' key.
  5. Press 'T' key to navigate table in quick navigation mode.
  6. Navigate the table header controls using up arrow.
  7. 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.

Declined
Last Updated: 26 Oct 2022 10:44 by ADMIN
Created by: Jamie
Comments: 1
Category: Grid
Type: Bug Report
0

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.

Declined
Last Updated: 20 Sep 2022 08:08 by ADMIN

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.

Declined
Last Updated: 05 Oct 2023 10:02 by ADMIN
Created by: eDAD
Comments: 3
Category: Grid
Type: Bug Report
0

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


 


Declined
Last Updated: 11 Dec 2023 10:05 by ADMIN
Created by: eDAD
Comments: 1
Category: Grid
Type: Bug Report
0

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.



Declined
Last Updated: 31 Aug 2022 14:30 by ADMIN
Created by: VnDevil
Comments: 1
Category: Grid
Type: Bug Report
0

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>

 

 

Declined
Last Updated: 11 Jul 2022 14:49 by ADMIN

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.

Declined
Last Updated: 30 Jun 2022 12:51 by ADMIN

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.

 
Declined
Last Updated: 19 Jan 2023 13:47 by ADMIN
Created by: Laurent
Comments: 1
Category: Grid
Type: Bug Report
1

Hi team,

Found an issue with column filterable property on IE 11 and last kendo UI for jQuery release.

Please have a look at this dojo with IE11: https://dojo.telerik.com/UfIZePaZ

Using property "filterable: { multi: true}" on first column leads to the grid not being built with console error.

Regression bug as it works with previous kendo release.

 

Regards,

Laurent.

Declined
Last Updated: 27 Dec 2021 09:01 by ADMIN

We are using kendo Datagrid where we wanted to apply pagination.

We are using pageSizes property of pageable object to set the no of items per page to render. We are also using buttonCount property to control the number of buttons.

Problem : For example I have 200 records , if I set pagesSizes=1 so technically I will have 200 paging button and if i set buttonCount to 60 than UI gets distorted. Find below is stackblitz URL where I have set pagesSizes=1 and if you set Maximum number of buttons = 70 UI will break.

URL : https://cuezkg--run.stackblitz.io/ 

Declined
Last Updated: 12 Oct 2021 08:05 by ADMIN
Created by: Andrii
Comments: 1
Category: Grid
Type: Bug Report
0

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

  
Declined
Last Updated: 17 Sep 2021 07:25 by ADMIN

Hi,

When the grid is initially hidden and then revealed programmatically, the pageSizes (and several other elements) are not rendered.

Reproducer:

  1.  Go to https://dojo.telerik.com/EBugiKAZ
  2. Press Run and click the button, see no pageSizes and no "1 - 1 of 4 items" text
  3. 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

Declined
Last Updated: 06 Jun 2022 07:53 by ADMIN
Created by: Emily
Comments: 1
Category: Grid
Type: Bug Report
2

Bug report

When applying GroupPaging with local data using a Kendo UI Grid with AngularJS, the error message Uncaught TypeError: Cannot read property 'hasSubgroups' of undefined' appears upon expanding a parent row.

Reproduction of the problem

  1. Go to this Progress Kendo UI Dojo.
  2. Attempt to expand the row.

Current behavior

Currently, the UID for the group is not matching the group row's UID, and the error message appears.

Environment

  • Kendo UI version: 2021.1.224
Declined
Last Updated: 22 Feb 2021 15:01 by ADMIN

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

  1. Open this Dojo example - https://dojo.telerik.com/@martin.tabakov@progress.com/EZERotAN/5.
  2. Navigate through the whole Grid with tab.
  3. 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]
Declined
Last Updated: 04 Mar 2021 12:11 by ADMIN

$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);
            }
        };

Declined
Last Updated: 15 Jul 2021 07:17 by ADMIN

Since the 2019 R1 release k-pager-sm (k-pager-lg, k-pager-md) classes are assigned dynamically based on the width of the page to make the component responsive (as I understood from https://www.telerik.com/forums/kendo-ui-grid-pager-not-displaying-properly-in-sass-mode#wn92di5BakmHqrrMfViFxA)

When grids are used on bootstrap tabs (both boostrap 3 and 4) the k-pager-sm class is added incorrectly, causing the pagers on tabs other than the first to be displayed only partially.

A JSFiddle to demonstrate this: https://jsfiddle.net/nqjc4mbu/

The pager on the 1st tab:

And on the 2nd and 3rd tab:

 

(we've solved it with a workaround by dynamically removing the k-pager-sm class again on dataBound, but this shouldn't be necessary)

Declined
Last Updated: 17 Mar 2020 10:07 by ADMIN

Starting from a Grid's "endless scrolling demo" on: https://demos.telerik.com/kendo-ui/grid/endless-scrolling-remote

Edit grid configuration to set smaller page size. All items of the first page need to be visible on the screen plus some free space. A grid height needs to be set. See this DOJO: https://dojo.telerik.com/amiNohIx

The vertical scroll bar is disabled and there is no way to get/see next pages of data.

Interesting is that use of the horizontal scrollbar (if one is available) starts some background operation (looks as data page load) and then the vertical scrollbar is OK.

Declined
Last Updated: 19 Jan 2023 13:41 by ADMIN

Bug report

When the Kendo UI Grid is paged and the Search panel input is focused, the page is automatically switched to the first one.

Reproduction of the problem

1. Navigate to the live demo:

https://demos.telerik.com/kendo-ui/grid/search-panel

2. Change page to 2 (for instance).

3. Focus the Search panel input.

4. The page is changed to the first one.


Expected/desired behavior

When the search panel is empty and only focused, the page should remain the same.

Environment

* **Kendo UI version:** 2019.3.1023
* **jQuery version:** 1.12.4
* **Browser:** [ IE 11.768.17763.0] 

Declined
Last Updated: 18 Dec 2019 15:56 by ADMIN
Created by: Jay
Comments: 2
Category: Grid
Type: Bug Report
2
While the grid pager is enabled, if set a new datasource of this grid via javascript ( grid.setDataSource(new kendo.data.DataSource(obj)) ), multiple pager numbers wrapper wil be created. And this makes pager layout wrong.
Declined
Last Updated: 18 Dec 2019 15:59 by ADMIN
Created by: Peter
Comments: 1
Category: Grid
Type: Bug Report
0
  • Create e.g. local data grid (id, name)
  • add 2 records => { id: 1, name: "null", id: 2, name: "Jack" }
  • Name column for id = 1 is empty

I have tested this on your example for local data grid. It can be applicable also for remote grid, treelist, etc.

 

1 2