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.

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 Team, 

Currently, the Kendo Grid is supporting natively CheckBoxes and ComboBoxes only in the various editable modes. I would like to request a feature that allows these components to be constantly visible in the grid. So far, I have used the available Knowledge Base article, but it is inappropriate in my user case as it slows down the execution.

Thank you!

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:

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.

Bug report

The first unlocked column cannot be dropped into the next locked column.

Reproduction of the problem

1. Go to the following Progress Kendo UI Dojo.
2. Start drag from the ShipCountry (the first unlocked column) column header.
3. Drop to ShipName(locked column) column header.

Expected/desired behavior

ShipCountry should become a locked column and move to next to ShipName like how it worked in version 2021.3.914.

Environment

• Kendo UI version: 2022.2.802
• jQuery version: All Supported Versions
• 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.

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.

Bug report

When multicolumn headers are configured in the Grid and exportSelectedToExcel method is used for exporting, a file is not always generated. The issue is reproducible when selectable is set to selectable: "multiple, cell" and cell from the first column of the multicolumn header is selected.

Reproduction of the problem

1, Open the Dojo
2. Select a single cell from the 'field1' column
3. Click the 'Export selected' button

Current behavior

No file is generated. If for example also a cell from another column is selected, then the Excel file is generated as expected

Expected/desired behavior

An Excel file should be generated as expected even if only a single cell is selected.

Environment

• Kendo UI version: 2021.2.616
• jQuery version: x.y
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Bug report

When calling the exportSelectedToExcel method and passing true to it, so that the headers are also exported, a js exception related to the aggregates (count, sum, etc.) is thrown.

Reproduction of the problem

Dojo example: https://dojo.telerik.com/UkIloRag/3

1. Select a few cells and click the button above the Grid.

Current behavior

A js exception is thrown.

Expected/desired behavior

No js exception is thrown and the Grid is exported as expected.

Environment

• Kendo UI version: 2022.2.621
• jQuery version: x.y
• Browser: [all]

Hi Team,

I would like to request to incorporate a Select-All checkbox which would, by default, select all items across the Kendo UI Grid pages.  Additionally, it would be helpful to have this available for virtual scrolling.  

Thank you!

Hi,

Currently the Selection & Export functionality does not automatically scroll down/up the Grid when the user tries to select cells that fall out of the view. Would be great if we have an option to allow automatic scroll and provide ability to choose additional cells (as in excel). Additional details are in 1576704.

We are extensively using this selection feature and the above mentioned behavior would save lot of our time and add value to the functionality.

Appreciate your support on this.

Thanks,

Raj

When I bind a change event to the grid it will fire each time I click on the row, even if it is the same row.  So the selected row is not actually changing, but the event keeps firing anyways.  The same thing happens if I programmatically select the row using the select method.

I would rather the change event only fire when when the selection has actually changed rather than on every re-selection.

Otherwise, you might as well call the event "onSelect" rather than "change".

For extra points, it would be cool if the event received a reference to the previous row that was selected.

When the grid is grouped, the grouping column is visible with the same values in each cell of each group. Looks weird and confusing.

How can we accomplish more efficient look and hide the grouping column?  http://demos.devexpress.com/aspxgridviewdemos/GroupingSorting/Grouping.aspx 

Reference article:
http://www.kendoui.com/forums/ui/grid/how-to-hide-the-column-the-grid-is-grouped-by-additional-grouping-questions.aspx

Bug report

Get a scenario where we have a Grid with the following configs:

1. There is a selectable column in the Grid
2. There are one or more locked columns
3. 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

1. Open this Dojo example
2. Select two random rows in the Grid by checking their checkboxes
3. 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]

I want to disable/hide the columnMenu the same way like disabling sorting or filtering...
it is not supported the same way as disabling sorting or filtering but only with some Javascript which is not a good solution and not consistent

The current version of Kendo UI no longer allows you to align column headings as described in the demo https://demos.telerik.com/kendo-ui/grid/cell-alignment

It occurs because a nested tag (k-link) is set as display: flex;

You can see an example of it on your own demo site (link above) - Ship City header should be centered but isn't.

{
    field: "ShipCity",
    title: "Ship City",
    headerAttributes: { style: "text-align: center" },
    attributes: { style: "text-align: right" }
}

Test Environment:

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>