Previously igrid 5.0.0 introduced sortable column headers and their contents being wrapped in spans with inner cell and link classes
<span class="k-cell-inner">
<span class="k-link>......
now after upgrading to 11.2.0 it looks like ALL column headers get this additional element nesting even if they aren't sortable which is greatly affecting how column headers display since .k-link has a display: flex value. As well as many other styles.
Before
After
There are also "link" like styles applied to any and every column even if it doesn't sort giving the false impression that a column header is clickable.
This can be seen from kendo's own stackblitz for the grid https://stackblitz.com/edit/angular-lyxxa7?file=src%2Fapp%2Fapp.component.ts where if you inspect the header elements you'll see they've been wrapped in the sortable span elements. If this is intentional to wrap all column headers in we'll just have to work around it but we're curious if applying the sortable styling to ALL column headers was done on purpose or a bug.
In the jQuery version of the Angular Grid, it was possible to add row templates to a grid which was useful because you could set attributes directly to the tr. In my case, I have a scenario where I want to add a title attribute for tooltips for the whole row, not just individual cells. I can provide a function for rowClasses, which is great, but it would be nice if there was a similar function I could use to add other attributes as well directly to the tr. At the moment my work around is to add the title to every column individually, but that's not ideal as it affects the positioning of the tooltip etc
https://stackblitz.com/edit/angular-4bbepg?file=src%2Fapp%2Fapp.component.ts
The sort indicator (down arrow) remains after removing the sort (setting the [sort] input to undefined)
Thanks,
-Adam
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.
Best regards,
Matthias
Now I can configure possible filter operators and default operator on column basis. Doing so I have much copy-pasted code for each grid column.
I want to have a grid level option to configure this on "type" basis with a reusable js object (e.g. public constant shared across components):
<kendo-grid [filterOptions]="GridFilterOptions" ...
Where GridFilterOptions:
public const GridFilterOptions: ... = [
{ type: "string", default: "contains", operators: ["contains", "doesnotcontain"]},
{ type: "number", default: "eq", operators: ["eq", "neq"]}
];
Current behavior
The grid component already has the functionality to resize and reorder columns by the user, but is missing functionality for saving an restoring columns configuration, so that changes done by the user are lost after a page change.
There is the Persist the State article in the "How to section" in the documentation, but the described solution is only applicable when adding grid columns by using *ngFor. When defining columns in the markup, due to extensive usage of templates (kendoGridColumnMenuTemplate, kendoGridFilterMenuTemplate, kendoGridCellTemplate, ..), there is no reasonable solution available.
Expected behavior
Provide methods, similar to the jQuery grid, to save and restore columns configuration. This should at least include the column's order, width and sort.
PS: This is not a duplicate of the feature request Add persistent state for grid (and other components). The latter one has been marked as "Completed" but does not include the needed functionality.
Add icons for grid filter operators to easily understand current operator (DevExpress example):
I have being trying to implement the multiple row selection function but am unable to get multiple rows selected at once, even though I have multiple selected mode enabled,Is it possible to archieve this in Kendo ui grid in Angular?
Please see my function bellow. event=1 row always even though I select more one row.
if (event.length>0) {
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.
Add "between" grid filter row operator similar to DevExpress for angular one.
Example here:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/Angular/Light/
Essentially the most basic GridComponent when ngIf'd in and out will not be collected -- apparently because of orientation change / resize change listeners not being appropriately removed.
Steps to Reproduce
Click the TOGGLE TABLE button to hide the table
Click the TOGGLE TABLE button to show the table
repeat several times
Take a memory snapshot
There will be HTMLTableRowElement items that grow each iteration of toggling the table.
The HTMLTableRowElements retention shows that they eventually lead to a resize listener, or an orientation change listener.
We would like to have the possibilty to create custom implementation of grid columns (or any other control/component). Because we also have this in our WPF projects and it was very useful to minimize the redundant code and also the "initialization code". This can't be done in a simple template, for example we need to inject services and get data etc.. Example: In our WPF project have lots of different grids with values related to units. The cell can convert this unit to and other unit itself, it can localize the texts, it shows the information in some kind of "progress bar", has a tooltip, etc... And all we have to do in the code is to set a column like this <custom-column valueField="test" unitField="test2" />. It would be great to have this feature in the Angular 2 grid as well.
Support for showing and hiding rows in angular grid
Currently the filterCellTemplate is ignored for commnand column. It would be a handy feature if one could specify also content of filter cell for command column so in case filtering is enabled we could for example provide some suctom additional functionaly/content in that column (for example i wanted to add there a button that would reset all filters)
The group panel on the grid should be configurable to be hidden
Implement "Shift + Arrow Keys adds the row which holds the focused cell to the selection (only for selection mode "multiple")", explained here (https://demos.telerik.com/kendo-ui/grid/keyboard-navigation)