Bug report
When the Kendo UI Grid is paged and the Search panel input is focused, the page is automatically switched to the first one.
Reproduction of the problem
1. Navigate to the live demo:
https://demos.telerik.com/kendo-ui/grid/search-panel
2. Change page to 2 (for instance).
3. Focus the Search panel input.
4. The page is changed to the first one.
Expected/desired behavior
When the search panel is empty and only focused, the page should remain the same.
Environment
* **Kendo UI version:** 2019.3.1023
* **jQuery version:** 1.12.4
* **Browser:** [ IE 11.768.17763.0]
Bug report
When applying GroupPaging with local data using a Kendo UI Grid with AngularJS, the error message Uncaught TypeError: Cannot read property 'hasSubgroups' of undefined' appears upon expanding a parent row.
Reproduction of the problem
- Go to this Progress Kendo UI Dojo.
- Attempt to expand the row.
Current behavior
Currently, the UID for the group is not matching the group row's UID, and the error message appears.
Environment
- Kendo UI version: 2021.1.224
### Reproduction of the problem
1. Run the Checkbox selection demo in IE 11.706.17134 - https://demos.telerik.com/kendo-ui/grid/checkbox-selection
2. Try clicking a checkbox
### Current behavior
Two clicks are required to change the state of the checkbox.
### Expected/desired behavior
Checkbox should be checked/unchecked with a single click
### Environment
* **Kendo UI version:** 2019.2.514
* **Browser:** [ IE 11.706.17134 ]
We are using kendo Datagrid where we wanted to apply pagination.
We are using pageSizes property of pageable object to set the no of items per page to render. We are also using buttonCount property to control the number of buttons.
Problem : For example I have 200 records , if I set pagesSizes=1 so technically I will have 200 paging button and if i set buttonCount to 60 than UI gets distorted. Find below is stackblitz URL where I have set pagesSizes=1 and if you set Maximum number of buttons = 70 UI will break.
URL : https://cuezkg--run.stackblitz.io/
Hi team,
Found an issue with column filterable property on IE 11 and last kendo UI for jQuery release.
Please have a look at this dojo with IE11: https://dojo.telerik.com/UfIZePaZ
Using property "filterable: { multi: true}" on first column leads to the grid not being built with console error.
Regression bug as it works with previous kendo release.
Regards,
Laurent.
Hi,
In my kendo grid , when i apply a filter to 2 columns, first i apply filter to numeric column which results in no value and then after that i applies the filter to a string column combined with numeric column which also results to no value, Nothing is displayed. But when i remove the value from textbox of numeric column and enter filter, no data being displayed as string column filter is there but in case i remove the value from textbox of string column and enter filter , numeric column filter also got removed.
I also checked the kendo functionality , but not getting any solution for this problem.
Hi
I am binding columns dynamcially in jquery without template column header spacing working file becuase i have added "[ ]" this symbol.
but when try to add anchor tag link with onclick method then i am getting issue.
i have attached file java script error please provide some solutions.
- Create a grid with two editable columns.
- Define validation rules for both columns. Keep one column as required.
- Edit the row. Set the required column value using model.set method.'
It fails because before setting the value it performs validation. If validation was successful then it will set the value on model.
Since the desired field has no value and validation rule will fail on that.
It should accept the value and then perform validation. If validation fails with new value then it might discard the changes.
$("#grid").kendoGrid({
dataSource: {
batch: true,
transport: {
read: function(e){
e.success([1,2,3,4,5,6,7,8,9].map(function(i){return {id: i, title: "test" + i}}));
}
},
schema: {
model: {
id: "id",
fields: {
id: {defaultValue: "-1"},
title: {
validation: {
required: true
}
}
}
}
}
},
columns: [
{field: "title", title: "Title", filterable: {field: "title.a"}},
{command: ["edit", {name: "destroy"}]}
],
editable: {mode: "inline"},
filterable: true,
toolbar: [{name: "create"}]
});
var grid = $("#grid").getKendoGrid();
var model = grid.dataItems()[0];
grid.editRow(model);
model.set('title', '');
model.set('title', 'test 1111'); // it will fail
- Create e.g. local data grid (id, name)
- add 2 records => { id: 1, name: "null", id: 2, name: "Jack" }
- Name column for id = 1 is empty
I have tested this on your example for local data grid. It can be applicable also for remote grid, treelist, etc.
Starting from a Grid's "endless scrolling demo" on: https://demos.telerik.com/kendo-ui/grid/endless-scrolling-remote
Edit grid configuration to set smaller page size. All items of the first page need to be visible on the screen plus some free space. A grid height needs to be set. See this DOJO: https://dojo.telerik.com/amiNohIx
The vertical scroll bar is disabled and there is no way to get/see next pages of data.
Interesting is that use of the horizontal scrollbar (if one is available) starts some background operation (looks as data page load) and then the vertical scrollbar is OK.
Since the 2019 R1 release k-pager-sm (k-pager-lg, k-pager-md) classes are assigned dynamically based on the width of the page to make the component responsive (as I understood from https://www.telerik.com/forums/kendo-ui-grid-pager-not-displaying-properly-in-sass-mode#wn92di5BakmHqrrMfViFxA)
When grids are used on bootstrap tabs (both boostrap 3 and 4) the k-pager-sm class is added incorrectly, causing the pagers on tabs other than the first to be displayed only partially.
A JSFiddle to demonstrate this: https://jsfiddle.net/nqjc4mbu/
The pager on the 1st tab:
And on the 2nd and 3rd tab:
(we've solved it with a workaround by dynamically removing the k-pager-sm class again on dataBound, but this shouldn't be necessary)
$scope.OptionsGridApplication_Team_Settings = {
dataSource: $scope.DataGridApplication_Team_Settings,
resizable: false, selectable: "single",
columns: [
{
field: "TeamName",
title: "TeamName",
encoded: false,
hidden: true,
attributes: { "class": "ellipsisTextSpan", },
template: function (e) { return createCoulumnTitle(fakingAngularCharacter(e.TeamName)) },
groupHeaderTemplate: function (e) {
var html = '';
html = html + '<span class="headerTeamGroup" data_TeamId="' + e.value + '" title="' + e.value + '">';
html = html + stringCutterA(e.value, 131);
html = html + '</span>';
return html;
},
},
{
field: "SystemIdentifier", title: "Environment Name", encoded: false,
attributes: { "class": "ellipsisTextSpan", }, template: function (e) { return createCoulumnTitle(fakingAngularCharacter(e.SystemIdentifier)) }
},
{
field: "EnvironmentType", title: "Environment Type", encoded: false,
attributes: { "class": "ellipsisTextSpan", }, template: function (e) { return createCoulumnTitle(fakingAngularCharacter(e.EnvironmentType)) }
},
{
field: "URL", title: "Environment URL", encoded: false,
attributes: { "class": "ellipsisTextSpan", }, template: function (e) { return createCoulumnTitle(fakingAngularCharacter(e.URL)) }
}
],
dataBound: function () {
debugger;
serviceFactory.AccessibilityGridEmpty(this);
}
};
Bug report
In a Grid with checkboxes in the first column, if you navigate through the Grid for a second time, only the checkboxes are focused.
Reproduction of the problem
- Open this Dojo example - https://dojo.telerik.com/@martin.tabakov@progress.com/EZERotAN/5.
- Navigate through the whole Grid with tab.
- Navigate a second time through the Grid.
Current behavior
When navigating through the Grid for a second time, only the checkboxes are focused.
Expected/desired behavior
All the cells of the Grid should be focused.
Environment
- Kendo UI version: 2020.3.1118
- 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
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
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.
we discovered that if you have navagatable set to true and you perform a deletion using the inline delete button, the grid scrolls back to the top. setting navagatable to false prevents the scrolling from occuring.
this was using KendoGrid with JQuery.
Hi Telerik,
I created a demo code for error of Kendo Grid for jQuery with Bootstrap 5 error when settings 'pageable', please check and fix this
Link online: https://dojo.telerik.com/@vndevil/ICAPeBeg
Source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.802/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/2022.2.802/js/kendo.all.min.js"></script>
<!-- BEGIN Bootstrap 5.0.2 -->
<!-- PHẢI để ở trên này, trước đống css tự viết ở dưới ^_^ -->
<!-- CHƯA DÙNG ĐƯỢC BOOTSTRAP 5 do nó bỏ hàm Tooltip, đang chờ phiên bản udpate mới -->
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="preload stylesheet" as="style"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<!-- END Bootstrap 5.0.2 -->
</head>
<body>
<div class="mb-3">
<h1>Grid normal<h1>
<div id="grid"></div>
<div id="grid2"></div>
</div>
<div class="mb-3">
<h1>Grid error config 'pageable' error bootstrap tabs<h1>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
type="button" role="tab" aria-controls="home" aria-selected="true">Grid 3 pageable config
error</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
type="button" role="tab" aria-controls="profile" aria-selected="false">Grid 4 pageable
config error</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact"
type="button" role="tab" aria-controls="contact" aria-selected="false">Grid 5 pageable
config error</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div id="grid3"></div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div id="grid4"></div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div id="grid5"></div>
</div>
</div>
</div>
<script>
var gridConfig = {
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
pageable: {
pageSize: 5,
buttonCount: 3,
messages: {
display: '{0} - {1} of {2:#,##} items'
}
}
};
$("#grid").kendoGrid(gridConfig);
$("#grid2").kendoGrid(gridConfig);
$("#grid3").kendoGrid(gridConfig);
$("#grid4").kendoGrid(gridConfig);
$("#grid5").kendoGrid(gridConfig);
</script>
</body>
</html>