Question

我正在使用剑道网格。我想添加一个向下滑动的动画 - 当我点击网格中的一行时，它会以动画展开（扩展发生在grid.ExpandRow函数 - kendo inner）。

我认为我需要k-detail-row元素上的动画。但我仍然无法找到合适的地方/方式。

任何人都已经这样做了，可以帮助我。

Answer 1

不幸的是，表行不支持动画。以下是相关问题：How to Use slideDown (or show) function on a table row?

Answer 2

我有同样的问题，虽然这是一篇旧帖子，但我认为有人可能需要它。

不幸的是，Kendo目前还不支持此功能，但有一个解决方案。

Kendo使用jquery toggle（）显示和隐藏详细信息行，因此通过在jQuery上执行条件覆盖，您可以插入动画。

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

Answer 3

我今天遇到了这个问题并设法使用网格的detailExpand函数来解决它。然后，您可以使用Kendo Fx滑动效果使细节行向下滑动。例如：

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

有关详细信息，请查看：

Detailexpand documentation

Kendo Fx documentation

Kendo Grid - 行扩展动画

3 个答案: