Kendo Grid - row expand animation

Question

I'm using a kendo grid. I want to add a slide-down animation - when I click on a row in the grid it expands with animation (the expansion happens with grid.ExpandRow function - kendo inner).

I think that I need the animation on k-detail-row element. But I still cant find the proper place/way to do that.

Anyone did that already, and can help me with that.

score 1 · Answer 1 · edited May 23 '17 at 12:06

1

Unfortunately animations are not supported for table rows. Here is a related question: How to Use slideDown (or show) function on a table row?

edited May 23 '17 at 12:06

Community

1
1

answered Dec 23 '12 at 21:23

Atanas Korchev

30,562
8
59
93

score 1 · Answer 2 · answered Apr 26 '13 at 13:04

I had the same question, and although this is an old post, I figured someone might need it.

Unfortunately Kendo does not support this functionality as yet, however there is a solution.

Kendo uses the jquery toggle() to show and hide the detail row, thus by performing a conditional override on the jQuery you can insert animation.

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);

            });
        }
    });
}

$.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]);
        }
    });
    }
});

score 0 · Answer 3 · answered Jun 23 '15 at 12:58

I ran into this issue today and managed to solve it using the detailExpand function of the grid. You can then use the Kendo Fx slidedown effect to make the detail row slide down. For example:

detailExpand: function (e) {
    var detailRow = e.detailRow;
    setTimeout(function () {
        kendo.fx(detailRow).slideIn("down").duration(375).play();
    }, 0);
}

For more information, please check:

Detailexpand documentation

Kendo Fx documentation

Kendo Grid - row expand animation

3 Answers3