Last Updated: 15 Sep 2021 15:06 by ADMIN
Created on: 12 Mar 2013 13:56
Category: Grid
Type: Feature Request
Animation in Grid on Expand/Collapse Detail-Grids
there are ready to use methods fadeIn & fadeOut for animation In jQuery. Kendo UI Window already uses nifty close-effect, how about implementing this behavior for a grid-control. Expanding/Colapsing Detail-Gird in Hierarchy will go smoothly and comply with other controls' animation.
Angel Petrov
Posted on: 15 Sep 2021 15:06


The problem with creating a built-in solution is that there are corner cases that may not function correctly. For example if the grid in the detail template has remote binding the animation may end before the grid is populated thus resulting in an unfriendly UX behavior. That said such solutions should be integrated using custom logic.

Angel Petrov
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

Posted on: 14 Jun 2013 15:36
Tried Michael Pitt's sample without success.  Details opened and closed but without animation
Posted on: 26 Apr 2013 13:53
I had the same issue and came up with a solution until Kendo UI implements such functions.
The solution lies in performing a conditional override of the jQuery show() and hide() functions.

jQuery(function($) {
    var _oldShow = $;
    var _oldHide = $.fn.hide;

    $ = function(speed, oldCallback) {
        return $(this).each(function(index, item) {
            var obj = $(item);
            _oldShow.apply(obj, [speed, oldCallback]);

            if (obj.hasClass("k-detail-row")) {
                obj.find(".k-grid.k-widget").each(function () {
                    var grid = $(this);


    $.fn.hide = function (speed, oldCallback) {
        return $(this).each(function () {
            var obj = $(this);

            if (obj.hasClass("k-detail-row")) {
                obj.find(".k-grid.k-widget").each(function () {
                    $(this).slideUp(300, function () { _oldHide.apply(obj, [speed, oldCallback]); });
            } else {
                _oldHide.apply(obj, [speed, oldCallback]);