KendoUIグリッドserverpaging

Question

私は、サーバがデータとともに行の総数を返すJSONデータをKendoUIグリッドに設定しようとしていますが、serverPagingを正しく動作させるには問題があります。私が作成し、以下のようにグリッドのDataSourceを割り当てる：

   var oDS = new kendo.data.DataSource({ 
        schema: { 
         data: "data", 
         total: "total" 
        }, 
        data: self.grdTableData, 
        serverPaging: true, 
        pageSise: 50, 
        total: joOutput["TotalRecords"] 
       }); 

       grdTableResults.setDataSource(oDS); 

と最初のページには、939のレコードの最初の50を示しているだけで、これまで1ページ（ナビゲーション矢印が何かに反応することはありません）があり、私ははNaNを見ます - 939アイテムのNaNと、決して逃げないグリッドの中央にあるドットの回転円。

私が見てきたすべての例で異なっていることの1つは、私の$ .ajax呼び出しと.doneのJSONデータの処理が "transport：read"を使用していないことですどのようにデータを送信して元に戻すかは重要ではありません（または、すべてのページ要求が新しいサーバーの読み込みであるためです）。しかし、私は、サーバー・ページングを適切に処理するのに十分ではないと思っていますが、例で設定した値と同じようなデータ・ソース値をhttp://jsfiddle.net/rusev/Lnkug/に設定しているようです。それから私は確信していない "取る"と "スキップ"の値がありますが、私は "startIndex"と "rowsPerPage"私はそこに使用することができるサーバーに送信しています。私はグリッドが、私が "startIndex"を適切に設定できることを示しているかどうか、グリッドが私に "startPrePage"の値をリセットできるかどうかを伝えることができると仮定します。 。すべての初心者の質問には、すべてのヘルプや提案が真に評価されてのおかげ

Answer 1

輸送：海外に値を設定することで、カスタム・ロジックを持っている場合でも、「読み輸送」あなたが使用することができるはず

を読みますこの機能を実演するためにJS Fiddleを作成しました。

dataSource: { 
    serverPaging: true, 
    schema: { 
     data: "data", 
     total: "total" 
    }, 
    pageSize: 10, 
    transport: { 
     read: function(options) { 
      var data = getData(options.data.page); 
      options.success(data); 
     } 
    }, 
    update: function() {} 
} 

読み取り関数には、page、pageSize、skip、takeという次のページングプロパティを含むパラメータが含まれています。 1つの操作に関数が含まれている場合は、すべてのトランスポート操作が関数である必要があることに注意してください。

のstartIndexとrowsPerPage

サーバーは、これらのパラメータを受け入れる場合は、読み取り機能でそれらを提出することができるはずです。

@(Html.Kendo().Grid<IJRayka.Core.Utility.ViewModels.ProductDto>() 
.Name("productList") 
.Columns(columns => 
{ 
    columns.Bound(prod => prod.Name); 
    columns.Bound(ord => ord.Brand); 
    columns.Bound(ord => ord.UnitPackageOption); 
    columns.Bound(ord => ord.CategoryName); 
    columns.Bound(ord => ord.Description); 
}) 
.Pageable(pager => pager.PageSizes(true)) 
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple)) 
.PrefixUrlParameters(false) 
.DataSource(ds => ds.Ajax() 
      .Model(m => m.Id(ord => ord.ID)) 
      .PageSize(5) 
      .Read(read => read 
       .Action("FilterProductsJson", "ProductManagement") 
       .Data("getFilters")) 
      ) 
) 

getFiltersがある：カスタマイズされたデータ

var ajaxPostData = { startIndex: options.data.skip, rowsPerPage: options.data.pageSize } 

Answer 2

これは私が剣道グリッドとサーバーページングを実装するために使用しているサーバー側ラッパーためのコードであるポスト新AJAX呼び出しを作成します。 javacript関数 URL /サービスからデータを取得したいときにカスタムフィルタパラメータをグリッドに渡す：

function getFilters() { 
    return { 
     brand: $("#Brand").val(), 
     name: $("#Name").val(), 
     category: $("#CategoryName").val() 
    }; 
} 

加えて、あなたは以下のように剣道のDataSourceRequestクラスを使用して、コントローラのアクションメソッドを実装する必要があり、またはそれ以外の場合は、あなたが望むように動作しません：あなたは、サーバーに言及：私は理解していないいくつかの質問があります

public JsonResult FilterProductsJson([DataSourceRequest()] DataSourceRequest request, 
           // three additional paramerters for my custom filtering 
           string brand, string name, string category) 
{ 
    int top = request.PageSize; 
    int skip = (request.Page - 1) * top; 
    if(brand != null) 
     brand = brand.Trim(); 
    if(name != null) 
     name = name.Trim(); 
    if(category != null) 
     category = category.Trim(); 

    var searchResult = new ManageProductBiz().GetPagedFilteredProducts(brand, name, category, top, skip); 
    // remove cyclic references: 
    searchResult.Items.ForEach(prd => prd.Category.Products = null); 

    return Json(new DataSourceResult { Data = searchResult.Items, Total = searchResult.TotalCount }, JsonRequestBehavior.AllowGet); 
}