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.

Bug report

columns.field.filterable.cell.inputWidth does not apply since R1 2022

Reproduction of the problem

Dojo: https://dojo.telerik.com/oVILIzaW

Current behavior
Width of autocomplete input is not affected

Expected/desired behavior
Width shall be reflected

Workaround

Environment
Kendo UI version: 2022.2.621
Browser: [all]

Bug report

When using a ForeignKeyColumn that is bound to a dataSource, the Grid options will not be available initially such as during the document.ready event.

Reproduction of the problem

Please visit this Progress Kendo UI Dojo which demonstrates the Grid unable to retrieve the options, and receiving a JavaScript error.

Expected/desired behavior

The Grid options should be available upon the document.ready event with a databound ForeignKeyColumn.

Environment

• Kendo UI version: 2022.2.510
• jQuery version: 3.6.0
• Browser: All

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]

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.

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

Bug report

When the Kendo UI Grid is initialized with the bind method utilizing MVVM, the columns.template is correctly bound based on the data-role, but the columns.headerTemplate does not render like the template.

Reproduction of the problem

Please take a look at the following Progress Kendo UI Dojo.

Current behavior

The column.headerTemplate does not render the elements containing a data-role.

Expected/desired behavior

The elements which contain a data-role should become widgets upon binding.

Environment

• Kendo UI version: 2022.2.510
• jQuery version: All supported versions
• Browser: All

It is possible to add new inline rows to grid even though they are not valid. 

Steps to replicate in attached dojo:

https://dojo.telerik.com/oJEMAPoJ

1. Apply any search in search panel

2. Click Add New Record (one or mutiple times)

3. Click SaveChanges

4. Delete search phrase

The result is that new rows have been added with empy ProductName column, which supposed to be required.

Bug report

Shift selection is not working correctly when multi-column headers are configured in a grid and selectable: "multiple cell" is configured


Reproduction of the problem

Current behavior
Shif selection not working correctly


Environment
Kendo UI version: 2022.2.510
jQuery version: any. Demo 1.12.4 and our code is 3.6.0
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]

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.

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" }
}

Bug report

A js exception is thrown on selecting a row with the select method, when the Grid's scrollable option is disabled. The exception started appearing since R3 2020 SP1.

Reproduction of the problem

1. Go to: https://dojo.telerik.com/adExIfAp/6
2. Run the example

Current behavior

A js exception is thrown on calling the select method.

Expected/desired behavior

No exception is thrown.

Environment

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

### Bug report

When reordering expanded rows, the "rowReorder" event does not return a correct "oldIndex".

### Reproduction of the problem

1. Create a hierarchical grid and enable the reorderable.rows property;

2. Expand all rows;

3. Handle the "rowReorder" event and log the event data in the browser console;

4. Move the second row above the first row. The property "oldIndex" returns a wrong value. It should be "1".

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

### Expected/desired behavior

The "rowReorder" event of the grid should return the correct indexes of the moved row.

### Environment

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

Hello again Kendo Support,

I believe I have found a bug with the kendo grid when using column virtualization. When turning on selectable rows, row selection is lost upon horizontal scroll. The bug can be easily reproduced using the following sample: https://dojo.telerik.com/osUKOZol

Is there any work around or plans to fix this bug in the future? Turning on virtual columns was a performance boost for our application and we'd hate to have to turn it off. 

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

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]).

I am trying to change the menu option for a column from false to true and others from true to false when a user selects an item from a dropdown. This isn't working. I'm using getOptions(), changing the menu setting in each column, and then setOptions(options) to set it.

Here is a dojo showing an example. In the example, firstName and lastName are initially hidden. I simulate a user choosing last name from some sort of selector (like a dropdown box). The code should then hide both name columns and unhide the lastName column. Instead it hides both name columns.

It seems to have something to do with setting any of the name columns to hidden on initialization. If I remove this from the column settings on initialization though it only works once and when I choose a different option from the dropdown (dropdown is simulated in the dojo so you can't try this but trust me) it breaks.

<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.511/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.511/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script></head>
<body>
  <div id="myGrid"></div>
  
  <script>
    let tableRows = [
      {
        ID: 1,
        FirstName: "John",
        LastName: "Smith",
        Age: 21
      },
      {
        ID: 2,
        FirstName: "Jenny",
        LastName: "Jones",
        Age: 18
      },
      {
        ID: 3,
        FirstName: "Greg",
        LastName: "Adams",
        Age: 23
      }
    ];
    
   let tableColumns = [
              {
                title: "Employee ID",
                field: "ID",
                width: 100,
                locked: true,
                menu: false
              },
            {
                title: "First Name",
                field: "FirstName",
                width: 150,
              hidden: true,
              attributes: { "class": "name" },
                
            },
            {
                title: "Last Name",
                field: "LastName",
              hidden: true,
                width: 150,
                attributes: { "class": "name", "data-position": "last name" },
                
            },
            {
                title: "Age",
                field: "Age",
                width: 100
            }
        ];

            var grid = $(`#myGrid`).kendoGrid({
            dataSource: {
                data: tableRows,
                schema: {
                    model: {
                        id: "ID",
                        fields: { ID: {type: "number"}}
                    }
                }
            },
            dataBound: function (e) {
                if (e.sender.dataSource.view().length == 0) {
                    var colspan = e.sender.thead.find("th").length;
                    //insert empty row with colspan equal to the table header th count
                    var emptyRow = "<tr><td colspan='" + colspan + "'></td></tr>";
                    e.sender.tbody.html(emptyRow);
                    e.sender.table.width(800);
                }
     
            },
            columns: tableColumns,
              columnMenu: true,
            sortable: true,
            pageable: false
        }).data("kendoGrid");
    
    let options = grid.getOptions();
    let columns = grid.columns;
    let nameColumns = $(".name");
    let lastNameColumn = $("[data-position='last name']");
    let lockedColumnCount = 0;
    for (var i = 0; i < columns.length; i++) {
        if (columns[i].locked) {
            lockedColumnCount++;
        }
    }
    $.each(nameColumns, function (index, element) {
        let elementIndex = $(element).index() + lockedColumnCount;
        //kendoGrids[tableId].showColumn(elementIndex);
        options.columns[elementIndex].menu = false;
        options.columns[elementIndex].hidden = true;
    });
    
    // Let's pretend Last Name was chosen from a select box part of name to show.
    $.each(lastNameColumn, function (index, element) {
        let elementIndex = $(element).index() + lockedColumnCount;
                        options.columns[elementIndex].menu = true;
                        options.columns[elementIndex].hidden = false;
                        //kendoGrids[tableId].showColumn(elementIndex);
                    });
                    
    console.log(options);
                    
                    grid.options = options;
                    grid.setOptions(options);
    
  </script>
  
</body>
</html>