UI di Kendo - Impaginazione della griglia (lato server)

Question

Sto provando a utilizzare la griglia Kendo-UI con l'impaginazione. tutto sembra funzionare aspettarsi per l'attributo Total, anche se l'ho impostato su 100 mostra 1 - 10 di 10 elementi che la dimensione della pagina sto impostando. Qualcuno ha avuto un successo migliore con questo? Ho cercato documenti e forum Kendo senza successo.

@(Html.Kendo().Grid(Model) 
.Name("Grid") 
.Columns(columns => 
{ 
    foreach (System.Data.DataColumn column in Model.Columns) 
    { 
     columns.Bound(column.ColumnName); 
    } 
}) 
.Pageable() 
.Sortable() 
.Scrollable() 
.Filterable() 
.Groupable() 
.DataSource(dataSource => dataSource 
    .Ajax() 
    .PageSize(10) 
    .Total(100) 
    .Model(model => 
     { 
      foreach (System.Data.DataColumn column in Model.Columns) 
      { 
       model.Field(column.ColumnName, column.DataType); 
      }     
     }) 
    .Read(read => read.Action("Read", "Controls")) 
) 

)

Grazie

Answer 1

As explained in the documentation quando serverPaging è abilitato è necessario specificare totale nel vostro schema e si anche bisogno di restituire quella totale ogni volta che si torna risposta data dal server esattamente a questo luogo indicato dallo schema.

dataSource: { 
    serverPaging: true, 
    schema: { 
     data: "data", 
     total: "total" 
    }, 
    //... 

Lo stesso è discusso here.

Controllare il seguente example.

Answer 2

secondo l'esempio originale, il "Total" saranno riconosciuti automaticamente, e se si desidera visualizzare 100 risultati per pagina fissati nel "PageSize" Invece .

Answer 3

Se si utilizza wrapper Kendo per ASP.NET MVC, considerare l'aggiunta di:

.EnableCustomBinding(true) 

come spiegato in questo article, associazione personalizzata permette di bypassare built-in di paging/strutture di smistamento. In tal modo, Total verrà preso in considerazione.

Answer 4

A destra, è necessario passare il campo Totale nella risposta.

tuo punto di vista può essere come:

@(Html.Kendo().Grid<YourViewModel>() 
     .Name("grid") 
     .DataSource(dataSource => dataSource   
      .Ajax() 
      .PageSize(20) 
      .ServerOperation(true) 
      .Read(read => read.Action("Data_Read", "YourController", new {Id=Model.CurrentId})) 
     ) 
     .Columns(c => 
     { 
      c.Bound(x => x.Name); 
      c.Bound(x => x.CreatedTime); 
     }) 
     .Pageable() 
     .Sortable() 
) 

Il tuo codice di azione, come di seguito:

public ActionResult Data_Read([DataSourceRequest]DataSourceRequest request, int Id) 
     { 
      int total = yourQuery.GetTotal(Id); 

      var returnViewModel = yourQuery.GetViewModels(Id, request.Page, request.PageSize); 


      return Json(new 
      { 
       Data = returnViewModel, 
       Total=total 
      }); 
     } 

Vista la richiesta e la risposta in Fiddler si vedrà come avviene la magia: Richiesta: sort = SessionId-asc & page = 7 & pageSize = 20 & gruppo = & filtro =

Questo è il formato DataSourceRequest che la griglia passa al controller; contiene già i parametri necessari per il paging.

Visualizza la risposta dall'azione e vedrai che c'è un campo Dati contenente tutti i record. Il campo Totale è l'importo totale per tutti i record richiesto per il paging della griglia di Kendo.