We are using the kendo grid for angular and are programatically showing/hiding grid columns using the "hidden" property of the column.  We would like to animate the grid columns when they show/hide so that the effect is not so jarring for the user.  Our columns are defined in angular templates.  Is there a way to animate this display?  So far I have been unsuccessful with my attempts to use angular animations, and I don't believe regular css animations will work on elements that are added to or removed from the dom.

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.

Could you provide an example demonstrating how to integrate the Grid with ngRx state management. 

Currently, there is no way to style differently the popup filter menus for two different Grids.

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

Is it possible to style and class attributes to the grid for styling the toolbar?

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

Currently it seems that the columns widths are just divided up between the available width and the number of columns. Under that circumstance I am unable to specify a smaller width for a column. I would like for the column to adjust to the title at a minimum. Also it would be nice if we could drag the columns widths bigger or smaller.

Please add grid spinner configuration on grid, example <kendo-grid [loading]="true"></kendo-grid>

Once in a while, I try out a new Version to see, whether performance has improved. and constantly, I find that this is not the case.
The best treeshaking technique from Angular is spoilt by KendoUI components because of all the millions of bytes of script code that get downloaded by your components and lead to a desastrous client experience!
Optimization would be as simple as a good redesign. I wonder, why this still did not happen over the last year!

Angular 4x. version version of Grid must support all grid features we had in JQuery based version with Bootstrap CSS support.  

http://demos.telerik.com/kendo-ui/grid/index 

The new Kendo for Angular Grid doesn't look to have any keyboard support. This is necessary to pass Section 508 a11y. I don't see any items on the Kendo github, nor any ideas in this portal. 

Need the ability to reorder columns and access the current configuration to store and load on next time user access the site.

Already exists on other products on the market and Kendo Grid for jQuery

http://demos.telerik.com/kendo-ui/grid/column-reordering

Need to have Parent --> Child hierarchical records to be displayed in Grid..
It should support up to 'n' level , it means a parent can have any number of child records. can this be done using current Master Detail grids?.

 Parent 1
   --- Child 1
        -- Grand Child 1
            -- Grand Child 1
        -- Grand Child 2


Thanks in advance.

Drag and Drop of grid's columns the same way we have on the jquery version (with a Input on the component saying if we want columns to be draggable)