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
Bug report
Regression introduced in R3 2019 SP1. Reproducible with the LESS themes.
Reproduction of the problem
- Open a column filter menu and click on one of the dropdowns in it.
Current behavior
All of the text in the filter menu gets selected.
Expected/desired behavior
No text selection.
Environment
- Kendo UI version: 2019.3.1023
- jQuery version: x.y
- Browser: [Chrome 77 | Firefox 69 ]
Link to GitHub issue - https://github.com/telerik/kendo-ui-core/issues/4705
### Reproduction of the problem:
1. Run this dojo
2. Collapse one or more of the subCategory groups
3. Collapse the category Group
4. Expand Category
### Current behavior
The aggregate rows are missing and the locked and unlocked content is misaligned
### Expected/desired behavior
Rows should be aligned
When using the Nova theme locked command columns are not styled correctly.
In the following dojo one command column is locked and not styled while another command column is not locked but styled correctly.
https://dojo.telerik.com/eWECAZEw
Here's the code in case the dojo doesn't work:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.nova.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/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/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ category: "category 1", subCategory: "sub. category 1", name: "product 1", val: 1 },
{ category: "category 1", subCategory: "sub. category 1", name: "product 2", val: 1 },
{ category: "category 1", subCategory: "sub. category 1", name: "product 3", val: 1 },
{ category: "category 1", subCategory: "sub. category 1", name: "product 4", val: 1 },
{ category: "category 1", subCategory: "sub. category 2", name: "product 5", val: 1 },
{ category: "category 1", subCategory: "sub. category 2", name: "product 6", val: 1 },
{ category: "category 1", subCategory: "sub. category 2", name: "product 7", val: 1 },
{ category: "category 1", subCategory: "sub. category 2", name: "product 8", val: 1 },
{ category: "category 1", subCategory: "sub. category 3", name: "product 9", val: 1 },
{ category: "category 1", subCategory: "sub. category 3", name: "product 10", val: 1 },
{ category: "category 1", subCategory: "sub. category 3", name: "product 11", val: 1 },
{ category: "category 1", subCategory: "sub. category 3", name: "product 12", val: 1 },
]
});
$("#grid").kendoGrid({
columns: [
{ command: "edit", locked: true, width: 150 }, // <<-- columns is locked
{ field: "category", locked: true, width: 150 }, // <<-- columns is locked
{ command: "edit", width: 150 },
{ field: "subCategory", width: 200 },
{ field: "name", width: 500 }
],
dataSource: dataSource,
scrollable: true,
selectable: "row"
});
</script>
</body>
</html>