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ł

On a grid with the pager refresh button enabled, when the refresh button is clicked, it stays in the highlighted/selected animation state. Only clicking off the button and somewhere else on the page restores the button to its initial visual state.

Grid pager refresh button stuck highlighted | Kendo UI Dojo (telerik.com)

Since 2021.R3; prior versions do not animate the button on click thus do not exhibit this.

Tested in Chrome/Edge.

Hello,

With a grid configured with the Search,  if a search is carried out with pre-existing filters on non-searchable columns, the pre-filtered columns are cleared in the search result.

Consider a basic grid as per the following Dojo:

https://dojo.telerik.com/axuFURen

It is configured to search on one column - name.

I can filter on the age, to show those aged 33

With the age filter applied, I then want to search that dataset, so I enter a value in the search control.

The result is that I only get the data filtered on the search input - the age filter has been cleared.

Summary

The search control should be configurable to either combine or ignore other filters.

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

When using Grid custom editor, the Kendo Editable adds data-binding for the value for both the hidden and the visible inputs of the ComboBox. This results in a field named [propertyName]_input to appear in the item model after it has been edited.

The way this happens is a bit inconsistent and depends on setup, but in the linked dojo, using tab after editing causes this to happen, but in our applications pressing enter  and sometimes even clicking off the editor causes this issue. 

Reproduction of the problem

• Go to the following Dojo sample; https://dojo.telerik.com/OfiCoyog
• Edit the category column and wait for the combobox.
• Type free text, without selecting a value;
• Press tab - the value won't be updated. Also, if you look at the Item, it will have a Category_input field, that has been added, while editing;

See here for the original bug. https://github.com/telerik/kendo-ui-core/issues/3427#issue-244359311

We are using the columns.filterable.ui to initialize a kendoTextArea, if we write something and use the enter key to filter the value is ignored. 

Example:

https://dojo.telerik.com/iSElEkUL 

Bug report

Reproduction of the problem

Open: https://demos.telerik.com/kendo-ui/grid/frozen-columns

Make sure to "Request Desktop Website" with Safari  (it works fine in Mobile Mode)

Then try scrolling vertically in the grid particularly first dragging the frozen columns and then dragging the non-frozen columns

Environment
Kendo UI version: 2022.3.1109
jQuery version: All Supported Versions
Browser: Firefox 108.0

Bug report

Sticky Column misalign on scroll with Safari IOS in Desktop Mode

Reproduction of the problem

Open: https://demos.telerik.com/kendo-ui/grid/sticky-columns

Make sure to "Request Desktop Website" with Safari  (it works fine in Mobile Mode)

Then try scrolling vertically in the grid particularly first dragging the frozen columns and then dragging the non-frozen columns

Environment
Kendo UI version: 2022.3.1109
jQuery version: All Supported Versions
Browser: Firefox 108.0

Bug report

When the exportSelectedToExcel is used the field name is exported in the Excel file instead of the configured title.

Reproduction of the problem

1. Open the Dojo.
2. Select a cell or a row and click the 'Select and export' button.

Current behavior

The selected cell/row is exported to Excel, but the header contains the field name, instead of the configured column title.

Expected/desired behavior

The exported header should be the same as the configured column title (this is the behavior when the file is exported using the 'Export to Excel' from the Grid`s toolbar).

The issue is a regression since Kendo version 2022 R3 (2022.3.913)

Environment

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

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]

Bug report

Navigatable Grid with hierarchy moves focus to the top parent row On click of horizontal scroll bar in child grid

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

 - Expand the first parent row or second parent row to render the child records.

 - Navigate the child rows downwards using vertical scroll and click the Horizontal scroll area of the inner grid (Red Rounded area).

 - Control Focus immediately shifts to the top row and the user can’t use horizontal scroll to view the columns in the child grid.

Also, if the user initially clicks on any cell in the School Name column focus is moved.

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

Bug report

The popup of the filter does not contains all items after selecting the timepicker.

Reproduction of the problem

1. Open the Filter Demo
2. Open the filter popup for the Birth Date.
3. Click on the 'clock' icon to display time.

Current behavior

The filter popup is closed. After the filter is opened again it displays only times. The filter popup should be closed and opened again to be rendered as expected.

Expected/desired behavior

After selecting the TimePicker the filter popup should not close, should display times.

The issue is a regression starting with 2023 R1 SP1 (2023.1.314)

Environment

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

Describe the bug

Text overlaps on selected non-altering rows upon scrolling in Grid with sticky columns with version 2023.1.314

To reproduce

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

Select a non-altering row

Scroll to the right

Affected package (please remove the unneeded items)

theme-default
theme-bootstrap
theme-material
theme-tasks
Affected suites (please remove the unneeded items)

Kendo UI for jQuery
Telerik UI for MVC
Telerik UI for Core
Affected browsers (please remove the unneeded items)

All
Build system information (please remove the unneeded items)

Not Applicable

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]