web-dev-qa-db-fra.com

Comment implémenter la pagination côté serveur dans la grille Kendo UI côté client dans asp.net mvc

Quelqu'un peut-il me dire comment implémenter la pagination côté serveur avec la grille Kendo UI côté client?

asp.net-mvckendo-ui
26
Pankaj

UPDATE: Nous avons publié une bibliothèque .NET open source qui facilite beaucoup la pagination, le tri et le filtrage.

La grille envoie les valeurs actuelles pageSize et skip une fois que vous avez défini serverPaging sur true. Sur le serveur, vous devez paginer vos données en utilisant les informations fournies et les renvoyer avec le nombre total d’éléments. Voici un extrait de code:

Action

public ActionResult Products(int pageSize, int skip) 
{
     using (var northwind = new NorthwindDataContext())
     {
        var products = northwind.Products;
        // Get the total number of records - needed for paging
        var total = products.Count();

        // Page the data
        var data = products.Skip(skip).Take(pageSize).ToList();

        // Return as JSON - the Kendo Grid will use the response
        return Json(new { total = total, data = data });
     }
}

Vue

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
               url: "home/products",
               dataType: "json",
               type: "POST"
            }
        },
        schema: {
            data: "data", // records are returned in the "data" field of the response
            total: "total" // total number of records is in the "total" field of the response
        },
        serverPaging: true // enable server paging
    }
});

Référence

Paging avec LINQ

Paramètres de configuration de DataSource

58
Atanas Korchev

Pour implémenter la pagination de serveur, le format correct doit être renvoyé du serveur. Pour le format JSON de pagination côté serveur, cela ressemblera à quelque chose comme ci-dessous JSON: - 

{ "mytotal":1069, "mydata": [{ ProductID : 1, ProductName : "Chai"}, { ProductID : 2, ProductName : "Chang" }]}

Indiquez au kendo que la grille sélectionne le nombre total d'enregistrements dans l'objet total et les lignes de données dans les données mydata

schema: {
    data: "mydata"
    total: "mytotal" // total is returned in the "total" field of the response
  }

Voir exemple de détail ici

0
user7923798

La réponse acceptée n'a pas de solution d'interface utilisateur; fournit uniquement une réponse jQuery. Si cela peut aider quelqu'un d'autre, voici la solution qui a fonctionné pour notre grille de kendo dans l'interface utilisateur:

extrait de code du contrôleur

        DataSourceResult result = new DataSourceResult()
        {
            Data = dataSet,
            Total = recordCount
        };

        return Json(result, JsonRequestBehavior.AllowGet);

extrait de code de View

        .DataSource(dataSource => dataSource                
            .Ajax()
            .Read(read => read.Action("*<our method>*", "*<our controller>*")
        )
0
Taersious