Bug report

Regression Bug.

The new double tap editing mode not entered in Chrome and Edge on mobile devices since 2023.3.1010

Tested on iPad and iPhone

Reproduction of the problem
Dojo: https://dojo.telerik.com/AtaWufEG

Expected/desired behavior
User shall be able to enter editing mode on double tap

Environment
Kendo UI version: 2023.3.1010 or newer
Browser: [Chrome, Edge on Apple mobile device]

Bug report

Aria labels for row filter inputs are not descriptive.

Reproduction of the problem

Open this demo: https://demos.telerik.com/kendo-ui/grid/filter-row

Examine aria labels for row filter inputs

Expected/desired behavior

Aria labels should have descriptive names, such as ‘Search value’ or ‘Search term’ for the first input and ‘Filter type’ or ‘Comparison type’ or similar for the second. They should communicate the purpose of the input.

Environment
Kendo UI version: [all]
Browser: [all]

Bug report

When the Grid is grouped and there is a locked column set, the grouping columns and the locked column have incorrect widths.

Reproduction of the problem

1. Open the Dojo example - https://dojo.telerik.com/@NeliK/aYUyeyAS

Current behavior

The width of the locked column is 103px although the configured width is 50px. The grouping columns have a width of 66px although the width applied from the theme is 32px.

Expected/desired behavior

The width of the locked column should be according to the value set in the configuration of the Grid. The grouping column should have a width as applied by the themes.

The issue is a regression starting with R2 2023 SP1 (version 2023.2.718) release.

Environment

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

Bug report

Regression with 2024.1.319

Footer on a scrollable grid with sticky column not aligned when columns are resized

Reproduction of the problem

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

1. Resize the column "age"

2. Then resize the column "name", and here is the outcome.

Expected/desired behavior
Fotter shall be aligned with the columns

Environment
Kendo UI version: 2022.1.301 or newer
jQuery version: []
Browser: []

In current versions of Firefox, scrollbars do not longer reserve any space. In grids with locked columns, this leads to a double border at the right end of the grid's header:

The problem only appears if locked columns are present and scrollbars use zero-width (Firefox-Default). This DOJO contains a minimum reproducible example.

Environment (OS, Application, Versions): Chromium Edge Version 119.0.2151.72 (Official build) (64-bit)

Repro Steps : 

1. Lauch the application using URL: https://dojo.telerik.com/UZIkuGoD
2. “Kendo UI ® Dojo by Progress” screen should open.
3. TAB to “Run” button and hit ENTER key.
4. TAB to "First Name" column in the table and press CTRL + SPACE key.
5. Observe that by pressing CTRL + SPACE key whether the table columns are getting grouped or not.

Actual Results: User is not able to group/ungroup the table column header using keyboard with CTRL + SPACE key.

Expected Results: User should be able to group/ungroup the table column header using keyboard with CTRL + SPACE key.

Bug report

When the Add new Record button is clicked multiple times, the newly added row is not saved, when the 'Save' button is clicked.

Reproduction of the problem

1. Open the Dojo - https://dojo.telerik.com/@NeliK/adURoNaH
2. Click the 'Add new record' button at least twice.
3. Try to edit the row and click the 'Save' button.

Current behavior

The row freezes and is not closed. If after clicking the 'Save' button the user clicks again the 'Add new record' the row is saved.

Expected/desired behavior

The row should be saved and closed when the 'Save' button is clicked, even if the 'Add new record' is clicked multiple times.

The issue is a regression starting with 2014.1.319 release

Environment

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

Bug report

Copy Paste to Search Panel with `allowPaste` set to `true` in the grid is not working

Regression since 2024.1.130

Reproduction of the problem
Dojo: https://dojo.telerik.com/EnUpigUf/2

Try pasting a value in the Search input

Current behavior
The expand arrow disappears.

Expected/desired behavior
User shall be able to paste values to the search panel

Environment
Kendo UI version: 2024.1.130 or newer

jQuery version: 3.4.1

Browser: [all]

Reproduction steps: 

Try to expand a group in this dojo:

• https://dojo.telerik.com/aroxoYeB/5 

Workaround: 

Appending the following script right after loading the kendo scripts:

• https://dojo.telerik.com/aroxoYeB/6 

• kendo.ui.Grid.original_groupable = kendo.ui.Grid.prototype._groupable;
  kendo.ui.Grid.prototype._groupable = function() {
      let that = this;
      kendo.ui.Grid.original_groupable.call(that);
      if (!kendo.support.isRtl(that.element)) {
          return;
      }
  
      if (that._isLocked()) {
          that.lockedTable.on("click.kendoGrid", ".k-grouping-row " + "a[class*='-i-caret-alt-right']", that._groupableClickHandler);
      } else {
          that.table.on("click.kendoGrid", ".k-grouping-row " + "a[class*='-i-caret-alt-right']", that._groupableClickHandler);
      }
  }

Bug report

When the selectable.dragToSelect option is set to false, you can't assign a dragstart event on the Grid's rows.

Regression introduced with v2024.2.514

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/@martin.tabakov@progress.com/aROGEpaQ/3
2. Try to drag a row

Current behavior

The dragstart from the dataBound event is not triggering

Expected/desired behavior

The dragstart event should be triggering

Environment

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

Bug report

When the selectable is set to "multiple, row", the default editable mode is enabled and the user tries to edit a cell, the editable cell is not closing

Reproduction of the problem

1. Open the Dojo - https://dojo.telerik.com/@NeliK/IxUgEMUP or https://dojo.telerik.com/@NeliK/uyuhOFIK 
2. Edit a cell and click on another cell to edit.

Current behavior

The first time the cell is closed as expected. However, every second edited cell is not closing.

Expected/desired behavior

The edited cell should close.

The issue is a regression starting with the 2024.2.514 version

Environment

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

Bug report

When the Grid has media column configured and the browser is resized an error is thrown.

Reproduction of the problem

1. Run the Dojo: https://dojo.telerik.com/UFuJacem
2. Resize a column
3. Resize the browser window

Current behavior

An error: Uncaught TypeError: Cannot read properties of undefined (reading 'contains') is thrown.

Expected/desired behavior

There should be no error in the browser cosole.

The issue is a regression starting with 2024.3.806

Environment

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

Bug report

When the filterable mode is enabled in the Grid and the user has to scroll to the needed column, then the Column Menu autocloses right after a column is selected or deselected in the column list in the ColumnMenu. The issue appears only with 'classic' mode.

Reproduction of the problem

1. Open the Dojo or the Demo.
2. Scroll to the last column and uncheck/check one of the columns.

Current behavior

The ColumnMenu immediately closes. The ColumnMenu does not close when it is used for the initially visible columns.

Expected/desired behavior

The ColumnMenu should not close. The behavior should be consistent for all the columns.

The issue is a regression starting with 2022 R1 (2022.1.119) release

Environment

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

Bug report

Grid row resizing, locked columns, and incell editing breaks row resizing 

Reproduction of the problem

Open the Dojo - https://dojo.telerik.com/FxOcPHdy

Expected/desired behavior
The resized row shall retain its height

Environment
Kendo UI version: 2024.3.806
jQuery version: 3.4.1
Browser: [all ]

Bug report

When there is a frozen command column configured in the Grid and the user groups by a column, the frozen column is autoresized and has incorrect width.

Reproduction of the problem

1. Open the Dojo - https://dojo.telerik.com/VexIXpkO.
2. Group the Grid by a column, for example, 'ProductName'.
3. Click the 'Edit' command button.

Current behavior

The frozen column is changing its width, it gets narrower. Thus, in some scenarios, the 'Cancel' button in the edited row may not be entirely visible.

Expected/desired behavior

The frozen column width should remain unchanged.

The issue is a regression starting width 2024.3.806

Environment

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

Bug report

Currently, if you focus the command buttons, pressing tab will navigate to the buttons on the next row.

Reproduction of the problem

1. Open this dojo example - https://dojo.telerik.com/lmIJIUCH/2
2. Click on the cell containing the command buttons on the first row
3. Press enter to focus the Edit button
4. Press tab multiple times.

Current behavior

The focus will move to the buttons on the next row.

Expected/desired behavior

When the focus is on the Delete button, pressing Tab should return the focus to the current cell so that you can navigate to the remaining cells on the same row.

Environment

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

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>