web-dev-qa-db-fra.com

Kendo UI - Pagination de la grille (côté serveur)

J'essaie d'utiliser la grille de Kendo-UI avec la pagination. tout semble fonctionner normalement pour l'attribut Total, même si je l'ai défini sur 100, il indique 1 à 10 éléments sur 10 dont la taille de page est définie. Quelqu'un at-il mieux réussi avec ça? J'ai cherché la documentation et les forums sur Kendo sans succès.

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

)

Merci

kendo-uikendo-grid
9
spooti

Comme expliqué dans la documentation lorsque serverPaging est activé, vous devez spécifier le total dans votre schéma. Vous devez également renvoyer ce total chaque fois que vous renvoyez une réponse du serveur exactement à cet emplacement spécifié par le paramètre. schéma.

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

La même chose est discutée ici .

Vérifiez les exemple suivants.

13
Petur Subev

Oui, vous devez passer le champ Total dans votre réponse.

Votre vue peut être comme:

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

Votre code d'action comme ci-dessous:

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

Visualisez la requête et la réponse dans Fiddler. Vous verrez comment la magie se déroule:

C’est le format DataSourceRequest que la grille transmet au contrôleur; il contient déjà les paramètres nécessaires à la pagination.

Visualisez la réponse de l'action et vous verrez qu'il y a un champ de données contenant tous les enregistrements. Le champ Total est le montant total pour tous les enregistrements requis pour la pagination de la grille de Kendo.

8
Jim Yu

Si vous utilisez des wrappers Kendo pour ASP.NET MVC, envisagez d'ajouter:

.EnableCustomBinding(true)

Comme expliqué dans cet article , la liaison personnalisée permet de contourner les fonctions de pagination/tri intégrées . De cette manière, Total sera pris en compte.

0
user870717

Selon l'exemple original, le "total" sera automatiquement reconnu. Si vous souhaitez afficher 100 résultats par page, définissez-le dans le "Format de page".

0
JBntis