Kendo Grid - 行展開動畫

Question

我正在使用劍道網格。 我想添加一個向下滑動的動畫 - 當我點擊網格中的一行時，它將用動畫 （展開發生在grid.ExpandRow函數 - kendo內部）展開。

我認爲我需要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