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

Animating the grid detail actions

3 Answers 39 Views
Grid
This is a migrated thread and some comments may be shown as answers.
ImNotTed
Top achievements
Rank 1
Iron
ImNotTed asked on 02 Oct 2015, 05:39 PM

I have a number of Kendo grids which utilize detail templates. I'd like to add some animation for when the user chooses to expand the details.

Is there any way to add some animation such as a jQuery Easing ​for when ​the details show and hide?

For reference, we are using the MVC/​Razor helpers.

 

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 06 Oct 2015, 01:17 PM
Hi,

This functionality is not available out of the box. However, you can implement the behavior by using some custom logic. Please give the approach suggested in the following thread a try and see how it works for you.




Regards,
Viktor Tachev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
ImNotTed
Top achievements
Rank 1
Iron
answered on 06 Oct 2015, 03:22 PM

Using the link you provided, I was able to come up this code in order to add a bit of animation to the grids:

         detailExpand: function(e) {
          var detailRow = e.detailRow;
          setTimeout(function() {
            kendo.fx(detailRow).fadeIn().duration(250).play();
          }, 0);
        },
        detailCollapse: function(e) {
          var detailRow = e.detailRow;
          setTimeout(function() {
            kendo.fx(detailRow).fadeOut().duration(250).play();
          }, 0);
        },
 

I'll have to run it by my users to see if they like the effect or not.

Thanks!

0
Viktor Tachev
Telerik team
answered on 07 Oct 2015, 10:06 AM
Hello,

I am glad that the approach is working for you. Please take your time to test the behavior and let us know if you have additional queries.

Regards,
Viktor Tachev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
ImNotTed
Top achievements
Rank 1
Iron
Answers by
Viktor Tachev
Telerik team
ImNotTed
Top achievements
Rank 1
Iron
Share this question
or