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 ]

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 there is sorting applied in the Grid and the sorted column is hidden, the last visible column is incorrectly highlighted.

Reproduction of the problem

1. Open the Dojo - https://dojo.telerik.com/@NeliKondova/oHoHaGuX

Current behavior

The last column is highlighted, although there is no sorting applied to it.

Expected/desired behavior

There should be no highlighted column when the column on which sorting is applied is hidden.

Environment

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

Bug report

copySelectionToClipboard() throws an error when the Grid has hidden column/s

Also if false is passed to the method  - grid.copySelectionToClipboard(false); - not all  GUID columns are copied to the clipboard

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

Select a row/rows

Click on the Select and copy button

Expected/desired behavior
Error should not be present and copy to clipboard shall copy correct data

Environment
Kendo UI version: [all]
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 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
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 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

Hi Team,

I'd like to request a built-in event before the Grid starts a Read action.  

Thank you!

I realize this has been covered by this workaround in the past, but the need to write extra code for moving the column back to the original position makes this seem a bit "hacky" and most importantly, the user experience of being allowed to drag the column in the first place just to see it jump back seems wrong.

The good news is that the kendoGrid already has a mechanism for preventing the columnReorder event from getting fired in the first place! The bad news is that it only happens for columns that have either of these 2 classes ["k-group-cell, "k-hierarchy-cell"]

My request is to have a configuration option that enforces that same behavior for specific columns as:

1. Add a "reorderable" flag to be set as part of the column configuration (set it to false for those we want to keep in place)

2. This flag will set a class on those columns the same way it works for columns with "k-group-cell" or "k-hierarchy-cell" classes, so the event can be prevented.

There is one important caveat to consider with this approach: Only columns at the front and the back of the grid can be locked in place, so there needs to be validation to prevent having non-reorderable columns among reorderable ones.

When exporting all the lines in the grid with saveAsExcel the excel is formatted in the event handler when the ExcelExport event is fired.

I would like to have the exact same effect when calling the exportSelectedToExcel method.

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,

when filtering a column in a grid, when we type some text it searches for that text but when the column contains accented characters, we need to specify the accented character or else it will only search for normal characters.

Column with a mix of accented and normal characters values (subset)
REÉR
REÉÉ-F
REER-F

when typing re, I get all the above but if I type ree, I only get REER-F, I would like to get all 3 since E and É are the same search wise.

when typing re

when typing ree

Hi,

We have a grid with virtual scroll enabled.

When double-clicking on the first 15 rows resize handles, it behaves correctly, i.e it automatically fits the columns size to max row width.

The problem occurs now when we begin scrolling horizontally the grid : starting to the 16th column (red backgrounded) resize handle double click action behaves weirdly. Sometimes it fires a scroll event without doing else, sometimes it resizes the column but in the wrong way by reducing width.

Check this JsFiddle to reproduce the problem. Problematic column are red backgrounded.

Hello

Today I noticed a bug in the GRID control.

If it applies formatting so as not to wrap the line.
Then the standard export to PDF incorrectly shows these lines too long.

I have modified this example
https://dojo.telerik.com/@p.korczak@info-kor.pl/aNOvOYIP

by adding a line
toolbar: [{name: "excel"}, {name: "pdf"}],
and see those lines where the description is too long

Paweł

Description: 

Users who rely on high contrast Aquatic/ Desert mode will be affected here as they will face difficulty in knowing which control is focused right now.

Environment (OS, Application):

Test Environment:

Microsoft Edge : Version 105.0.1343.25 (Official build) (64-bit)

OS version (OS Build 22000.856) 

URL: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/filterable.messages

Pre-Requisites (if any):

1. Go to system settings.

2. Navigate to 'Accessibility' and activate it.

3. Navigate to 'Contrast theme' and activate it.

4. Select 'Desert/Aquatic' High Contrast theme in the combo box.



Repro Steps:

1. Open given URL in Edge. 

2. Kendo UI for jQuery "filterable.messages" page will be open.

3. Go to preview button and activate it.

4. Turn on High contrast theme.

5. Navigate to filters and activate it. Expand 'Show items with value that:' drop drown of filters.

5. Navigate over drop drown and Observe the issue.

Actual Results:

User is not able to recognize, which list item is focused or selected in 'Show items with value that:' drop drown of filters in high contrast Aquatic/ Desert mode.

Expected Results:

A proper rectangular colorful boundary should be defined which indicates the currently selected/focused list item under the Show items with value that:' accordingly in high contrast Aquatic/ Desert mode.

Additional notes:

The same issue can be observed throughout the page where a similar dropdown appears.

Subject says it all, this has to be a bug or something? I am having the user update what's in the grid and then on cellClose making an ajax call to save the value but it's not firing when the cell changes, only if it stays the same.

Here's a dojo showing off what's happening:

https://dojo.telerik.com/ekoLaZOm 

Bug report

Setting the columns.selectable to true does not override the selectable.mode when set to "single".

Reproduction of the problem

1. Run this dojo
2. Click on the header checkbox.

Current behavior

Only the checkbox in the first row is checked.

Expected/desired behavior

All the checkboxes on the page are checked

Environment

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