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.

Any plans on creating a Distinct Filter for the grid? 

One like Wijmo has?  https://ibb.co/fo7gwQ

Scrolling like this : http://legacy.datatables.net/release-datatables/examples/basic_init/scroll_y_infinite.html

Say you have 100.000+ rows of data.
With classic or virtual scrolling, you allow your user to go to the last page very easily. It ends up with huge skip parameter, and disastrous load times from the DB.

You don't want users to be able to run queries which are at the same time useless and very time-consuming server-side.

What you really want is for your user to be able to browse a bit of the data with fast queries, and if he wants something else, he should filter data.

Infinite scrolling gives him just that feeling.

It would be great if grid component has option to filter date and numeric columns by range.

At current, if one wants to, (for example), highlight the entirety of a row, the natural choice would be to associate a background color with that row.  However, currently, this is not possible.  The closest we can come is to conditionally associate a given color with a div that happens to live in that cell, e.g.: 

<kendo-grid [data]="gridData" [height]="410">
            <kendo-grid-column field="ProductID" title="ID" width="40">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Name" width="250">
            </kendo-grid-column>
            <kendo-grid-column field="Category.CategoryName" title="Category">
            </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Price" width="80">
              <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
               <div [class.myClass2]="dataItem.UnitPrice >= 20">{{dataItem.UnitPrice}}</div>
              </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
            </kendo-grid-column>
            <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>

(where the class.myClass2 is defined as follows):

styles: [`
    .k-grid td {
      position: relative;
    }
      .myClass2 {
        background-color: rgba(255, 0, 0, 0.5);
        color: white;
        padding: 8px 12px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
      }
    `]

But this doesn't reliably highlight a predictable amount of the cell, especially across browsers.

Thanks for your consideration,
  Jeff