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 ]
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>
When clicking on CheckBox to select a line, the widget check other checkbox (on other column of the same line) inserted from column template.
I suppose that the selector that the system use is too large.
For information, i created a template for boolean column based on how kendo generate checkbox structure (just de be coherent)
See the code extracted from https://dojo.telerik.com/EqiPIkiV
var checkBoxtemplate = function(boolValue){
var checkedStr = '';
if (boolValue) {
checkedStr = 'checked="checked"';
}
return '<input class="k-checkbox" data-role="checkbox" ' + checkedStr + ' type="checkbox"><label class="k-checkbox-label k-no-text smi-checkbox-fordisplay"></label>';
};
$("#grid").kendoGrid({
columns: [
{
selectable: true,
width: '30px'
},
{ field: "name" },
{ field: "age" },
{ field: "administator",
template: function (dataItem) {
return checkBoxtemplate(dataItem.administator);
}
}
],
dataSource: [
{ name: "Jane Doe", age: 30, administator: false },
{ name: "John Doe", age: 33, administator: false },
{ name: "BigBoss Doe", age: 70, administator: true }
],
selectable: true
});
After the kendoGrid is created, the headerAttributes field (of every column) has a id value (generated by Kendo) of some random GUID - but this GUID is nowhere to be found in the entire HTML.
So, there is no way to link a Kendo column object to an HTML (th) element.
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
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