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/

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

When assigning data to a grid dynamically (ie: not specific columns to a grid) the Grid Columns should autosize to the width of the headers. Currently the only workaround is to use grid.AutoFitColumns() and wrap it in a timeout function. This causes erratic jumps in grid rendering and looks unprofessional.

Users should have the option to set gridColumnAutosize = true in the grid component. Then if users dynamically assign the grid data source without explicitly assigning columns then the grid columns will autosize to the width of the column header name.

Here is an example of the grid trying to squeeze in all data into the visible area. When it should autosize and create a scrollbar for anything that cannot fit on the page.

https://stackblitz.com/edit/angular-9jogrg?file=app%2Fcustomers.ts

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.

It would be helpful to have the ability to set maximum row height for the cells in a column so that resizing the column cannot put he grid in an undesirable state, with one row taking up the entire grid.

If a column has text in it with word wrapping enabled, when the column gets narrow, the wrapping makes the cell grow vertically as much as it needs to display everything.  If the column is made very narrow, soon that row will be the only row in the grid.  I don't think a user would ever want this to occur.

If the maximum height could be specified, then it would be possible to prevent the grid from ever getting in this rather broken state.  Ellipses, or some other indicator, should show when the content is truncated because the dimensions of the cell are too small to show the entire content.

Exporting grid and chart in single pdf. If we have grid and chart in seperate tab. 

With hidden content what if we have a  pagination in grid and want complete grid and chart.

https://stackblitz.com/edit/angular-8tdtwv-p6r75m?file=app/app.component.ts

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.

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

Please make the grid selection cancelable.

Requested for Kendo UI originally, seems to be common scenario:

http://www.telerik.com/forums/automatically-hide-a-column-when-a-user-drags-it-up-to-be-a-group-header

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

Can you add "extra" field to FilterableSettings to allow the user to set extra globally for all columns in a grid? 

https://www.telerik.com/kendo-angular-ui/components/grid/api/FilterableSettings/

Currently, if I want to set extra to false for a column, I need to do something like this: 

<kendo-grid-column field="ProductName" title="Product Name">
   <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
     <kendo-grid-string-filter-menu [extra]="false" [column]="column" [filter]="filter" [filterService]="filterService">
     </kendo-grid-string-filter-menu>
   </ng-template>
</kendo-grid-column>

But it would be simpler if we can do filterable:{extra:false} just like Kendo UI for jQuery. https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/filterable.extra

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!

Hello,

   You have this jQuery example: Binding to Kinvey Backend Services.  Do you have a similar example for Angular?  I cannot find one.  

Thank you.

Hello Telerik,

We have implemented a custom reusable filter cell component similar to the example of the multi-select checkbox example from the docs. The difficulty using that example however, is that when the filter is updated, the other filters in the grid are removed due to the use of filterservice.filter. Because the CompositeFilterDescriptor can contain both filters and composite filters, why does the base filter cell component's base methods not allow a CompositeFilterDescriptor to be provided to the UpdateFilter method? 

    protected filterByField(field: string): FilterDescriptor;
    protected filtersByField(field: string): FilterDescriptor[];
    protected removeFilter(field: string): CompositeFilterDescriptor;
    protected updateFilter(filter: FilterDescriptor): CompositeFilterDescriptor;
    protected applyFilter(filter: CompositeFilterDescriptor): void;

Our method for implementing the multi-checkbox filter cell was to build a composite filter using 'Or' logic and each selected value added as a filter descriptor with operator 'eq' and the selected item value as the value of the filter, and use a similar strategy as the base filter cell component to add this composite filter to the filter service's composite filter. 

  private getSelectedFilters(values: Item[]): CompositeFilterDescriptor {
    const selected: FilterDescriptor[] = values.map((value) => {
      return {
        field: this.field,
        operator: 'eq',
        value: value.value,
      };
    });
    return {
      filters: selected,
      logic: 'or',
    };
  }

  public onChange(values: Item[]): void {
    this.selectedValues = values;
    const root = this.filter || {
      filters: [],
      logic: 'and',
    };
    this.removeFilter(this.field);

    if (values !== null && values.length !== 0) {
      root.filters.push(this.getSelectedFilters(values));
    }
    this.filterService.filter(root);
  }

If the base filter cell component allowed the CompositeFilterDescriptor type or the FilterDescriptor type in the updateFilters method, we could simplify the logic in our filter cell component to be similar to the patterns shown in the drop-down list filter component example, as shown below, but with a composite filter descriptor such as the one generated by the above getSelectedFilters function.

this.applyFilter(
      value === null // if value of the default item
        ? this.removeFilter(this.valueField) // remove the filter
        : this.updateFilter({
            // otherwise add/modify the filter for the field with the value
            field: this.valueField,
            operator: 'eq',
            value,
          })
    ); // and update the root filter

I think this would be a beneficial addition to the Kendo Angular2 product, as it would enable many more reusable filter components to be created more easily and also simplify/ enhance some of the existing examples you provide.  If you would like more information or the full multiselect-filter component, I would be happy to supply it.

Thank you!

Please provide an [autoSync] option of the ColumnMenuChooser component as the [autoSync] option for the ColumnChooser component:

https://www.telerik.com/kendo-angular-ui/components/grid/api/ColumnChooserComponent/#toc-autosync

Thank you.

Please provide a frozen column separator as the one for the WPF DataGrid:

https://docs.telerik.com/devtools/wpf/controls/radgridview/columns/frozen-columns

thank you