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
The problem can be observed in the following Dojo:
https://dojo.telerik.com/UHAdoNIL
The filter row appears on top of the Sticky Column.
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
Hi,
The buttons And/Or in the column menu filter are not translated. They are in English even if the language is set to Swedish.
This is only when componentType is set to "modern". When it is set to "classic" the button language is correct.
See Dojo and attached screenshots.
You guys do such a great job of allowing us to extend your product for our needs. And I know that you have recently added the Search Panel to allow us to perform a search against the dataSource. However, I would like to put that search box/button somewhere else completely on my page.
I've been able to get around this by using the code in kendo.grid.js to use my own click/keypress events to invoke the filter based on the new search options.
configureSearch takes two jQuery selector strings to hook into click/keypress events. I only want to search when the user hits ENTER instead of after each keypress. Then it executes the private search function.configureSearch(inputSelector: string, clickSelector: string) {
const searchFn = this.search;
if (this.grid.options.search == null) {
throw "search field(s) not set for grid.";
}
const inputElement = $(inputSelector).keypress(function (this: HTMLElement, e) {
const keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode === 13) {
searchFn($(this));
}
});
$(clickSelector).click(e => {
searchFn(inputElement);
});
}
private search(inputElement: JQuery<HTMLElement>) {
const options = this.grid.options;
const dsOptions = this.dataSource.options as kendo.ui.GridScrollable; // HACK: dataSource.options isn't really a GridScrollable, but it's similar
let searchFields: string[] | any = options.search ? options.search.fields : null;
let expression: kendo.data.DataSourceFilters = {
filters: [],
logic: "or"
};
const value = inputElement.val();
if (!searchFields) {
searchFields = getColumnsFields(options.columns);
}
// NOTE: Thankfully we don't use endless
if (dsOptions.endless) {
dsOptions.endless = null;
//(this as any)._endlessPageSize = this.dataSource.options.pageSize;
}
if (value) {
for (let i = 0; i < searchFields.length; i++) {
expression.filters.push({
field: searchFields[i],
operator: "contains",
value: value
});
}
} else {
expression = {};
}
this.dataSource.filter(expression);
// from Telerik:
function leafColumns(columns: kendo.ui.GridColumn[]): kendo.ui.GridColumn[] {
/* Hiding ... go see Telerik source code */
}
function getColumnsFields(columns: kendo.ui.GridColumn[]): string[] {
/* Hiding ... go see Telerik source code */
}
}
TimePicker filter does not show all time slots after clearing the filter since v. 2020.3.1021
Reproduction of the problem
Dojo: https://dojo.telerik.com/oseJEqay
1. Open the filter menu and select a time period to filter, Apply filter.
2. Open the filter menu again, open the drop-down you can see all items.
3. Click clear filter.
4. Open the filter menu again, click on the drop-down, you can see that the only item on that list for time picker is 12am.
### Expected/desired behavior
All time slots shall be present in the dropdown list
There's a discrepancy between the header and rest of the rows when the selected rows are coppied and pasted in Excel.
Bug report
When the columns.sortable.initialDirection configuration is set it is not respected
columns: [{
field: "id",
sortable: {
initialDirection: "desc"
}
}],
Reproduction of the problem
- Run this dojo
Current behavior
Note the userId column is not sorted in descending order
Expected/desired behavior
Column should be sorted in descending order
Workaround
Use the dataSource sort configuration option to set the sort order - example
Environment
- Kendo UI version: 2022.1.119
- Browser: [all]
Bug report
When custom Virtual DropDownList filter is set the value is not cleared from the DropDownList on Clear button click
Reproduction
https://dojo.telerik.com/ULIgEpis
1. Filter Ship Name column
2. Open the filter menu and hit Clear
3 Open Filter menu again
Expected/desired behavior
Value shall be cleared from the DropDownList
Environment
Kendo UI version: 2021.1.301
Browser: all
This started happens on 2022.1.119 and 2022.1.301, Works well on 2021.3.914
Some of ours grids stopped showing the filter icon in the columns.
After digging a bit found that the issue happens when I have a grid initialized with sortable = true and then initialize a new one with sortable = false
You can see this happening in this example:
https://dojo.telerik.com/ogUZEbUP
the issue seems to be caused by this:
this selector is catching all the k-cell-inner from the first grid
Bug report
Grid with group paging and server operations enabled throws a JavaScript error when expanding groups. Reported in ticket 1560566.
Reproduction of the problem
- Run this dojo
- Follow the steps in this screencast to reproduce the error
Current behavior
A JavaScript error is thrown:
Expected/desired behavior
No error should be thrown group paging should work as expected
Environment
- Kendo UI version: 2022.1.301
- Browser: [all]
I've noticed the .k-command-cell class is being added multiple times to the Grid's command cell.
This can be seen on the Grid's Custom Command demo page, where the class is added twice. On some of my Grid implementations, the class is added 100 times or more.
Dojo:
https://dojo.telerik.com/EweloVOD
Inspect one of the command cells and observe the "class" attribute.
Hi,
I've found a bug in the jQuery template code for Kendo Grids. Seems that it directly injects the name of a field from the data source results under the assumption that the field name is a valid JavaScript identifier (i.e. data.someIdenifier). But when the data source results contain a field name that is a number (as in my case), this results in invalid JavaScript (i.e. data.1234) and causes the Kendo Grid code to error. I notice that in some places in the template code, indexing is used instead of member access (data['someIdentifier'] instead of data.someIdentifier), but not everywhere. I'd recommend using indexing every where to fix this (i.e. data[1234]).
Hello again Kendo Support,
I believe I have found a bug with the kendo grid when using column virtualization. When turning on selectable rows, row selection is lost upon horizontal scroll. The bug can be easily reproduced using the following sample: https://dojo.telerik.com/osUKOZol
Is there any work around or plans to fix this bug in the future? Turning on virtual columns was a performance boost for our application and we'd hate to have to turn it off.
Bug report
Shift selection is not working correctly when multi-column headers are configured in a grid and selectable: "multiple cell" is configured
Reproduction of the problem
Current behavior
Shif selection not working correctly
Environment
Kendo UI version: 2022.2.510
jQuery version: any. Demo 1.12.4 and our code is 3.6.0
Browser: [all]
We are using the latest version (5.4.0) of the "Classic" SASS theme for Kendo UI and override several scss variables to adapt the grid's look&feel to our requirements. One thing we did was setting $grid-header-padding-x and $grid-header-padding-y to 2px each.
If the content of the grid header is long enough to be truncated, sorting indicators etc. are partially moved out of the cell.
Since I cannot modify scss variables in DOJOs, I have tried to apply CSS styles to simulate the behavior: https://dojo.telerik.com/EMOYUREh.
As you can see, the th element applies some padding that .k-cell-inner removes again. On the right side, however, the negative margin is bigger than the padding added by the th element which causes the content to move out of the cell.
Hi Team,
I'd like to request a built-in event before the Grid starts a Read action.
Thank you!
Bug report
columns.field.filterable.cell.inputWidth does not apply since R1 2022
Reproduction of the problem
Dojo: https://dojo.telerik.com/oVILIzaW
Current behavior
Width of autocomplete input is not affected
Expected/desired behavior
Width shall be reflected
Workaround
span[data-field="name"] > span {
display: inline
}
</style>
Environment
Kendo UI version: 2022.2.621
Browser: [all]