When the grid is grouped, the grouping column is visible with the same values in each cell of each group. Looks weird and confusing. How can we accomplish more efficient look and hide the grouping column? http://demos.devexpress.com/aspxgridviewdemos/GroupingSorting/Grouping.aspx Reference article: http://www.kendoui.com/forums/ui/grid/how-to-hide-the-column-the-grid-is-grouped-by-additional-grouping-questions.aspx
I want to disable/hide the columnMenu the same way like disabling sorting or filtering... it is not supported the same way as disabling sorting or filtering but only with some Javascript which is not a good solution and not consistent
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" }
}
Test Environment:
OS: Windows_11Browser: Version 103.0.1264.71 (Official Build) (64-bit)
AT (include version number): Narrator
Repro Steps:
1. Open given URL in Edge Dev.
2. Enable Narrator using 'Ctrl+ Win + Enter' key.
3. Navigate to the filters present on table and activate it.
4. Navigate on the available fields of filter flyout and observe Narrator is announcing label information on fields or not.
Actual Results:
In filter flyout labels are not associated with their respective fields.
Expected Results:
All labels should be associated with their respective labels in filter flyout.
Narrator should also announce the same.
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>
Hi Team,
I would like to request a way to revert the column size for the Kendo UI Grid using the API without refreshing the page.
Thank you!
Hi everyone,
i have a kendo Grid with columns virtualization enabled. It works perfectly but comes a weird behaviour when I add aggregate columns.
The problem consists in the constant relocation of aggregates cells values when scrolling horizontally the grid, i.e aggregate cell keeps changing column : the more you scroll, the more it jumps from a column to another.
I provided this jsFiddle sample to help you reproducing the problem.
Keep scrolling horizontally and keep an eye on "Field6" and "Field8" columns where aggregates have been configured and you will see that the corresponding aggregates values will constantly go on wrong columns.
When exporting all the lines in the grid with saveAsExcel the excel is formatted in the event handler when the ExcelExport event is fired.
I would like to have the exact same effect when calling the exportSelectedToExcel method.
Hi Team,
I'd like to request an event to allow for the user to dynamically create a new filter based on the field and type instead of using just columns.filterable.ui.
Thank you!
Hi Team,
I would like to request a way to change the sort order with the built in API for the mixed sortable Kendo UI Grid.
Thank you!
Hi Team,
I would like to request the detail arrow column to be configurable for placement to the right of the Grid without applying RTL support.
Thank you!
I realize this has been covered by this workaround in the past, but the need to write extra code for moving the column back to the original position makes this seem a bit "hacky" and most importantly, the user experience of being allowed to drag the column in the first place just to see it jump back seems wrong.
The good news is that the kendoGrid already has a mechanism for preventing the columnReorder event from getting fired in the first place! The bad news is that it only happens for columns that have either of these 2 classes ["k-group-cell, "k-hierarchy-cell"]
My request is to have a configuration option that enforces that same behavior for specific columns as:
1. Add a "reorderable" flag to be set as part of the column configuration (set it to false for those we want to keep in place)
2. This flag will set a class on those columns the same way it works for columns with "k-group-cell" or "k-hierarchy-cell" classes, so the event can be prevented.
There is one important caveat to consider with this approach: Only columns at the front and the back of the grid can be locked in place, so there needs to be validation to prevent having non-reorderable columns among reorderable ones.
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 Team,
I would like to request an attribute property similar to this one which will allow for easier modifications for the group header columns.
Thank you!
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 Team,
I'd like to request a built-in event before the Grid starts a Read action.
Thank you!
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.
I want to have checkboxes in group header as shown in the below example.
https://dojo.telerik.com/eKUzITAH/41
Once I click on the group header checkbox, the child group headers under the clicked group header and the data rows inside it should get checked and when it is unchecked all the datarows under the group header should get unchecked.
Individually if I check and uncheck a checkbox in the datarow,the parent group header should get checked if all the datarows are checked and should get unchecked if any of the data is unchecked under that group header.
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]
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