Create grid as groupable and try to set column title as "<span class='glyphicon glyphicon-cloud'></span>"
$("#grid").kendoGrid({
groupable: true,
columns: [{
field: "name",
title: "<span class='glyphicon glyphicon-cloud'></span>"
//, groupable: false
}, {
field: "age",
title: "Age"
}]
});Expected result - column title as glyphicon glyphicon-cloud but actual is wrong
To fix the problem - set up column as groupable: false (just uncomment) and title will be ok
But if I want to use such title and groupable: true - I cannot
Full example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.914/js/kendo.all.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
groupable: true,
columns: [{
field: "name",
title: "<span class='glyphicon glyphicon-cloud'></span>"
//, groupable: false
}, {
field: "age",
title: "Age"
}]
});
</script>
</body>
and on dojo: https://dojo.telerik.com/EWUnarUf/2
The problem can be observed in the following Dojo:
https://dojo.telerik.com/UHAdoNIL
The filter row appears on top of the Sticky Column.
Hi All,
We are facing a weird issue in kendo grid when both group paging and virtual scrolling are enabled for local data. Please see https://dojo.telerik.com/ICoDAleN/2 as example.
Steps to reproduce:
1. Run the code from https://dojo.telerik.com/ICoDAleN/2.
2. Try to group "DateTime" column by drag and drop to grouping header
3. After "DateTime" column is grouped, then un-group it by click cross icon of DateTime button.
4. Now you try to scroll down the grid, until ID column reach around 40, you will see the ID will jump back to around 0, and you will never see the rows which IDs are greater than 40.
5. If you open Developer Tools of browser, you will see following errors.
Uncaught ReferenceError: DateTimeDisplayValue is not definedat eval (eval at compile (kendo.all.js:234), <anonymous>:3:1078)
at init._rowsHtml (kendo.all.js:71887)
at init._renderContent (kendo.all.js:72745)
at init.refresh (kendo.all.js:72565)
at init.d (jquery.min.js:2)
at init.trigger (kendo.all.js:164)
at init._process (kendo.all.js:8113)
at init._processRangeData (kendo.all.js:9026)
at init.range (kendo.all.js:8857)
at init._page (kendo.all.js:64643)
6. If you group other columns, for example, group "Subject" column, and then un-group it, then scroll down the grid, you will not see this issue.
How to fix it? is there any workaround?
Thanks,
David
Bug report
Pdf export comes with loader when Kendo grid with endless scroll and allPages enabled
Reproduction of the problem
https://dojo.telerik.com/ABiMAjIK
Expected/desired behavior
No loading indicator shall be rendered in the exported PDF
Environment
Kendo UI version: all
Browser: all
Hi,
When the grid is initially hidden and then revealed programmatically, the pageSizes (and several other elements) are not rendered.
Reproducer:
- Go to https://dojo.telerik.com/EBugiKAZ
- Press Run and click the button, see no pageSizes and no "1 - 1 of 4 items" text
- Resize the browser window and see the elements appear (requires a minimum size, seems responsive related)
This also breaks when you have grid in a hidden div that you toggle open and it breaks in both Chrome and Firefox
When the autofitcolumn method is used together with multi-headers and hidden columns, some of the columns are either not visible at all or shrunken.
The problem can be observed in the following Dojo:
https://dojo.telerik.com/EJezUyeg
The CompanyName column should be visible, however it is not. If the example is ran in fullscreen, the column will be visible, however it will shrink if the Browser window gets smaller.
### Bug report
When the Kendo UI Grid widget in "Popup" edit mode has more than one level of grouping, and when the adding of a new record is canceled, the group headers of the empty row are not removed.
### Reproduction of the problem
1. Group the Grid by 2 columns;
2. Click the "Add new record" button;
3. Click the "Cancel" button in the Popup form;
4. The empty row for the new record is removed, but the group header of the first group remains.
A Dojo sample for reproduction: https://dojo.telerik.com/UgARObuZ
### Expected/desired behavior
The group headers of the empty row should be removed when the adding of a new record is canceled.
### Environment
* **Kendo UI version: 2021.2.616
* **jQuery version: 1.12.4
* **Browser:** [all]
1. Go to demo page
https://demos.telerik.com/kendo-ui/grid/server-grouppaging-virtualization and click to Edit in Dojo. It o
Then, to get rid of narrow groups I will change grouping frompens https://dojo.telerik.com/afoCefOJ
group: [{
field: "city",
dir: "asc"
}, {
field: "companyName",
dir: "asc"
}],
group: [{
field: "city",
dir: "asc"
}],and also adjust pageSize to 10:
pageSize: 10,
GC30TRSSMTI706Z, Ireland
I can see first request starting wtih Page:1
3. Now I scroll the virtual view just a bit down to get another 10 records. Surprisingly, I get same records again.
GC30TRSSMTI706Z, Ireland
We need to resolve this bug, because we can not use grid without this features (virtual scrolling and grouping).
Thank You.
LudvÃk Mikulenka
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>