web-dev-qa-db-ja.com

asp.net mvcのクライアント側Kendo UIグリッドでサーバー側ページングを実装する方法

誰でもクライアント側のKendo UIグリッドでサーバー側のページングを実装する方法を教えてもらえますか？

asp.net-mvckendo-ui
27
Pankaj

更新： released があります。これは、ページング、フィルタリングのソートをより簡単にするオープンソースの.NETライブラリです。

pageSizeをskipに設定すると、グリッドは現在のserverPagingとtrueを送信します。サーバー側では、提供された情報を使用してデータをページングし、アイテムの総数とともにそれを返す必要があります。コードスニペットは次のとおりです。

アクション

public ActionResult Products(int pageSize, int skip) 
{
     using (var northwind = new NorthwindDataContext())
     {
        var products = northwind.Products;
        // Get the total number of records - needed for paging
        var total = products.Count();

        // Page the data
        var data = products.Skip(skip).Take(pageSize).ToList();

        // Return as JSON - the Kendo Grid will use the response
        return Json(new { total = total, data = data });
     }
}

表示する

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
               url: "home/products",
               dataType: "json",
               type: "POST"
            }
        },
        schema: {
            data: "data", // records are returned in the "data" field of the response
            total: "total" // total number of records is in the "total" field of the response
        },
        serverPaging: true // enable server paging
    }
});

参照

LINQを使用したページング

データソースの構成設定

60
Atanas Korchev

サーバーのページネーションを実装するには、サーバーから正しい形式を返す必要があります。サーバー側のページングの場合、JSON形式は以下のJSONのようになります。

{ "mytotal":1069, "mydata": [{ ProductID : 1, ProductName : "Chai"}, { ProductID : 2, ProductName : "Chang" }]}

剣道グリッドに、mytotalオブジェクトからレコードの総数を選択し、スキーマ内のmydataからデータ行を選択するよう指示する

schema: {
    data: "mydata"
    total: "mytotal" // total is returned in the "total" field of the response
  }

詳細例を確認してください here

0
user7923798

受け入れられた答えにはUIソリューションがありません。 jQueryの回答のみを提供します。それが他の誰にも役立つ場合、UIの剣道グリッドで有効なソリューションを次に示します。

コントローラーのコードスニペット

        DataSourceResult result = new DataSourceResult()
        {
            Data = dataSet,
            Total = recordCount
        };

        return Json(result, JsonRequestBehavior.AllowGet);

ビューのコードスニペット

        .DataSource(dataSource => dataSource                
            .Ajax()
            .Read(read => read.Action("*<our method>*", "*<our controller>*")
        )
0
Taersious