Comment puis-je Avoir le Numéro de Ligne Dans le Kendo UI Grille

J'ai kendo de la grille de asp.net mvc et j'utilise server wrapper.Je veux colonne Supplémentaire nommée "Numéro de Ligne", c'est simple compteur (1,2,3,...). Je veux que ce compteur ne jamais changer par le client de tri. Toujours en première ligne de 1 seconde ligne 2 ,... dans la colonne "RowNumber"

comment puis-je faire dans le kendo grille ?

double possible de Comment ajouter un numéro de ligne pour le kendo ui grille?

OriginalL'auteur Behrouz Ghazi | 2014-01-14

  1. 9

    Vous pouvez utiliser le dataBound événement:

    $("#grid").kendoGrid({
    sortable: true,
    dataSource: [{
        name: "Jane Doe",
        age: 30
    }, {
        name: "John Doe",
        age: 33
    }],
    columns: [{
        field: "name"
    }, {
        field: "age"
    }, {
        field: "rowNumber",
        title: "Row number",
        template: "<span class='row-number'></span>"
    }],
    dataBound: function () {
        var rows = this.items();
        $(rows).each(function () {
            var index = $(this).index() + 1;
            var rowLabel = $(this).find(".row-number");
            $(rowLabel).html(index);
        });
    }
});

    (démo)

    OriginalL'auteur Lars Höppner

  2. 6

    Autres réponses sont OK, mais qu'ils n'appliquent pas la pagination des effets.
    Donc, je pense que la meilleure mise en œuvre serait:

    var grid = $( "#grid" ).kendoGrid( {
    sortable: true,
    dataSource: [ {
        name: "Jane Doe",
        age: 30
    }, {
        name: "John Doe",
        age: 33
    } ],
    pageable: {
        refresh: false,
        pageSizes: true,
        pageSize: 10,
    },
    columns: [ {
        field: "name"
    }, {
        field: "age"
    }, {
        field: "rowNumber",
        title: "Row number",
        template: dataItem => grid.dataSource.indexOf(dataItem) + 1
    } ],
} ).data().kendoGrid;
    C'est exactement ce que je cherchais et il fonctionne exactement de la même manière pour un Angulaire de Kendo de la Grille de mise en œuvre.
    Juste au cas où, le template: (dataItem) => {...} ne peut être utilisé pour ES6 navigateurs, vous devrez peut-être faire function(dataItem) { var ds = ... } pour l'ES5.
    C'est la plus simple et la plus précise de la réponse par ici..

    OriginalL'auteur Morteza Tourani

  3. 2

    Je suis en utilisant Angulaire et le Kendo ensemble, et j'ai mis la valeur de l'indice comme ceci (à l'aide Lodash):

    dataBound : function () {
   _.each(this.items(), function (item, i) {
      var rowScope = angular.element(item).scope();
      rowScope.dataItem.index = i;
   });
}

    OriginalL'auteur sma

  4. 0

    Pour le côté serveur de la pagination de ce script peut être utilisé (dans les colonnes de la section de la grille):

    { title: "#", 
  template: dataItem => (grid.dataSource.page() - 1) *
            grid.dataSource.pageSize() + 
            grid.dataSource.indexOf(dataItem) + 1, 
  width: 45},

    OriginalL'auteur Mohammad Taghipour

  5. 0

    Je pense que la meilleure mise en œuvre serait:

    dataBound: function () {
            if (this.dataSource && this.dataSource._total) {
                var rows = this.items();
                for (var i = 0; i < rows.length; i++) {
                    var index = i + 1
                        + (this.dataSource.pageSize() * (this.dataSource.page() - 1));
                    var rowLabel = $(rows[i]).find(".row-number");
                    $(rowLabel).html(index);
                }
            }
        }

    OriginalL'auteur asdword