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

Bug report

Grid with group paging and server operations enabled throws a JavaScript error when expanding groups. Reported in ticket 1560566.

Reproduction of the problem

1. Run this dojo
2. Follow the steps in this screencast to reproduce the error

Current behavior

A JavaScript error is thrown:

Expected/desired behavior

No error should be thrown group paging should work as expected

Environment

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

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,

I've found a bug in the jQuery template code for Kendo Grids. Seems that it directly injects the name of a field from the data source results under the assumption that the field name is a valid JavaScript identifier (i.e. data.someIdenifier). But when the data source results contain a field name that is a number (as in my case), this results in invalid JavaScript (i.e. data.1234) and causes the Kendo Grid code to error. I notice that in some places in the template code, indexing is used instead of member access (data['someIdentifier'] instead of data.someIdentifier), but not everywhere. I'd recommend using indexing every where to fix this (i.e. data[1234]).