Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 15 Sep 2021 15:06 by ADMIN
Max
Created on: 12 Mar 2013 13:56
Category: Grid
Type: Feature Request
5
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.
3 comments
ADMIN
Angel Petrov
Posted on: 15 Sep 2021 15:06

Hello,

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.

Regards,
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 https://learn.telerik.com/.

Peter
Posted on: 14 Jun 2013 15:36 
Tried Michael Pitt's sample without success.  Details opened and closed but without animation
Michael
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 = $.fn.show;
    var _oldHide = $.fn.hide;

    $.fn.show = 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);
                    grid.slideDown(300).fadeIn(500);

                });
            }
        });
    }

    $.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]);
            }
        });
    }
});
Create an account Log In
View
Type
Status
Category