Kendo Grid - 行展开动画答案

【问题标题】：Kendo Grid - row expand animationKendo Grid - 行展开动画
【发布时间】：2012-12-23 18:37:18
【问题描述】：

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

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

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

【问题讨论】：

标签： animation grid row kendo-ui expand

【解决方案1】：

很遗憾，表格行不支持动画。这是一个相关的问题：How to Use slideDown (or show) function on a table row?

【讨论】：

【解决方案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]);
        }
    });
    }
});

【讨论】：

【解决方案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

【讨论】：