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]).
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>
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.
It is possible to add new inline rows to grid even though they are not valid.
Steps to replicate in attached dojo:
https://dojo.telerik.com/oJEMAPoJ
1. Apply any search in search panel
2. Click Add New Record (one or mutiple times)
3. Click SaveChanges
4. Delete search phrase
The result is that new rows have been added with empy ProductName column, which supposed to be required.
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]
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
Selecting a row on a parent grid with selectable enabled unticks checkboxes from the selectable column in child grids
Reproduction of the problem
Dojo: https://dojo.telerik.com/ilOCAJeg
1. Select rows in a child Grid
2. Select a row in the parent Grid
Expected/desired behavior
The checkbox ticks shall be persisted when the user selects a row in the parent grid
Environment
**Kendo UI version: [all]
**jQuery version: [all]
**Browser: [all]
Bug report
Reproduction of the problem
https://dojo.telerik.com/umOWEMEx
1. Drag and drop Company Name to the group area, to make the grid group by Company Name
2. Reorder Contact Info next to Company Name by drag and drop the column header (from unlocked to locked)
3. Reorder Contact Info back to original place (from locked to unlocked)
Current behavior
The header of Contact title is showing at the left side of Company Name
Expected/desired behavior
The header of Contact title is showing under Contact Info
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
### Bug report
When reordering expanded rows, the "rowReorder" event does not return a correct "oldIndex".
### Reproduction of the problem
1. Create a hierarchical grid and enable the reorderable.rows property;
2. Expand all rows;
3. Handle the "rowReorder" event and log the event data in the browser console;
4. Move the second row above the first row. The property "oldIndex" returns a wrong value. It should be "1".
A Dojo sample for reproduction: https://dojo.telerik.com/AJIGuBEh
### Expected/desired behavior
The "rowReorder" event of the grid should return the correct indexes of the moved row.
### Environment
* **Kendo UI version: 2022.1.301
* **jQuery version: 1.12.4
* **Browser: [all]
$.ajax({
url: "/ProductRowInfoSite/SaveParameters",
data: {
data: dataString
},
dataType: "json",
// "jsonp" is required for cross-domain requests; use "json" for same-domain requests
success: function (result) {
// notify the data source that the request succeeded
//options.success(result);
self._store.dispatch({ type: ActionProductInfoWindow.Saving });
$("#productGridId").data("kendoGrid").saveChanges();
// $(self._parent + " " + "#productWindowGridId").data("kendoGrid").saveChanges();
if ($ (self._parent === "#productGridId")) {
$("#productGridId").data("kendoGrid").dataSource.read();
}
self._parent.refreshParentGrids();
//var dataSource = $("#productGridId").data("kendoGrid").dataSource;
//var filters = dataSource.filter();
//var allData = dataSource.data();
//var query = new kendo.data.Query(allData);
//var data = query.filter(filters).data;
//$("#productGridId").data("kendoGrid").dataSource = data;
//let productGrid = $("#productGridId").data("kendoGrid");
//productGrid.dataSource.read();
},
error: function (result) {
displayAjaxError(result);
},
type: 'POST'
});
Hi Team,
I would like to request adding RowVersion support to the Kendo UI Grid. Currently, I am using a workaround of setting it during the save event, but you guys really need to fix that.
Thanks!
The current version of Kendo UI no longer allows you to align column headings as described in the demo https://demos.telerik.com/kendo-ui/grid/cell-alignment
It occurs because a nested tag (k-link) is set as display: flex;
You can see an example of it on your own demo site (link above) - Ship City header should be centered but isn't.
{
field: "ShipCity",
title: "Ship City",
headerAttributes: { style: "text-align: center" },
attributes: { style: "text-align: right" }
}
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
Currently if the grid has its selection mode set to a "single" row, the user ca select one row on each page. The "single" row selection should be global, not page specific.
Ticket ID
Reported in ticket 1550865
Reproduction of the problem
Run the following example:
https://dojo.telerik.com/@gdenchev/aToMonEy
Select a row on the first page. Go to the second page and select another row. Go back to the first page. The row is still selected, even though we selected a different row on page 2.
Current behavior
Currently the user can select one row on each page.
Expected/desired behavior
If a row is selected, all other rows across all pages, should be deselected.
Environment
- Kendo UI version: 2022.1.119
- Browser: [all]
Workaround
A workaround is provided in the following Dojo example:
https://dojo.telerik.com/@PMcDonou/oWOyIpAg
https://dojo.telerik.com/ENaSiHOn
Default behavior without filter customization:
Hi Team,
I'd like to request the functionality to change the format of a Kendo UI Grid column without needing to call the setOptions method. This would be nice to avoid additional Read calls.
Thank you!
Hello,
A couple feature requests...
Clear the built in search box value.
clearSearch - clears the search box
e.g.,
var grid = $("#grid").data("kendoGrid");
grid.clearSearch();
Customize validation text via schema model fields validation.
e.g.,
var grid = $("#grid").data("kendoGrid");const dataSource = new (<any>self).kendo.data.DataSource({
data: models,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
modelName: { validation: { required: true, messages: {required: "Model name is a required field"} } },...
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/
