Hi Guys,

Have just tripped over another regression in the 2023.1.314 release whereby resizing of a locked column also effects the sizing of any prior columns.

Reproduction of the problem

    Open the Grid Frozen Column Demo
    Decrease the size of the 'Ship Name' column

Current behaviour

As the width of column header decreases you hit a point where the width of the related data cells stop decreasing but the width of the data cells in previous columns start to decrease causing column misalignment. See attached screenshot.

Expected behaviour

Only the selected column should resize and previous columns should remain fixed.

Regards
Alan

Bug report

When setting column attribute that contains "_" in the Grid, an error is thrown.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/uPuDeTUk/4
2. Open the browser console

Current behavior

An error is thrown due to the 'cause_error' attribute for the classification column

Expected/desired behavior

No errors should be thrown

Environment

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

The Kendo-UI Grid supports the concept of locked columns that are always on the left side of the screen (in a non-RTL-world) and do not scroll. This makes it necessary to split the underlying HTML-table into two parts (one is locked and one is not). Kendo-UI takes care of syncing the height of the rows between those two tables.

However, if there are empty cells in the locked part, this logic produces results that make the row grow larger (higher) than if there was content. This DOJO demonstrates the behaviour. Using the Browser's DEV-Tools, you can see that rows without content in column A are 37px high, while those with content are only 36px high.

Allow using kendo templates in columns.attributes for example

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    attributes: {
      "data-id": "#:data.id#",
      "data-clientid": "#:data.clientId#",
    }
  } ],
  dataSource: [ { id:1, name: "Jane Doe", clientId:"#223" }, { id:2, name: "John Doe", clientId:"#354"  }]
});
</script>

Hi

again this request is not urgent as I implemented this myself.
I'd like to have 'nextRecord' 'previousRecord' functionality in the grid widget.

We have a next/previous record button on our forms and as floating buttons to navigate the records.
As soon as we navigate to the next/previous record, the form loads the data of the concerning record.

My current implementation is as follows:

/**
 *
 * Grid with navigation code included 
 * 
 * selectRowByIndex: 0 based row selection by index of currently shown rows
 *
 * @author Alex Bernhard <alex.bernhard@uzh.ch>
 * @version 1.2.0
 */


(function ($) {

    var kendo = window.kendo,
        ui = kendo.ui,
        Grid = ui.Grid,
        self = this;

    var NavigatableGrid = Grid.extend({
        init: function (element, options) {

            // assign that to this
            var self = this;
            this.selectedIndex = 0;
            this.updateAfterLoad = false;

            // call the base function to create the widget
            Grid.fn.init.call(this, element, options);

            if (typeof options['updateMethod'] == 'function') {
                this.updateMethod = options['updateMethod'];
            }

            self.bindEvents();

        },
        options: {
            name: "NavigatableGrid",
        },
        bindEvents: function () {
            this.bind("change", function () { this.setSelectedIndex(); });
            this.bind("dataBound", function () {
                this.selectRowByIndex(this.selectedIndex);
                // after selecting the next row, shall update be called here?
                // happens only when navigating to a new page
                // or after search results are present
                if (this.updateAfterLoad) {
                    this.updateAfterLoad = false;
                    let selectedItem = this.dataItem(this.select());
                    if(selectedItem != null && selectedItem.hasOwnProperty('id')){
                        this.updateMethod(selectedItem.id);
                    }
                }              

                return false;
            });
        },
        updateMethod: function () { },        
        setSelectedIndex: function () {
            let dataRows = this.items();
            this.selectedIndex = dataRows.index(this.select());
            return this.selectedIndex;
        },
        selectRowByIndex: function (index) {
            // zero based index
            this.clearSelection();
            this.select('tr:eq(' + index + ')');
        },
        selectRowById: function (id) {
            this.clearSelection();
            let view = this.dataSource.view();
            let _self = this;
            let rows = $.grep(view, function (item) {
                return item.id == id;
            }).map(function (item) {
                return _self.tbody.find("[data-uid=" + item.uid + "]");
            });

            if (Array.isArray(rows) && typeof rows[0] !== 'undefined') {
                this.select(rows[0]);
            }
        },
        previousRow: function () {

            // get current number of rows
            let pageSize = this.dataSource.pageSize();
            let currentPage = this.dataSource.page();

            // already first row of current page ?
            if (this.selectedIndex == 0) {
                let previousPage = currentPage - 1;
                // not the first page yet - load the previous page and read the data
                // after load
                if (previousPage > 0) {
                    this.selectedIndex = pageSize - 1; // last row of previous page
                    this.updateAfterLoad = true;
                    this.dataSource.page(previousPage);
                }
            } else {
                // set next row index (0 based !!)
                this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
                this.selectRowByIndex(this.selectedIndex);
                this.updateAfterLoad = false;

                let selectedItem = this.dataItem(this.select());   
                if(selectedItem != null && selectedItem.hasOwnProperty('id')){
                    this.updateMethod(selectedItem.id);
                }
            }
        },
        nextRow: function () {

            // get current number of rows
            let numRows = this.items().length;
            let pageSize = this.dataSource.pageSize();
            let numPages = this.dataSource.totalPages();
            let currentPage = this.dataSource.page();

            // already last row of current page ?
            if (this.selectedIndex == numRows -1) {
                let nextPage = currentPage + 1;
                // not the last page yet - load the next page and read the data
                // after load
                if (nextPage <= numPages) {
                    this.dataSource.page(nextPage);
                    this.selectedIndex = 0;
                    this.updateAfterLoad = true;
                }
            } else {
                // set next row index (zero based !!)
                this.selectedIndex = Math.min(this.selectedIndex + 1, pageSize-1);
                this.selectRowByIndex(this.selectedIndex);
                
                let selectedItem = this.dataItem(this.select());   
                if(selectedItem != null && selectedItem.hasOwnProperty('id')){
                    this.updateMethod(selectedItem.id);
                }
            }
        }
    });
    kendo.ui.plugin(NavigatableGrid);
})(jQuery);

And an example usage is like:

accessionGrid = $("#accession-grid").kendoNavigatableGrid({
.... standard code for kendo grid
// call method in form when navigating
 updateMethod: function(data){accessionForm.update(data)},
.....
});

// code for grid navigation
function nextAccessionGridRow(){
    accessionGrid.nextRow();
}

function previousAccessionGridRow(){
    accessionGrid.previousRow();
}

Bug report

When filtering is enabled in the Grid, the autoFitColumns method does not work.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/AsaNeqOc
2. Compare the column width of the two Grids

Current behavior

The filterable Grid's columns are not auto-fitted

Expected/desired behavior

The filterable Grid's columns should be auto-fitted

Environment

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

Bug report

In an in-cell edit mode, if you edit a Grid cell with enter key, the Grid will scroll to the top.

Regression introduced with v2020.3.1021

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/ICoceZUp/3
2. Scroll to the one of the last items
3. Edit a cell
4. Close the cell with Enter key

Current behavior

The Grid scrolls to the top

Expected/desired behavior

The Grid shouldn't scroll to the top.

Environment

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

Bug report

The Grid column header texts collides with the columnMenu icons.

Regression introduced with 2023.1.314

Reproduction of the problem

1. Open this Dojo example or the Multi-Checkboxes Grid demo (on a small screen)

Current behavior

The column header text overlaps with the menu icon

Expected/desired behavior

the header text shouldn't collide with the menu icon

Environment

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

Bug report

Clicking on a custom icon-button command in the Grid fires a change event.
This is a regression introduced with v 2023.2.606

Reproduction of the problem

1. Run this dojo
2. Click on the custom command button - only the click handler is executed
3. Click on the icon button - a change event is fired and the click handler is executed

Expected/desired behavior

Only the click handler should be executed on click of an icon button representing a custom command.

Environment

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

Bug report

When tabbing through the row filter inputs of a virtual Grid only headers are scrolling

Reproduction of the problem

Run this Dojo - https://dojo.telerik.com/IjuJoRAx/5

Expected/desired behavior

Headers and columns shall scroll when tabbing through the row filter inputs

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

Test Environment:

OS: Windows 11 Version 22H2(OS build 22621.1992)

Browser: Edge browser version 115.0.1902

Screen Reader: Narrator.

Repro Steps:

1. Open URL: Kendo UI Snippet | Kendo UI Dojo (telerik.com)
2. Navigate to the Choose Library combo box and select 'Kendo UI 2022 R2' option.
3. Navigate to the Run button and activate it.
4. Open Narrator using 'Ctrl + Win + Enter' key.
5. Press 'T' key to navigate table in quick navigation mode.
6. Navigate the table header controls using up arrow.
7. Observe that narrator announce role as link on Filter controls or not.

Actual Result:

Incorrect role defined as "link" for the "Metric type filter column setting" button.

Expected Result:

Correct role defined as "link" for the "Metric type filter column setting" button.

Bug report

In the draggable Grid, after new items are created the dragging of the rows does not work as expected.

Reproduction of the problem

1. Open the Dojo example - https://dojo.telerik.com/@NeliKondova/USiBUBex
2. Add multiple items - lets say 4,5,6
3. Try to drag the rows to reorder them.

Current behavior

Sometimes the rows can not be moved at all, sometimes it is dropped in the wrong place.

Expected/desired behavior

The rows should be dragged and dropped without any issue even after creating new items in the Grid.

Environment

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

Bug report

When PivotConfiguratorV2 and Grid are configured on the same page and sortable and/or filterable are enabled for both components an error is thrown in the console when trying to filter.

Reproduction of the problem

1. Open the Dojo - https://dojo.telerik.com/@NeliKondova/utiHOPIc
2. Click to filter the data in the Grid using the column menu

Current behavior

The following error is thrown in the console:
Uncaught TypeError: Cannot read properties of undefined (reading 'close')

Expected/desired behavior

There should be no error in the console and it should be possible for both PivotConfiguratorV2 and Grid to be sortable and filterable.

Environment

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

Bug report

When the scrollable option of the Grid is set to "virtual: 'columns'", the reordering of the columns cannot be performed while dragging over the field headers.

Regression introduced with 2022.3.913

Reproduction of the problem

1. Open the Dojo example - https://dojo.telerik.com/AMeHorIC/3
2. Try to reorder the columns while dragging over the field headers.

Current behavior

The columns cannot be reordered from the field headers. Instead, the field headers are flickering.
Screen recording - https://screenpal.com/watch/c0jrQ2Vpr8e
If the reordering is performed below the headers, it works properly.

Expected/desired behavior

Should be able to reorder the columns from the field headers without flickering.

Environment

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

Bug report
Download Builder Tool does not add all dependencies for Grid

Reproduction of the problem

Download Builder Tool does not add Chip and ChipList as dependencies that are needed when grouping is enabled.

Expected/desired behavior
Al dependencies shall be added to the Grid

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

Bug report

When culture different than 'en-..' is set in Grid the validation.min for the Date field is not taken into account.

Reproduction of the problem

1. Run the Dojo example - https://dojo.telerik.com/@NeliKondova/ILOpaQAv
2. Select different cultures from the DropDown above the Grid
3. Try to edit the row and expand the DatePicker nested in the Date1 column

Current behavior

In case a culture different than 'en-..' is selected the min value for the DatePicker is not applied.

Expected/desired behavior

The min value should be set for the DatePicker no matter of the culture.

Workaround

 edit: function(){
             $('[data-role="datepicker"]').data("kendoDatePicker").setOptions({ min: new Date()})
          },

Environment

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

Bug report

When the value of a cell in the Grid is set using the model.set method, and there is already a dirty cell in the Grid, the .k-dirty-cell class is added to multiple cells.

Reproduction of the problem

1. Open the Dojo - https://dojo.telerik.com/@NeliKondova/OhoPEPoh
2. Change the value in an arbitrary cell in the Grid.
3. Press the setValue button (The set value button is setting the value of the third cell in the ProductName column using the API set method)

Current behavior

The k-dirty-cell class is applied to multiple cells (the background is changed to green).

Expected/desired behavior

The .k-dirty-cell class should be applied only to the cells with changed value.

The issue is a regression starting with the 2023 R1 (2023.1.117) version.

Environment

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

Bug report

Grid with ColumnMenu groups in combination with multi-column headers gives an error:

kendo.all.js:326079 Uncaught TypeError: Cannot read properties of undefined (reading 'length')

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

Expected/desired behavior

ColumnMenu groups shall work together with multi-column headers

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

Bug report

When a column is unsticked either through the built-in context menu or through the unstickColumn method all the casses from the cells in that column are removed, even the 'k-table-td' class.

Reproduction of the problem

1. Open the Dojo and inspect the cells in the ShipAddress column
2. Unstick the column

Current behavior

All classes in that column are removed

<td class="" style="" role="gridcell">Boulevard Tirou, 255</td>

Note: Initially the cells have the k-table-td class twice which is also not expected

<td class="k-grid-content-sticky k-table-td k-table-td" style="left: 0px; right: 0px;" role="gridcell">Boulevard Tirou, 255</td>

Expected/desired behavior

Only the 'k-grid-content-sticky' class should be added or removed when sticking/unsticking a column.

Environment

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