Setting grid.columns[i].hidden may work to some extend, but isn't emitting columnVisibilityChange and further activities on a column set visible are not working but resulting in error, e.g. calling reorderColumn() results in:
TypeError: Cannot set property 'orderIndex' of undefined
at GridComponent.push../node_modules/@progress/kendo-angular-grid/dist/fesm5/index.js.GridComponent.updateColumnIndices (https://localhost:4201/vendor.js:196833:43)
The grid internal method updateColumnIndices() throws an error, because it doesn't get the newly visible column from expandColumnsWithSpan() and expandedColumns.indexOf(source) is -1.
Thus it's required to add methods like showColumn/hideColumn or setColumnVisibilty.
I believe it would be a great addition and simplification, if there were getOptions/setOptions methods at GridComponent to imperatively access/restore grid state (visibility, column order, sort order, filter, ...). These are also available at Kendo UI for jQuery.
I know, all the settings may be set using *ngFor and *ngIf directives, but that approach requires a lot of attribute remapping (from component instance to template) which doesn't feel right, especially when using column templates and and a lot of grid features.
Our application uses grouped grids but doesn’t use the built-in collapse feature. We instead hide the collapse arrow to disable the option. This leaves an empty space to the left of the parent grid label (where the collapse arrow would normally sit) and an empty column on the left side of all child grids. We’re looking for a more “official” and supported way of achieving the effect that removing ‘[group]=“groups”’ currently achieves. We’d like to minimize the amount of nonstandard code we’re introducing to our Kendo implementation as well as minimize unintended consequences of altering the grid code.
Hey Kendo Team,
you already have a solution in jQuery for my problem (https://docs.telerik.com/kendo-ui/knowledge-base/grid-group-remove-footer-header-one-record).
Unfortunately this solution did not work in Angular.
Desirable solution would be a flag in GroupHeaderTemplate which removes header if group size is one.
Another solution could be; allow a class field in GroupHeaderTemplate, so that we can set display to none if group size is one.
Basically whats described in this issue right here: https://github.com/telerik/kendo-angular/issues/2093
It would be nice if column group visibility could be toggleable via the column chooser.
If not, a more elegant workaround would be to indicate in the column chooser that certain columns are part of column groups. The way it is now is too clunky and unclear.
For example, I have the following column groups:
But the above columns show up in the column chooser like so:
It would be nice if the column group name was at least prepended to child columns in the column chooser to at least indicate that it's part of a group. For example, it would show as follows instead:
[x] Latest read - Time
[x] Latest read - Value
[x] Latest write - Time
[x] Latest write - Value
Thanks so much.
Please add a template about custom hierarchy cell template.
We have to add few icons in it and also before it and we would like to use angular native way.
As discussed with Martin in support ticket 1429284, some of the column values in my grid might be the same, but with different letter cases. For example, column "First Name" could have the values "Elias", "elias", and "ELIAS".
When grouping, Kendo grid grouping treats those values as 3 separate groups because its case sensitive. Our users expect those values to be grouped as 1 to avoid confusion.
The workaround provided might affect other dependent features and make the code a bit messy.
I would appreciate it if you could add in a future version, a built in option to ignore case when grouping without changing the original displayed values.
We started using Kendo Grid extensively. We came across below requirement and confirmed with your support team that the feature is currently not available. We think this would really allow users customise their display.
We would be using a common wrapper class across the org.
We will be displaying list of records from the DB, at times, there are columns which contains a JSON, we need to use a custom template to display the JSON. I understand I can go with an if condition in the template html of grid, but, that would lead me to end up having N number of conditions since we do not have a limited such use cases, each such instance would need to be rendered with different template.
The same is the case with row editing as well, for instance, for columns which accepts a description, we want to show a custom popover which would allow the user to specify the data in the way the customer wants (rich text with lot of customisation)
At a high level if we nail down into steps of the behaviour
1) Columns definition will come as a JSON which would also contain a template reference for any of the columns.
To elaborate more, If firstName and lastName are the columns at the DB level but for grid view I want to show them as a single column.
2) The JSON we are constructing will have a type attribute which would indicate me on whether to use a user defined template or regular one.
3) Corresponding data will be a JSON with possible keys required for the template.
When using KendoUI for Angular 2+, the filter value is still enabled and accepts input when "Is null" or "Is empty" is selected.
Since those selections do not require a parameter, I'd prefer the filter value to be default disabled.
I would like to request a way to have the selected/unselected column menu sorted separately from the table's columns.
Here is our table which demonstrates the current behavior.
When first rendered on the page:
After re-arranging the columns:
However, it'd be nice to have the column menu sorted separately from the table's columns. Thank you.
In Version 74.0.3729.108 (official Build) (64-Bit) of chrome, a defined grid with no predefined style property does not scroll properly.
There is a live-demo on Stackblitz at https://stackblitz.com/edit/angular-b38r7s-jzsgty
This is a fork of the demo example from the kendo-angular-ui documentation available at
In the example, the scrollable grid was defined with a height property. This does not feet to our requirements, as we need a grid component that should flex according to the outside or parent container.
This problem occured after the update of chrome browser from 73.0.XXX to the version 74.0.3729.108
The problem is fixed when we defined a grid with a height property like [style.height.%] = “100” but according to the documentation the grid should flex automatically without this property.
1. Try to use the grids column menu for filtering
2. Click the column icon => popdown menu opens
3. Click the filter oder column icon inside the menu => nothing happens
I can't even open up your docs using IE11, it just loads forever:
I have experience creating column groups at the top of a kendo grid, but I would now like to do something similar with row groups. I have attached a screenshot of an example of what I would like to accomplish. Is this possible with Kendo Grid?
We recently had an ask to limit the number of columns that could be selected, and were not able to find an out of the box solution (nor was support).
Something like this would be great, which is the same implementation as the kendoGridFilterMenuTemplate which allows you to override just the content of the column chooser, and not have to manually create your own menu entry by overriding the whole kendoGridColumnMenuTemplate
<ng-template kendoGridColumnChooserMenuTemplate let-service="service"> <our-custom-chooser-component></our-custom-chooser-component> </ng-template>
or, alternatively, if we were able to specify a grid parameter for a max number of columns as a grid level [maxColumns], that would work as well.
When in Kendo-Grid for Angular there more columns then that fits in the page, we get a horizontal scroll.
If i apply reordering of columns and try to move one to any direction.
1. If the columns need to be moved on same visible section, it does moves perfectly.
2. but if i want to move something beyond the visible section, i can't as the scrolling does not work automatically, either i need to use Keyboard to move scroll bar which in case users needs to be trained or is not user friendly or i need to it in parts.
Please help us to include feature to auto scroll when we move columns