KendoUI Grid serverpaging

Question

Sto cercando di popolare una griglia KendoUI con dati JSON in cui il server restituisce il numero totale di righe insieme ai dati, ma sto riscontrando qualche problema nel far funzionare correttamente serverPaging. I creare e assegnare il DataSource della griglia come segue:

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

       grdTableResults.setDataSource(oDS); 

e la prima pagina mostra i primi 50 di 939 record, ma c'è sempre e solo 1 pagina (le frecce di navigazione Non rispondere mai a nulla) e vedo NaN - NaN di 939 articoli e il cerchio rotante di punti al centro della griglia che non scompare mai.

Una cosa che è diversa in tutti gli esempi che ho visto è che la mia chiamata $ .ajax e l'elaborazione dei dati JSON in .done non usano "transport: read", ma sto pensando come faccio a inviare i dati ea recuperarli non importa (o perché ogni richiesta di pagina è un nuovo server letto?). Ma non penso di fare abbastanza per gestire correttamente il paging del server, anche se sembra che io stia impostando valori di origine dati simili a quelli impostati nell'esempio su http://jsfiddle.net/rusev/Lnkug/. Poi ci sono i valori "take" e "skip" di cui non sono sicuro, ma ho "startIndex" e "rowsPerPage" che sto inviando al server che può essere utilizzato lì. Presumo che la griglia possa dirmi quale pagina sono in mostra posso impostare correttamente il parametro "startIndex" e se ho un elemento per pagina "posso ripristinare il mio valore" rowsPerPage "?

In ogni caso, mi dispiace per . tutte le domande newbie Qualsiasi aiuto e suggerimenti è sinceramente apprezzato Grazie

Answer 1

trasporto:.! leggere

si dovrebbe essere in grado di usare "mezzi: leggere", anche se si dispone di logica personalizzata impostando il valore di una funzione.Ho creato un JS Fiddle per dimostrare questa funzionalità

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() {} 
} 

La funzione di lettura contiene un parametro che contiene le seguenti proprietà di impaginazione: pagina, pagina Dimensione, Salta, Take. Tenere presente che tutte le operazioni di trasporto devono essere funzioni se un'operazione contiene una funzione.

startIndex e rowsPerPage

Se il server accetta questi parametri, si dovrebbe essere in grado di presentare loro in funzione di lettura. Creare una nuova chiamata AJAX che inviare dati personalizzati

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

Answer 2

Questo è il codice per il lato server involucro che sto usando per implementare il paging server con griglia di kendo:

@(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")) 
      ) 
) 

Dove getFilters è un funzione javascript che passa i miei parametri di filtro personalizzati alla rete quando si vuole ottenere i dati da URL/servizio:

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

Inoltre è necessario implementare metodo di azione del controller utilizzando la classe di kendo DataSourceRequest come qui di seguito, o altrimenti non funzionerà nel modo desiderato:

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); 
}