web-dev-qa-db-fra.com

Programmez le tri de la grille

Est-il possible de définir par programme le paramètre de tri d'un KendoUI DataSource avant de lire des données et d'éviter une deuxième lecture du serveur? La portée définit un tri par défaut pour une interaction donnée de l'utilisateur. Comment?

Voici un exemple de ce que j'essaie de faire, car les réponses ne vont pas droit au but (ou peut-être que je ne comprends pas comment les choses fonctionnent).

Je définis un Kendo DataSource avec un tri initial:

var datasource = new kendo.data.DataSource({
    parameterMap: function (inputParams, operation) {
        return JSON.stringify(inputParams)
    },
    // default sort
    sort: [
        {field: "field_1", dir: "asc"},
        {field: "field_2", dir: "asc"}
    ]
});

Ce DataSource est lié à une grille de Kendo:

var grid = $("element").kendoGrid({
    dataSource: datasource   
});

Ensuite, j'ai un bouton qui appelle une "lecture" sur le DataSource et remplit la grille avec la première page de données:

$("#btn").bind("click", function(e) {
    datasource.page(1);
});

Ainsi, après avoir cliqué sur le bouton, l'utilisateur obtient les données classées par "champ_1" et "champ_2", et la grille affiche ce tri dans les en-têtes de colonne. L'utilisateur peut alors réorganiser les données de quelque manière que ce soit en cliquant sur l'en-tête de la colonne.

Ce que je voudrais faire est de réinitialiser le tri par défaut sur le tri initial, tel que défini dans la déclaration DataSource, en le montrant à nouveau dans les en-têtes de colonne et sans créer à nouveau un nouveau DataSource.

Quelque chose comme:

$("#btn").bind("click", function(e) {
    datasource.sort = [
        {field: "field_1", dir: "asc"},
        {field: "field_2", dir: "asc"}
    ]; 
    datasource.page(1);
});

Les solutions proposées ne semblent pas avoir atteint leur objectif (et je ne comprends toujours pas pourquoi je perds des points de réputation pour une question légitime qui semble ne pas être aussi triviale et qui devrait être traitée dans le cadre).

S'il vous plaît, montrez-moi que je me trompe (je ne crains pas de perdre ma réputation, je voudrais juste comprendre comment résoudre un problème).

sortingdatasourcekendo-ui
11
Matteo Piazza
var kendoGrid = $("#grid").data('kendoGrid');
var dsSort = [];
dsSort.Push({ field: "fieldName1", dir: "asc" });
dsSort.Push({ field: "fieldName2", dir: "desc" });
kendoGrid.dataSource.sort(dsSort);
28
Nanetxe

Oui. C'est possible via le paramètre sort .

2
Atanas Korchev

Voici un jsfiddle pour exactement ce que vous demandez: http://jsfiddle.net/MechStar/c2S5d/

En résumé, vous devez définir initialement la source de données sur null, puis injecter la source de données lorsque vous obtenez les informations nécessaires de l'utilisateur:

myKendoGrid.data ("kendoGrid"). setDataSource (getKendoDataSource ("ShipName", "asc"));

var getKendoDataSource = function (sidx, sord) {
  return new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    pageSize: 10,
    serverPaging: true,
    serverSorting: true,
    sort: {
      field: sidx ? sidx : "",
      dir: sord ? sord : ""
    }
  });
};
var myKendoGrid = $("#grid").kendoGrid({
  columns: [
    { field: "OrderID" },
    { field: "ShipName" },
    { field: "ShipCity" }
  ],
  dataSource: null,
  pageable: {
    pageSizes: [10, 20, 50, 100, 200]
  },
  resizable: true,
  scrollable: false,
  sortable: {
    allowUnsort: false
  }
});
$("#link").click(function () {
  myKendoGrid.data("kendoGrid")
    .setDataSource(getKendoDataSource("ShipName", "asc"));
});
2
MechStar

Vous souhaitez donc définir le tri avant la première lecture des données? Assurez-vous simplement que vous avez autobind: false sur votre contrôle ui, puis définissez les propriétés de tri sur la source de données, puis appelez datasource.read () lorsque vous êtes prêt à obtenir les données triées.

1
Robin Giltner

Je sais ce que vous essayez d'atteindre. J'ai dû faire de même, car nous enregistrons le tri et le filtrage de l'utilisateur (côté client dans mon cas) et nous ne pouvons pas utiliser les fonctions de grille getOptions/setOptions pour d'autres raisons . Même si vous définissez autobind: false cela ne fonctionnera pas comme prévu si vous voyez la définition de autobind:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-autoBind

Si la valeur est false, le widget ne sera pas lié à la source de données lors de l'initialisation. Dans ce cas, la liaison de données aura lieu lors du déclenchement de l'événement de modification de la source de données. configuration.

Lorsque vous faites un dataSource.sort (), un événement change est déclenché, puis un read est implicitement créé dans le source de données (c'est pourquoi vous avez lu un deuxième serveur).

Vous devez donc créer un nouveau dataSource avec les options de tri requises, puis appeler explicitement un dataSource.read ().

Par exemple (vous pouvez étendre vos options par défaut pour ne pas répéter la configuration): 

var options = $.extend({}, dataSourceOptions);
options.sort = [
        {field: "field_1", dir: "asc"},
        {field: "field_2", dir: "asc"}
    ];
var dataSource = new kendo.data.DataSource(options);
grid.setDataSource(dataSource);
grid.dataSource.read();

J'espère que cette aide . Cordialement!

0
Gabriel