For example. Consider table with 2 columns. - Task (limited number of possible tasks type) - Description (free text descriptions) I would like to have table with multi-check on Task column and row filtering on Description column.
Bug report
Reproducible in mobile mode enabled
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 ]
Hi,
I updated my project to Kendo UI for jQuery 2020.3.1021 but then all Grids stopped working on mobile or tablet devices. When downgrading to 2020.3.930 grids works fine. Also tried it with 2020.3.1028 but same issue.
I have tested it on iPad, iPad Pro, Samsung S10. Same issue with Chrome/Edge Chromium and emulate a mobile/tablet device.
In the browser console you can see the javascript error: "Cannot read property 'rows' of null".
Reproduction of the problem:
- Go to https://demos.telerik.com/kendo-ui/grid/index
- Hit F12 top open the Developer toolbar
- Click on "Toogle device toolbar" (CTRL + SHIFT + M)
- Choose any device, ex: iPad, iPhone
- Reload page to make the changes take effect
- Click on "Run live demo"
- Grid not loading!!
- Console is showing a JavaScript error: "Cannot read property 'rows' of null"
Hi,
The Kendo UI Grid has the ability to conditionally hide/show the command columns. But in order to hide some buttons from the toolbar, you need a dataBound handler. It will be useful to hide the "Create" button from non-admins, but be able to show the PDF and Excel Export or hide the entire toolbar.
toolbar: [ { name: "create", visible:function(){ return isAdmin; } }, { name: "reports" , visible: function(){ return isManager }}, { name: "cancel" } ],Currently, we need to use this dataBound handler:
.Events(e=>e.DataBound("onDataBound")) function onDataBound(e) { if (true) { // the condition against which you want to show/hide the toolbar this.element.find(".k-grid-toolbar").hide(); // hides the entire toolbar this.element.find(".k-grid-add").hide(); // hides just the Create button }}Thank you in advance,
Ken
Bug report
Reproduction of the problem
- Open the following Demo with one of the SASS themes.
- Open the filter menu for the ProductName column
Current behavior
There is an additional border around the search input. The border appears when Sass is used.
Expected/desired behavior
The additional border should be removed.
Environment
- Kendo UI version: 2020.3.915
- Browser: [all]
### Feature Request
The TypeScript definitions of the Kendo UI Grid are missing the "editable" object - the object that is built runtime when the grid enters edit mode.
### Environment
* **Kendo UI version:** 2020.3.915
* **jQuery version:** 1.12.4
* **Browser:** [all]
Bug report
Reproduction of the problem
Dojo example.
- Make several columns wider and then shrink one of them (See the attached video).
Recording31.zip
Current behavior
Columns and headers are misaligned.
Expected/desired behavior
Columns and headers are properly aligned.
Environment
- Kendo UI version: 2020.2.617
- jQuery version: x.y
- Browser: [Chrome XX]
Create Grid with scrollable, resizable, navigable settings set to true in RTL (Chrome Version 85.0.4183.121 (Official Build) (64-bit))
- If scroll exists, resize in column will not work
- after scrolling the scroll to left, when try to edit inline cell in left side, scroll eventually go back to the scroll start position(in the right) and cell is closed for edit(have no option to edit grid with big amount of columns)
- after scrolling the scroll to left, mouse hover to column header removes all column headers, the headers appears after moving the scroll to the start position
Link to Dojo:
https://dojo.telerik.com/IZInOVUd/4
video:
https://drive.google.com/file/d/1pQa4UVLcMUg929JgTtKJ1udxIAbWtn0m/view
Regards,
Hello, the Excel Export doesn't export the columns headers sums (view in image).
Is it possible export to Excel columns headers sums?
I am working on a project with Angular 8.
I am using Kendo detailed template to represent the data.
It is very needed for my project to have this working with locked columns.
In your documentation I have read that this is not possible yet.
Would you please consider adding this feature?
If so, when do you plan adding it?
While it is currently possible to do this in JavaScript, it would be nice to have the functionality integrated into the Grid filter row.
For example,
columns.Bound(c => c.Title).Title("Title")
.HeaderHtmlAttributes(new { style = "text-align: center;" })
.Filterable(f => f.Cell(fc => fc
.ShowOperators(false)
.Operator("Contains")
.Template("fnFilterAsYouType")
.Placeholder("Title")
));
Bug report
When the dataSource is set with the setDataSource method
Reproduction of the problem
Dojo example.
- Run the dojo
- Click the button
- Focus the first Grid cell. Press and hold the Down Arrow key to navigate through the rows
Current behavior
The scroll position is not updated while scrolling and navigation stops at 10347.
Expected/desired behavior
Scroll position is properly updated and the user can navigate to the end of the page.
Environment
- Kendo UI version: 2020.3.915
- jQuery version: x.y
- Browser: [all ]
Bug report
Selecting cells from the frozen table in Frozen columns + selectable: "multiple cell" scenario selects the bellow cells from the non-frozen table
Reproduction of the problem
Open below Dojo
https://dojo.telerik.com/exobAcEl
Scroll the horizontal scrollbar to the right.
Select some cells from the frozen table.
Move the scroller back to its original position.
Expected/desired behavior
Cells from the non-frozen table shall not be selected.
EnvironmentKendo UI version: [all]
Browser: all
Take this Dojo: https://dojo.telerik.com/iCECeXeC
1. Press 'Run'
2. Remove the filter for Contact Title
3. Press 'Save State'
4. Reload page (F5)
5. Press 'Run'
6. Press 'Load State'
Result: The filter for Contact Title is not removed.
On the other hand if I do the following:
1. Press 'Run'
2. Change the filter for Contact Title to 'Sales Representative'
3. Press 'Save State'
4. Reload page (F5)
5. Press 'Run'
6. Press 'Load State'
Result: The filter for Contact Title is changed correctly to 'Sales Representative'
Why is the first example not working? Is this intended behaviour or a bug? Is there a workaround?
Kind regards.
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.
When there are a lot of columns on the page and a column is shown, it is shown at its original position in the grid columns array.
It would be much better from a user experience point of view if the column is shown where the user clicked on the column menu to show the hidden column.
Bug report
In Grid Multi filtering checkboxes and their labels are misaligned.
Reproduction of the problem
In the official demo: https://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes
Expected/desired behavior
Checkboxes and labels shall be aligned.
Workaround:
The following CSS can be applied:
<style>
.k-label span {
vertical-align: top;
}
</style>Dojo: https://dojo.telerik.com/OgiYEBiB
Environment
Kendo UI version: [all]
Browser: [all ]
Bug report
Regression introduced in 2019.2.619.
Related commit: telerik/kendo@2a806f6#diff-f810c335b76ea2e4d78327457f230a46L3882-R3882
Reproduction of the problem
Dojo example.
- Add a new record.
- Click "Update" in the editor.
Current behavior
The following validation message is displayed: ! name
Expected/desired behavior
The validation message should be: ! name is required
Environment
- Kendo UI version: 2019.3.1023
- jQuery version: x.y
- Browser: [all]
grid column virtualization issue with hidden column.
When you scroll further in your grid having one or multiple hidden column(s) the value of the hidden column appears in a side column.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/column-virtualization">
<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.114/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(function() {
var columns = [];
var data = [];
var numberOfColumns = 500;
var numberOfRows = 100;
var field;
var row;
var i;
var j;
for (i = 1; i <= numberOfColumns; i++) {
field = ("Field" + i);
if(i==2)
columns.push({ field: field, title: field, width: 200, hidden: true });
else
columns.push({ field: field, title: field, width: 200 });
}
for (i = 1; i <= numberOfRows; i++) {
row = {};
for (j = 1; j <= numberOfColumns; j++) {
field = ("Field" + j);
row[field] = "R" + i + ":C" + j;
}
data.push(row);
}
var dataSource = new kendo.data.DataSource({
pageSize: 10,
transport: {
read: function(e) {
e.success(data);
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
scrollable: {
virtual: "columns"
},
width: 1000,
navigatable: true,
filterable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSize: 10,
pageSizes: true,
buttonCount: 5
},
columns: columns
});
});
</script>
</div>
</body>
</html>