Mettez en surbrillance la colonne triée

Question

Je déclenche l'événement de databound mais je ne suis pas sûr de ce que je fais à partir de là. Les liens mènent ici à docs génériques: http://www.kendoui.com/forums/ui/grid/highlight-sorted-column.aspx

Quelqu'un at-il un exemple simple de mettre en évidence la colonne triée actuelle?

Answer 1

L'idée est la suivante:

1. gérer l'événement dataBound de la grille.
2. Récupère l'expression de tri actuelle du data source en utilisant sa méthode sort.
3. Recherchez la colonne de la grille liée au champ trié. Itérer sur le champ columns de la grille.
4. Mettez en surbrillance les cellules du tableau qui correspondent à l'index de la colonne. Utilisez le champ tbody de la grille.

Voici une exemple d'implémentation:

<div id="grid"></div> 
    <script> 
    $("#grid").kendoGrid({ 
    dataSource: [ 
     { name: "Jane Doe", age: 30 }, 
     { name: "Jane Doe", age: 33 } 
    ], 
    sortable: true, 
    dataBound: function() { 
     var columns = this.columns; 
     var sort = this.dataSource.sort()[0]; 

     var sortedIndex = -1; 

     if (sort) { 
     for (var i = 0; i < columns.length; i++) { 
      if (columns[i].field == sort.field) { 
      sortedIndex = i; 
      break; 
      } 
     } 
     } 

     if (sortedIndex >= 0) { 
     this.tbody 
      .find("tr") 
      .find("td:eq(" + sortedIndex + ")") 
      .css({ background: "#a0b0c0" }); 
     } 
    } 
    }); 
    </script> 

Et une démonstration en direct: http://jsbin.com/ixahid/1/edit