Currently the grid uses indexes to memorize which data row is expanded. When a new row is inserted (due to a new data item inserted in the underlying collection) before a currently expanded details row, then then expanded details view will shift to the row before (old index). This is not desirable in a scenario with a lot of adding/removing of items. 
It would be great if memorizing expanded details row could be bound to the data object.

Proposal

CellCloseEvent<T> should provide dataItem: T

Why

Currently the CellCloseEvent dataItem is typed as any. This could be the default, but adding a generic type here would allow strong typing in the event handler.

When using virtual scrolling and the data changes, then it might be desireable to programmatically scroll to top or to scroll to a row containing the data of interest.

Currently when I click the horizontal scrollbar button which is present at the left side or right side of the scroll bar then the columns are scrolled as a regular table.

It will be nice to move from one column to another column instead.

A built-in option for enabling a second scrollbar on the top of the Grid like the following screenshot would be nice feature to have:

Is it possible to modify the default filter for a date on a grid so that it is a "between" filter? i.e. the second clause will show "Is before or equal to" instead of "Is after or equal to"?

https://stackblitz.com/edit/angular-ygnmj1

Preferred default:

instead of:

Can you add a method to go to a specific page in the Grid?

It is easy in Kendo UI for jQuery, https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/page

 dataSource.page(2);

The equivalent way of doing it in Kendo UI for Angular is to bind skip to a Grid, and calculate the skip by ourselves, but it doesn't feel as natural as doing datasource.page(2)

As of right now it is a lot of work to properly implement a foreign key column and some of the features are only working with multiple workarounds. It would be nice to have a foreign key grid column as it already exists for ASP.NET. The ultimate goal would be to set the foreign key field which the column is bound to, pass a list of complex objects and set the text field and value field for that list. 

An example of an hypothetical implementation:

<kendo-grid-column field="ProductId" [data]="ProductList" [valueField]="'Id'" [textField]="'Name'"></kendo-grid-column>

Currently all of this has to be done manually by defining a cell template and edit template which comes with a couple of limitations. The greatest limitation is that the out of the box sorting and filtering does not work since the grid will sort/filter by the Id instead of the cell template value. For the filtering additionally a custom made filter needs to be implemented for each column which displays the DropDown in the filter menu.

For ASP.NET all of these things come out of the box and are extremely helpful. Here is a link to the ASP.NET implementation for a foreign key column: https://demos.telerik.com/aspnet-core/grid/foreignkeycolumn

I wish something like that will be implemented in Angular as well in the near future as it makes the development extremely hard without this feature.
I saw the sorting/filtering together with the foreign key column as one of the main reasons to choose Telerik as it is extremely helpful and setting it apart from its competitors. 

Hello Team,

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

Thanks

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

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#

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. 

I want to display my data in multiple type of views (grid, listview ...etc). So I need to place PagerComponent outside of GridComponent

It would be nice to have support for horizontal virtual scrolling for the Grid in cases of large number of columns. Just like the current feature for vertical scrolling, in which you can update the visible rows through a pageChange() event handler.

As described here:

https://github.com/telerik/kendo-angular/issues/2809#event-3148229980

We are asking to add a simple css class to every master row opened. We have just to change stile every time row has detail open.

Thanks

When using the Grid control inside an Angular component which is shown in a dialog (via MatDialog), the component is not properly destroyed after closing the dialog. The same problem doesn't occur when the component instead contains, say, a TreeView.

The problem occurs in Angular 8 and 9, in the Chrome browser. I've created an Angular 8 demo here: https://stackblitz.com/edit/angular-thr9j1 and an Angular 9 demo here: https://stackblitz.com/edit/angular-ksfrqy

Run the demo, press the "Open dialog" button a number of times, then take a heap snapshot in the Chrome dev console (be sure to first select the proper Javascript VM instance, containing "angular-thr9j1" or "angular-ksfrqy"). The component shown in the dialog is called "MemoryLeakDialogComponent", so use that as a filter. You'll see that for every time you opened the dialog there's now an instance of the component on the heap.

The MemoryLeakDialogComponent contains just an empty kendo-grid tag with no attributes. If you edit its dialog template to instead contain a kendo-treeview component, everything is properly destroyed and garbage collected, which leads me to suspect a memory leak in the Grid component.

Issue: unable to filter data by itself written filter handlers.

Current implementation:

/**
 * A complex filter expression. For more information, refer to the [`filterBy`]({% slug api_kendo-data-query_filterby %}) method.
 */
export interface CompositeFilterDescriptor {
    /**
     * The logical operation to use when the `filter.filters` option is set.
     *
     * The supported values are:
     * * `"and"`
     * * `"or"`
     */
    logic: 'or' | 'and';
    /**
     * The nested filter expressions—either [`FilterDescriptor`]({% slug api_kendo-data-query_filterdescriptor %}), or [`CompositeFilterDescriptor`]({% slug api_kendo-data-query_compositefilterdescriptor %}). Supports the same options as `filter`. You can nest filters indefinitely.
     */
    filters: Array<FilterDescriptor | CompositeFilterDescriptor>;
}

Where filter descriptor has next available fields:

export interface FilterDescriptor {
    /**
     * The data item field to which the filter operator is applied.
     */
    field?: string | Function;
    /**
     * The filter operator (comparison).
     *
     * The supported operators are:
     * * `"eq"` (equal to)
     * * `"neq"` (not equal to)
     * * `"isnull"` (is equal to null)
     * * `"isnotnull"` (is not equal to null)
     * * `"lt"` (less than)
     * * `"lte"` (less than or equal to)
     * * `"gt"` (greater than)
     * * `"gte"` (greater than or equal to)
     *
     * The following operators are supported for string fields only:
     * * `"startswith"`
     * * `"endswith"`
     * * `"contains"`
     * * `"doesnotcontain"`
     * * `"isempty"`
     * * `"isnotempty"`
     */
    operator: string | Function;
    /**
     * The value to which the field is compared. Has to be of the same type as the field.
     */
    value?: any;
    /**
     * Determines if the string comparison is case-insensitive.
     */
    ignoreCase?: boolean;
}

export interface FilterDescriptor {
    /**
     * The data item field to which the filter operator is applied.
     */
    field?: string | Function;
    /**
     * The filter operator (comparison).
     *
     * The supported operators are:
     * * `"eq"` (equal to)
     * * `"neq"` (not equal to)
     * * `"isnull"` (is equal to null)
     * * `"isnotnull"` (is not equal to null)
     * * `"lt"` (less than)
     * * `"lte"` (less than or equal to)
     * * `"gt"` (greater than)
     * * `"gte"` (greater than or equal to)
     *
     * The following operators are supported for string fields only:
     * * `"startswith"`
     * * `"endswith"`
     * * `"contains"`
     * * `"doesnotcontain"`
     * * `"isempty"`
     * * `"isnotempty"`
     */
    operator: string | Function;
    /**
     * The value to which the field is compared. Has to be of the same type as the field.
     */
    value?: any;
    /**
     * Determines if the string comparison is case-insensitive.
     */
    ignoreCase?: boolean;

     /** --------------- ADDITIONAL DATA --------------- */
 
     /**
     * Manages filtering operations with data for single row
     */
    handler?: (dataItem: T) :  Observable<boolean> | boolean;
    /**
     * Filter name to display on grid
     */
    name?: Observable<string> | string;
}