剣道グリッドセルは、各セルとソリティアカードのような各行にアニメーションが表示されます

Question

出現するセルや行には剣道グリッドにアニメーションを追加しようとします。

私は、各行のセルのアニメーションを最後のセルの後に表示する必要があります。

検索とグーグルには、私がしたくないdetailRowの多くの結果があります。セルとデータが表示された後に話すdataBoundの記事が増えました。

私はすべてのセルに1つずつ表示されるように効果を加えたいと思います。

MATRIX:[0,0] then [0,1] then .... then [0,N] 

    [1,0] then [1,1] then .... then [1,N] 

    ... 

    [M,0] then [M,1] then .... then [M,N] 

Answer 1

私が提供できる

：

これは、その情報源here

が、我々のような剣道グリッドを表示するこのページでは、このConsole.logようangularjs RTL標準プロジェクト

<div id="grid" class="k-rtl" kendo-grid="grid" k-options="mainGridOptions" k-rebind="mainGridOptions"> 

です基本的なアプローチとしてのソリューションjQueryは、角度アプリケーションで同じにする必要があります。

隠されたグリッド

表示データバインドされたイベントにグリッドヘッダ

表示データバインドされたイベントの各列の各セルとしてウェル内のアニメーション効果を提供するために、setTimeout関数と

• スタート。

以下のスニペットを例としてご確認ください。
[注：使用の可視性：隠されたCSS属性表示するので：親のどれもあなたがチャイルズを表示できませんでしょう]

<div id="grid" style="visibility: hidden"></div> 

<script> 
$("#grid").kendoGrid({ 
    selectable: "multiple cell", 
    allowCopy: true, 
    columns: [ 
     { field: "productName" }, 
     { field: "category" } 
    ], 
    dataBound: gridDataBound, 
    dataSource: [ 
     { productName: "Tea", category: "Beverages" }, 
     { productName: "Coffee", category: "Beverages" }, 
     { productName: "Ham", category: "Food" }, 
     { productName: "Bread", category: "Food" } 
    ] 
}); 

function gridDataBound(e){ 
    $(".k-grid-header").css("visibility", "visible"); 

    var rows = $("#grid").data("kendoGrid").items(); 
    var columnNumber = $("#grid").data("kendoGrid").columns.length; 
    var animationSpeed = 500; 

    $.each(rows, function(index, row){  
    setTimeout(function(){   
     $.each($(row).find("td"), 

      function(i, cell){     
         var interval = animationSpeed/columnNumber * i; 
         setTimeout(function(){ 
         $(cell).css("visibility", "visible"); 
         }, interval); 
      }); 

    }, animationSpeed * index) 
    }); 
} 
</script>