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

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

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>

Hi Team,

I would like to request a way to revert the column size for the Kendo UI Grid using the API without refreshing the page. 

Thank you!

Hi everyone, 

i have a kendo Grid with columns virtualization enabled. It works perfectly but comes a weird behaviour when I add aggregate columns.

The problem consists in the constant relocation of aggregates cells values when scrolling horizontally the grid, i.e aggregate cell keeps changing column : the more you scroll, the more it jumps from a column to another.

I provided this jsFiddle sample to help you reproducing the problem.

Keep scrolling horizontally and keep an eye on "Field6"  and "Field8" columns where aggregates have been configured and you will see that the corresponding aggregates values will constantly go on wrong columns.

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.

Hi Team,

I'd like to request an event to allow for the user to dynamically create a new filter based on the field and type instead of using just columns.filterable.ui.  

Thank you!

Hi Team,

I would like to request a way to change the sort order with the built in API for the mixed sortable Kendo UI Grid.  

Thank you!

Hi Team,

I would like to request the detail arrow column to be configurable for placement to the right of the Grid without applying RTL support. 

Thank you!

I've noticed the .k-command-cell class is being added multiple times to the Grid's command cell.

This can be seen on the Grid's Custom Command demo page, where the class is added twice.  On some of my Grid implementations, the class is added 100 times or more.

Dojo:

https://dojo.telerik.com/EweloVOD 

Inspect one of the command cells and observe the "class" attribute.

Hi Team, 

I would like to request an attribute property similar to this one which will allow for easier modifications for the group header columns. 

Thank you!

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.