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;
}

Hi there

I am wondering if there is a way to customize the column labels / titles used in the column-chooser component.

I'm using the grid component with columns and column-groups (see example below) and would like to reflect the title of the group in the column-chooser's list as well.

Right now the chooser shows two checkboxes per group "Amount", "Weight" "Amount", "Weight" but does not reflect the group title...

Users might not be sure which "Amount" or which "Weight" is affected by which checkbox (in fact in my real world application there may be even more than 2 Productgroups in a row).

@Component({
    selector: 'my-app',
    template: `
      <kendo-grid [data]="data">
         <ng-template kendoGridToolbarTemplate>
            <kendo-grid-column-chooser></kendo-grid-column-chooser>
         </ng-template>
         <kendo-grid-column field="Field1"></kendo-grid-column>
         <kendo-grid-column field="Field2" [hidden]="true"></kendo-grid-column>
         <kendo-grid-column-group title="Productgroup A">
           <kendo-grid-column title="Amount" field="groupA.amount"> </kendo-grid-column>
           <kendo-grid-column title="Weight" field="groupA.weight"> </kendo-grid-column>
         </kendo-grid-column-group>
         <kendo-grid-column-group title="Productgroup B">
           <kendo-grid-column title="Amount" field="groupB.amount"> </kendo-grid-column>
           <kendo-grid-column title="Weight" field="groupB.weight"> </kendo-grid-column>
         </kendo-grid-column-group>
      </kendo-grid>
    `
})
export class AppComponent {
  public data: any[] = [{ Field1: 'Foo', Field2: 'Bar', groupA: { amount: 11, weight: 111, annotation: "none"}, groupB: { amount: 22, weight: 222, annotation: "yes"}}];
}

Thanks for any help!

Jochen

Current Silverlight Solution has the ability to filter based upon the operators of "Is Contained In" and "Is Not Contained In". When will this be available for the Angular version. This is delaying a move from Silverlight to HTML5 and Angular 4, as our client is dependent upon the existing feature.

Kendo Grids for Angular has the ability to remove operators by using `[showOperators]="false"`, however this keeps the button visible.

We would like the option to also hide/remove the clear button.

Currently, the auto resize of the the columns does not take the width of the grid into account.  I don't think this is how most users would expect this to work.  The autofit of the columns should be able to resize the columns so that they work as best they can within the grid's bounds.

Now, when I autofit my columns, the first thing I have to do is resize the columns manually so I can see the whole row on the screen.  Since I end up resizing the columns manually anyway, autofit ends up not really helping me much.

Some toolkits I have used have a resize mode for a table which determines whether or not all columns are to always be visible or not.  If all the columns are to always be visible, resizing one column needs to resize the others so that everything still fits.  This "mode" could determine which algorithm autofit should use

I would like to request additional keyboard navigation functionality with the grid.  We are using the grid as a sort of spreadsheet, for teachers to enter grades.  Teachers want to move down the column in the grid by pressing the enter key after typing each grade, in order to move their focus to the field below.  After pressing enter, the field below should be focused and editable.  When pressing enter at the bottom of the column, focus should be brought to the top of the next column.  Using shift+enter would move the focus up a row, and if at the top of a column, would bring focus to the bottom of the column to the left.

This behavior differs from the current grid keyboard navigation, I believe, in that we need the navigation to be present and the fields within each cell to be editable at the same time.  The teacher will not want to switch between navigating and editing, they want to quickly enter their scores going down the column, like a spreadsheet.

We have tried to implement this ourselves and have been mostly successful, but the area where we are having issues beyond our control is when using virtual scrolling.  As the grid swaps out its rows for the next set of data, the user's focus is moved to a different cell where we do not wish to have the focus at that point.  We have attempted to immediately move the focus back to the cell it should be in, but the user can type faster than we are able to regain control of the focus and we wind up with grades in cells where they shouldn't be.  We have tried using the pageChange event, but that occurs after the page has already changed and the focus has already been moved somewhere we don't want it.  If you have any suggestions for dealing with this in the meantime that would be most helpful.

Thank you!

In my kendo-grid I want to have a kendoGridFooterTemplate span across multiple columns the same way the kendo-grid-column-group allows you to do with the header. 

I want that "Total : " footer to start at that cell, but then continue on as needed into the other two cells to the right.

If the value "-1" is passed in as one of the values in pageSizes input for the PagerPageSizesComponent, that option should be shown as "All" and should show all rows available for the grid.

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.

Hello,

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.

Regards,
Elias

Please, please, please! We have scrollBottom event. It works like a charm. Add the same event for loading prev page on scroll top in [Kendo UI for Angular Grid], plese.

Hi There,

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. 

Requirement analysis:

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.

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.