Kendo UI - Grid-Paginierung (Serverseite)

Question

Ich versuche, Kendo-UI-Raster mit Paginierung zu verwenden. Alles scheint zu funktionieren, erwarte für das Total-Attribut, obwohl ich es auf 100 setze, zeigt es 1 - 10 von 10 Items an, welche die Seitengröße ich setze. Jeder hatte besseren Erfolg damit? Ich habe Kendo-Dokumente und -Foren ohne Erfolg durchsucht.

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

)

Dank

Answer 1

As explained in the documentation wenn serverPaging aktiviert ist müssen Sie insgesamt in Ihrem Schema angeben, und Sie müssen auch diese Summe jedes Mal, wenn Sie Antwort genau nach dem Schema spezifiziert an dieser Stelle vom Server zurückkehren zurückzukehren.

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

Das gleiche wird diskutiert here.

Überprüfen Sie die folgenden example.

Answer 2

Nach dem ursprünglichen Beispiel der „Total“ wird automatisch erkannt, und wenn Sie wollen pro Seite 100 Ergebnisse zeigen es in dem „Pagesize“ Set statt .

Answer 3

Wenn Sie Kendo-Wrapper verwenden für ASP.NET MVC, sollten Sie erwägen:

.EnableCustomBinding(true) 

Wie in dieser article erklärt, kundenspezifische Bindung ermöglicht Einbau-Paging/Sortieranlagen zu umgehen. Auf diese Weise wird Total berücksichtigt.

Answer 4

Richtig, Sie müssen das Feld Gesamt in Ihrer Antwort übergeben.

Ihre Ansicht kann wie:

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

Ihre Aktions-Code wie folgt:

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

Ansicht der Anfrage und Antwort in Fiddler Sie sehen, wie die Magie passiert: Anfrage: sort = SessionId-ASC & page = 7 & pagesize = 20 & Gruppe = & filter =

Dies ist das DataSourceRequest-Format, das vom Grid an den Controller übergeben wird. Es enthält bereits die Parameter, die für das Paging benötigt werden.

Sehen Sie sich die Antwort der Aktion an und Sie werden sehen, dass ein Datenfeld alle Datensätze enthält. Das Feld Gesamt ist der Gesamtbetrag für alle Datensätze, der für das Paging des Kendo-Rasters erforderlich ist.