0

私は、多くの行 (場合によっては最大 500 行) を持つことができる Kendo Grid を使用しています。各行には、より多くのデータを持つサブグリッドがあります。同様の例がここにあります ( http://demos.kendoui.c​​om /web/grid/hierarchy.html )。すべてのサブグリッドを展開する機能を追加しました。基本的には、各ドロップダウン矢印で (jQuery 経由で) クリック イベントをトリガーしてサブグリッドを公開する単なるボタンです。

ここでの問題は、jQuery が基本的にこれらのドロップダウン矢印を個別にクリックしていることです。各矢印をクリックすると Ajax 呼び出しが開始されるため、これは問題です。500 行あるこの例では、500 の個々の Ajax 呼び出しであることが判明しました。これにより、大量の読み込み/遅延が発生し、ブラウザが応答しなくなることがあります。

多くのAjax呼び出しでバックエンド/フロントエンドを動かないようにするために、すべての行を展開/データをロードするより良い方法はありますか? おそらく、すべてのドロップダウンを開き、すべてのサブグリッド データに対して 1 つの Ajax 呼び出しを行うより効率的な方法でしょうか? ASP.NET Kendo ライブラリを使用してグリッドをインスタンス化しています。

ありがとう！

4

2 に答える 2

0

例に従ってグリッドを構築すると、詳細をロードするための detailInit 関数ができます。ボタンが行ごとに expandRow メソッドを呼び出すとおっしゃいました。複数の AJAX 呼び出しを避けるために、次のことを試します。

  • ボタンをクリックしてすべての詳細を開くと、すべての詳細が JavaScript オブジェクトに読み込まれます
  • 詳細データをロードするための AJAX 呼び出しの代わりに、JavaScript オブジェクトを使用するために使用する 2 番目の detailInit 関数を記述します。
  • 次に、元の detailInit 関数を 2 番目の detailInit 関数と交換します。
  • 次に、各行の expandRow メソッドを呼び出します
  • 次に、2 番目の detailInit 関数を元の detailInit 関数と交換して、通常の動作を復元します

アップデート：

私はその部分を逃しました：

ASP.NET Kendo ライブラリを使用してグリッドをインスタンス化しています。

したがって、私のソリューションは Kendo UI ASP.NET MVC サーバー ラッパーには適用できない可能性があります。

于 2013-11-08T07:14:19.787 に答える
0

初期ロード/ラグが発生し、それ以上のオーバーヘッドが発生しないサブグリッドのネストされた(階層的)モデルを使用して、グリッドにローカルデータバインディング(一種のハイブリッド実装)を実装する必要があります。C# ラッパーを使用していると仮定します。

public class TestViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public IList<AssetViewModel> Assets { get; set; }
}

public class AssetViewModel
{
    public long Id { get; set; }
    public string AssetName { get; set; }        
}

ビューは次のようになります。

@model IEnumerable<IRAS.Animation.Pipeline.ViewModel.ProjectManagement.TestViewModel>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id);
        columns.Bound(p => p.Name);       
    })
    .Pageable()
    .Sortable()
    .Scrollable(scr=>scr.Height(430)) 
    .Filterable()
    .DetailTemplate(@<text>
                @(Html.Kendo().Grid(item.Assets)
            .Name("grid_"+item.Id)
            .Columns(columns =>
            {
                columns.Bound(o => o.Id);
                columns.Bound(o => o.AssetName);                
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .ServerOperation(false)
            )
            .Pageable()
            .Sortable()            
    )
                </text>)
    .DataSource(dataSource => dataSource        
        .Server()
        .PageSize(20)               
     )
)

そして間違いなく、コントローラーアクションからビューまでの階層モデルコレクションを提供する必要があります。.Ajax() と .Server() を同時に使用しているため、マスター グリッドはサーバー バインド (並べ替え、グループ化、フィルタリング) を行います。これで、サーバーを 1 回呼び出すことなく、ボタンをクリックするだけですべてのサブグリッドを展開できます。

于 2013-11-08T07:11:13.650 に答える