This is a migrated thread and some comments may be shown as answers.

Detail Row Template with Angular Animations

2 Answers 14 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 24 Feb 2021, 08:25 PM

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

2 Answers, 1 is accepted

Sort by
0
Yanmario
Telerik team
answered on 26 Feb 2021, 08:00 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Daniel
Top achievements
Rank 1
answered on 05 Mar 2021, 02:31 PM
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
Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Yanmario
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or