Grid throws error when partial update is executed and selection is persisted
Save
command button.The Grid throws an error when the partial update is executed and the selection is persisted.
The Grid should not throw an error when the partial update is executed and the selection is persisted.
In a Grid with popup editing, saving/cancelling the changes shows hidden columns for a short time.
Regression with v 2023.2.829
The hidden ID column is shown for a short time
The hidden column should remain hidden
Consider the following scenario: There is a sortable Kendo-UI grid with a corresponding dataSource. Initially, the dataSource contains some items. When updating the dataSource to an empty array, all items disappear from the grid - so far, so good. However, if a column header is clicked afterwards to sort that column, the removed data reappears again.
We created a small "walkthrough" in this DOJO to demonstrate the issue.
FYI: The issue can be avoided by using a custom implementation of dataSource.transport.read which always returns the latest data.
When the loaderType is set to skeleton and the user edit the cells in the Grid, when saving the Grid is displayed empty.
The Grid does not display any data. The Grid is displayed as expected when the default loaderType is set.
The updated data should be displayed
sync: function(e){
$("#grid").data('kendoGrid').refresh()
},
In a navigatable Grid with a custom ComboBox cell editor, clicking the clear button closes the cell instead of clearing the value in the ComboBox.
Regression introduced with 2023.2.606
The cell exits the edit mode when the button is clicked and the value is not cleared
The cell should remain in edit mode and the value should be cleared
When the selectable option is set to "multiple cell" and the user tries to select the content of a single column, the content of the entire row is selected.
France
cell and drag down to select only the content in the ShipCountry column.The content of the other columns is selected as well - https://somup.com/cZeXIvpRzk
The behavior is expected when the allowPaste option is enabled. However, once the allowPaste option is disabled only the content of the selected column should be selected.
kendo.ui.Selectable.fn._allowPreventDefault = () => true;
Dojo - https://dojo.telerik.com/@NeliK/eTocoBOL
Steps:
Expected: kendoConsole logs the dataItem info in the top message
Actual: dataItem() doesn't find the model even though it exists in the Grid dataSource
In the Grid source code in the refresh function, _data is set to dataSource.view() if partialUpdate is true. For a grouped dataSource, view() will return the parents. This breaks the dataItem function since it relies on the flat array for retrieval.
It looks like this issue was introduced in version 2024.1.319 as it doesn't seem to affect 2024.1.130.
Describe the bug
With LESS themes on iOS devices when the user taps and holds an icon in the Grid the following system popup appears
With the SASS themes the popup is not displayed.
To reproduce
Expected behavior
The popup for saving/copying the image should be displayed.
The same example using LESS themes - https://dojo.telerik.com/IsOvIjef
The issue might be due to the usage of -webkit-touch-callout
Workaround
<style>
.k-grid{
-webkit-touch-callout: unset !important;
}
</style>
Affected package
Affected suites
Affected browsers
Build system information
Get a scenario where we have a Grid with the following configs:
Having the above configuration, try to reorder random rows. The value in the Drag Hint shows a number of files that is twice the number of the selected for reordering rows.
The text inside the Drag Hint is "4 items selected"
The text inside the Drag Hint should correspond to the number of the selected rows. In the above scenario, the text should be "2 items selected"
In a Grid with a hidden column, the aggregates in the footer shift to the right if you edit a cell.
Regression introduced with 2023.2.829
The footer cells shift to the right.
The footer cells shouldn't shift to the right after updating a cell.
In a Grid with virtual row and column scrolling enabled, if there are large number of hidden columns, the horizontal scrolling is very slow.
Horizontal scrolling is slow
Horizontal scrolling should be smooth
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.
Hiding the first column in Grid will show a 2 pixels left border instead one.
Dojo Sample to replicate the issue: https://dojo.telerik.com/ubaLiYEN
Steps:
1. Hide the first column (OrderID) from the Column Menu.
2. Notice the doubled left-border on the left hand side of the Grid.
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]
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:
Hello,
we have the following problem:
In the dojo https://dojo.telerik.com/uJUGEQuh clicking on a row from the skleton loader in the grid causes an error. It seems like you want to access the "id" field from the datasrouce model which doesn't exist in the loading animation.
model:
{
id: "Id",
fields:
{
ProductName: { type: "string" },
Id: { type: "number" }
}
}
If you rename the "id" field to for exmaple "XXXX" the error message changes
from:
Uncaught TypeError: Cannot read properties of undefined (reading 'Id')
to:
Uncaught TypeError: Cannot read properties of undefined (reading 'XXXX')
We attached a gif of the problem and the code snipped of the dojo. The browser is Chrome Version 109.0.5414.120 (Official Build) (64-Bit)
Greetings
Ingo E.
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.
setValue
button (The set value button is setting the value of the third cell in the ProductName column using the API set method)The k-dirty-cell
class is applied to multiple cells (the background is changed to green).
The .k-dirty-cell
class should be applied only to the cells with changed value.
When filtering is enabled in the Grid, the autoFitColumns method does not work.
The filterable Grid's columns are not auto-fitted
The filterable Grid's columns should be auto-fitted
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.
The pasted lines should not include any additional empty lines beneath the specific content.
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>