Bug report
Reproducible in mobile mode enabled
Reproduction of the problem
1. Open below demo and enable mobile mode
2. Refresh
https://demos.telerik.com/kendo-ui/grid/editing
Current behavior
Error is thrown, grid not bound
Expected/desired behavior
No error shall appear
Environment
Kendo UI version: 2020.3.1021
jQuery version: x.y
Browser: [Chrome | Firefox ]
ColumnMenu in Grid does not hide/unhide the correct column when command column is placed first
Currently, the previous column is checked/unchecked and respectively hidden ("Unit Price")
The column that is selected in the columnMenu should be hidden or displayed and checked/unchecked in the columnMenu
When a user cancels an inline edit, hidden columns appear instead of staying hidden.
The hidden columns should remain hidden upon canceling an edited row.
Bug report
When the horizontal scroll of the grid is shown and is configured for RTL, the resize handle is mispositioned.
Reproduction of the problem
1. Make the grid scrollable and set explicit widths to all columns.
2. Make the grid RTL.
3. Introduce multi-column headers.
4. Notice that the columns cannot be resized due to the disposition of the handler.
5. Dojo for replication:
https://dojo.telerik.com/IZInOVUd
6. Notice that whenever the horizontal scroll is not present, the resize handle is positioned correctly.
Environment
* **Kendo UI version:** 2019.3.1023
* **jQuery version:** 1.12.4
* **Browser:** [all]
### Bug report
The column menu of the Kendo UI Grid widget with componentType set to 'modern' has missing translations in the default filter menu.
### Reproduction of the problem
1. Create a filterable grid and enable the column menu with componentType 'modern';
2. Include the localization script for "fr-CA" in the document from the CDN;
3. Open the column menu and expand the filter menu of a specified column. The logic operators "And" and "Or" are not translated.
A Dojo sample for reproduction: https://dojo.telerik.com/UYIrABUw
### Expected/desired behavior
When the column menu type is set to "modern", the operators of the filter menu should be translated as in the "classic' column menu.
### Environment
* **Kendo UI version: 2021.3.914
* **jQuery version: 1.12.4
* **Browser: [all]
The Pager breaks if you use the setOptions method to alter its options.
Regression introduced with 2023.2.829
After checking a checkbox, only the arrows remain from the Pager.
The Pager should remain whole when you alter its options.
The issue is reproducible when the grid consists only from Multi-header columns, the setDataSource() method has been used and one of the columns is initially hidden.
After setting the new data source, the last header gets hidden. The "display: none;" style has been applied to the "th" HTML element.
Steps to reproduce:
1. Create a grid with multi-header columns only.
2. Hide one column initially.
3. Set a new data source via the setDataSource() method.
4. The last column gets hidden.
Sample Dojo:
https://dojo.telerik.com/AcipENOt
Kendo UI version: 2019.1.220
Issue that I have can be observed on any grid with checkbox selection and filtering enabled at the same time (I edit this demo https://demos.telerik.com/kendo-ui/grid/checkbox-selection by adding filtering an already I can see my problem).
I have a grid with 10 records with checkbox selection, filtering and "persistSelection" option enabled. I select a single record with a checkbox. I use filtering and only 5 records remain visible, selected record is not visible (didn't match the filter). When I clear the filter my selected record remains checked. If I do the same but filtering causes all records to disappear then after clearing the filter my selected record is no longer checked. So we can see that selection persistence works differently depending on results of filtering. That is confusing and looks like a bug.
### Bug report
When the grid uses GroupPaging, Locked columns and one group spans over two pages, the header rows on the second page are misaligned.
### Reproduction of the problem
1. Create a Grid with GroupPaging and Locked columns.
2. Expand a group that should span over the next page.
3. Navigate to the next page.
4. Rows are misaligned.
### TicketID:
1526394
### Environment
* **Kendo UI version:** 2021.2.616
* **jQuery version:** 1.12.4
* **Browser:** [all]
It is possible to add new inline rows to grid even though they are not valid.
Steps to replicate in attached dojo:
https://dojo.telerik.com/oJEMAPoJ
1. Apply any search in search panel
2. Click Add New Record (one or mutiple times)
3. Click SaveChanges
4. Delete search phrase
The result is that new rows have been added with empy ProductName column, which supposed to be required.
The Grid's pdf.repeatHeaders option does not display the column headers for each new page when exporting the Grid to PDF
Regression introduced with 2023.1.314
The column headers are displayed only on the first PDF page
The column headers should be present for each PDF page
An error is thrown in the browser console when you navigate to the last Grid page when grouping is enabled.
Regression with 2022.1.301
An error is thrown on the browser console.
No errors should be thrown in the browser console
Steps to reproduce the problem:
Have a grid with:
When running the code that create the grid, the initial state looks like this:
Current behavior:
The header columns are filling the width of the grid (each bigger than the specified 100), but the rows columns cells have the specified width of 100, causing a misalignment.
However, changing the width of a column with the resize handle fixes all the widths (header + rows).
Same thing for adding/removing a column from the menu.
See the attached video for an example.
If in the initial state there are more shown columns so they can fill the grid width (and have the horizontal scrollbar), the issue is not present.
Expected behavior:
Rows columns should always match the width of the header.
Dojo example:
Here's an example, based on the one from https://demos.telerik.com/kendo-ui/grid/column-virtualization
https://dojo.telerik.com/@pgarand/UfEkIGiD
When the user adds a group in the Grid and try to add a second group immediately, while the first grouping is still loading, then an error is thron in the console.
Note: you can try setting the n browser Network throttling to Slow 4G to easily reproduce the issue
Error: kendo.all.js:60347 Uncaught TypeError: Cannot read properties of undefined (reading 'left')
is thrown and the Grid freezes
There should be no error in the console and the Grid should not freeze
In the Grid, when a new row is added, resized, and then the cancel changes button is clicked, an error is thrown.
An error is thrown
No errors should be thrown
Following example @ https://docs.telerik.com/kendo-ui/knowledge-base/grid-sort-displayed-columns-menu-items sorts a column menu. When hide column is then clicked, the wrong column is hidden.
This can be seen in your own dojo example linked in the above doc and @ https://dojo.telerik.com/UWuxOseV . Hiding column Ship Name hides Ship Address instead.
This seems to have been introduced in 2019 R2 SP1 version.
We have few of dynamically created grid controls. I like to change the grid header style for all of them. I found this solution on the forum however there is an issue with this. If I override ".k-grid-header th.k-header" the change effects column filter popup content as well. See this example on dojo: https://dojo.telerik.com/@ssharifi/AvayONaQ all text and drop down texts are also effected.
I just need to override the title text. What style can I set so the title text is bold but not the filter options?
Thanks,
Shawn
Hello,
autoFitColumn not working for columns if they are locked and in multi-column header. Example is below. If I remove "locked: true" from first column, than it works good. Can you help me please?
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</
style
>
<
title
></
title
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css"
/>
<
script
src
=
"https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"example"
>
<
div
id
=
"grid"
></
div
>
<
script
>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
resizable: true,
reorderable: true,
pageable: true,
columnMenu: true,
dataBound: function() {
this.autoFitColumn("CompanyName");
this.autoFitColumn("ContactTitle");
},
columns: [{
title: "Group",
width: 420,
locked: true,
columns: [{title: "CompanyName",width:60, field: "CompanyName"},
{title:"ContactTitle", width:60, field: "ContactTitle"}]
},
{
title: "Contact Info",
columns: [{
field: "ContactTitle",
title: "Contact Title",
width: 200
},{
field: "ContactName",
title: "Contact Name",
width: 200
},{
title: "Location",
columns: [ {
field: "Country",
width: 200
},{
field: "City",
width: 200
}]
},{
field: "Phone",
title: "Phone"
}]
}]
});
});
</
script
>
</
div
>
</
body
>
</
html
>