Animating the grid detail actions

[ImNotTed]

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.

 

[Viktor Tachev]

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.

• http://www.telerik.com/forums/detail-template-animation#b21ybdTwK0WigKcj8k-g5g

Regards,
Viktor Tachev
Telerik

 

 

[ImNotTed]

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!

[Viktor Tachev]

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