Grid control doesn’t allow to change width of columns via keyboard. Column width adjustments could be done only via mouse. It would be great to have this ability from the accessibility perspective.

Reproduction of the problem

1. Open https://demos.telerik.com/kendo-ui/grid/index
2. Set focus on header of any column
3. Try to change width of the column

Current behavior

No hot key to change width.

Expected/desired behavior

Any hot key (e.g. Shift + Arrow Left / Right) to change width of a column.

Environment

Kendo UI version: "2020.3.1118"
Browser: Chrome 90.0.4430.212

### Bug report

When the Kendo UI Grid widget in "Popup" edit mode has more than one level of grouping, and when the adding of a new record is canceled, the group headers of the empty row are not removed.

### Reproduction of the problem

  1. Group the Grid by 2 columns;

  2. Click the "Add new record" button;

  3. Click the "Cancel" button in the Popup form;

  4. The empty row for the new record is removed, but the group header of the first group remains. 

A Dojo sample for reproduction: https://dojo.telerik.com/UgARObuZ

### Expected/desired behavior

The group headers of the empty row should be removed when the adding of a new record is canceled.


### Environment

* **Kendo UI version: 2021.2.616
* **jQuery version: 1.12.4
* **Browser:** [all]

### Bug report

The Grid is filtered initially and no records are displayed. When a specified filter is cleared through the column filter menu, the column with the checkbox filter menu does not show any checkboxes and there is an error in the browser console.

### Reproduction of the problem

1. Create an initially filtered grid and enable the checkbox-filter menu on the first column.

2. When the grid is loaded and no records are displayed (based on the applied filters), clear any of the filters manually through the column menu.

3. Click on the column menu of the first column.

4. An error is logged in the browser console. The checkbox-filter menu contains no options, but the column has data.

A Dojo sample for reproduction: https://dojo.telerik.com/oJAvaMUy

### Expected/desired behavior

The options in the checkbox filter menu should be loaded properly when any column filters are reset.

### Environment

* **Kendo UI version: 2021.2.616
* **jQuery version: 1.12.4
* **Browser: [all]

Bug report

In the Html4 specification it required the tbody element to follow the tfoot element. In contrast, the current Html5 specification favors the thead > tbody > tfoot structure, even though it doesn't explicitly forbid the table's tfoot element to be rendered after the thead and before the tbody element: https://html.spec.whatwg.org/#the-table-element
In terms of accessibility, it makes more sense the tfoot element to be rendered after tbody. This way the readers would be able to read the elements in a logical order: thead > tbody > tfoot

Reproduction of the problem

https://demos.telerik.com/kendo-ui/grid/aggregates

Inspect the footer

Current behavior

tbody is rendered after tfoot.

Expected/desired behavior

tbody is rendered before tfoot.

Environment

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

When the autofitcolumn method is used together with multi-headers and hidden columns, some of the columns are either not visible at all or shrunken.

The problem can be observed in the following Dojo:

https://dojo.telerik.com/EJezUyeg 

The CompanyName column should be visible, however it is not. If the example is ran in fullscreen, the column will be visible, however it will shrink if the Browser window gets smaller.

### Bug report

When the loaderType is set to "skeleton" and the grid is a hierarchy, the skeleton placeholder for the last column is not rendered.

### Reproduction of the problem

1. Set the loaderType to "skeleton".

2. Set a child grid to create a hierarchy.

3. Load the grid.

4. The last column has no skeleton container.

### TicketID: 1534057

### Environment

* **Kendo UI version:** 2021.2.616
* **jQuery version:** 1.12.4
* **Browser:** [all]

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

Bug report

Pdf export comes with loader when Kendo grid with endless scroll and allPages enabled

Reproduction of the problem

https://dojo.telerik.com/ABiMAjIK

Expected/desired behavior
No loading indicator shall be rendered in the exported PDF

Environment
Kendo UI version: all
Browser: all

### Bug report

When the column menu of the Kendo UI Grid widget with componentType set to 'modern' is used in a hierarchical grid, it expands behind the bottom of the page.

### Reproduction of the problem

1. Use the detail template feature of the Grid to create a child Grid;

2. Enable the "columnMenu" in the "modern" render mode;

3. Expand the last row and open the column menu;

4. Expand the filter menu. It is partly hidden.

 A Dojo sample for reproduction: https://dojo.telerik.com/UbEzoYuF/5

### Expected/desired behavior

The  "modern" column menu should be rendered as the "classic" column menu - its position should be changed based on the available space.

### Environment

* **Kendo UI version: 2021.2.616
* **jQuery version: 1.12.4
* **Browser: [all]

Hi All,

We are facing a weird issue in kendo grid when both group paging and virtual scrolling are enabled for local data. Please see https://dojo.telerik.com/ICoDAleN/2 as example.

Steps to reproduce:

1. Run the code from https://dojo.telerik.com/ICoDAleN/2.

2. Try to group "DateTime" column by drag and drop to grouping header

3. After "DateTime" column is grouped, then un-group it by click cross icon of DateTime button.

4. Now you try to scroll down the grid, until ID column reach around 40, you will see the ID will jump back to around 0, and you will never see the rows which IDs are greater than 40.

5. If you open Developer Tools of browser, you will see following errors.

6. If you group other columns, for example, group "Subject" column, and then un-group it, then scroll down the grid, you will not see this issue.

How to fix it? is there any workaround?

Thanks,

David

The problem can be observed in the following Dojo:

https://dojo.telerik.com/UHAdoNIL 

The filter row appears on top of the Sticky Column.

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,

The buttons And/Or in the column menu filter are not translated. They are in English even if the language is set to Swedish.

This is only when componentType is set to "modern". When it is set to "classic" the button language is correct.

See Dojo and attached screenshots.

Untitled | Kendo UI Dojo (telerik.com)

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(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 */
    }
}

There's a discrepancy between the header and rest of the rows when the selected rows are coppied and pasted in Excel.

Bug report

When the columns.sortable.initialDirection configuration is set it is not respected

columns: [{
      field: "id",
      sortable: {
        initialDirection: "desc"
      }
    }],

Reproduction of the problem

1. Run this dojo

Current behavior

Note the userId column is not sorted in descending order

Expected/desired behavior

Column should be sorted in descending order

Workaround

Use the dataSource sort configuration option to set the sort order - example

Environment

• Kendo UI version: 2022.1.119
• Browser: [all]

Bug report

When custom Virtual DropDownList filter is set the value is not cleared from the DropDownList on Clear button click

Reproduction

https://dojo.telerik.com/ULIgEpis

1. Filter Ship Name column

2. Open the filter menu and hit Clear

3 Open Filter menu again

Expected/desired behavior

Value shall be cleared from the DropDownList

Environment
Kendo UI version: 2021.1.301
Browser: all

This started happens on 2022.1.119 and 2022.1.301, Works well on 2021.3.914

Some of ours grids stopped showing the filter icon in the columns.

After digging a bit found that the issue happens when I have a grid initialized with sortable = true and then initialize a new one with sortable = false

You can see this happening in this example:

https://dojo.telerik.com/ogUZEbUP

the issue seems to be caused by this:

this selector is catching all the k-cell-inner from the first grid