Bug report

When using the Selection and Export Grid Demo in Safari, and pasting the cells in Excel, there appears to be some extra empty lines below the paste.

Reproduction of the problem

1. Open the demo URL in Safari browser.
2. Select few cells and choose Copy option from the context menu.
3. Open an Excel file and paste the copied items (extra empty lines are pasted at the end).

Expected/desired behavior

The pasted lines should not include any additional empty lines beneath the specific content.

Environment

• Kendo UI version: 2022.2.802
• jQuery version: All Supported
• Browser: all

Bug report
Row filter Clear icon does not clear the autocomplete in Grid since 2022.1.119

Reproduction of the problem
Open the demo: https://demos.telerik.com/kendo-ui/grid/filter-row

Expected/desired behavior
AutoComplete shall be cleared

The issue is introduced with 2022 R1 (2022.1.119)
Environment
Kendo UI version: 2022.1.119 or above
Browser: [all]

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.

This article describes how to disable the resizing functionality for specific columns in a grid while all other columns stay resizable. This works fine, as long as the grid is not sortable: After the user tries to resize a non-resizable column for the first time, the cursor is set to "col-resize" every time a column's header is hovered, even outside the resize area and without trying to resize it. This DOJO demonstrates the described behavior.

We have found out that the DOM of grid column headers looks differently when the grid is sortable. Also, the style that sets the cursor is set on a different element and therefore no longer removed by the workaround proposed in the mentioned article.

This DOJO contains an adapted version of the workaround that fixes the issue.

Bug report

In case the inline editing is enabled in the Grid and also there is a selectable column, checking/unchecking the selectable column will check/uncheck all the checkboxes on the row.

Reproduction of the problem

1. Open the Dojo example.
2. Click 'Edit'
3. Check/uncheck the checkbox in the first column.

Current behavior

All the checkboxes on the row are checked/unchecked.

Expected/desired behavior

Only the checkbox in the selectable column should be checked without affecting the checkboxes in the other column.

The issue is a regression introduced with 2022 R1 (2022.1.119)

Environment

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

Bug report

When the data in a Grid is filtered and grouped and then we try to add a new record an error is thrown

Reproduction of the problem

1. Open the Dojo example.
2. Filter a column (ex. filter ProductName that contains 'a')
3. Group by UnitPrice
4. Click the external 'add' button.

Current behavior

The following error appears in the broswer console: Uncaught TypeError: Cannot read properties of undefined (reading 'length')
The error appears no matter if dataSource.add() method or gridData.splice(0, 0, newData); is used

Expected/desired behavior

There should be no error when an item is added to the Grids dataSource

The issue is a regression starting with 2022.2.621

Environment

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

Incorrect role as link is defined for header controls of 'Branches' table.

Hello,

Just upgraded to 2022.2.802 Kendo UI for jQuery and noticed that when clicking on a row in a grid it correctly highlights it (e.g. dark blue), but doesn't maintain the selection when moving the mouse from the row. This appears to be a breaking change - at least for our code. Previously it would still be selected/highlighted when moving the mouse away from the row.

Cheers,
Nick

Original posted on the forum. Looks like someone else has this issue as well.

https://www.telerik.com/forums/grid-does-not-maintain-row-selection-visually-highlighted

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.

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]

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

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.

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

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]

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. 

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>