Detail Row Template with Angular Animations

[Daniel]

Hello,

Is it possible to use angular animations
    https://angular.io/guide/animations#animating-a-simple-transition

with your Detail Row Template: 
    https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/detail-template/

Specifically, when the row is expanded and collapsed?  More specifically, if this is possible, on which element would I place the animation trigger?  

Thank you,

-Daniel

[Yanmario]

Hello Daniel,

The Grid does not support animations when expanding and collapsing the details rows out of the box, however this can be achieved using a custom solution.
I would recommend assigning a custom Angular animation to the detail row's content element. You can then subscribe to the detailExpand and detailCollapse events, and use them to manipulate the animation state. Worth noting is that when the detailCollapse event is triggered, the detail row element will be destroyed before the animation is played. I would suggest preventing the CellCloseEvent's default behavior and collapsing the row manually using collapseRow after the animation is done.

Here is an example how the above can be implemented.

I hope this helps!

Regards,
Yanmario Menev
Progress Telerik

[Daniel]

Thank you for your reply, and for the example Yanmario.  Unfortunately it as not as smooth as we would like, especially considering the transition which is triggered on the close state.  There is a bit of choppiness there.  We will continue to look for other options.  Thanks again.  -Daniel