Événement de tri ne fonctionnant pas sur la grille qui a déclenché l'événement

Question

J'ai plusieurs grilles MVC de kendo avec un événement de tri de sorte que si un tri est appliqué sur une grille, il est également appliqué à toutes les autres grilles. Cela a semblé fonctionner correctement jusqu'à ce que je devais remplacer la fonction de tri et trier sur 2 colonnes.

Le code ci-dessous va maintenant trier toutes les autres grilles de 2 colonnes mais pas la grille qui a déclenché l'événement lorsque la colonne a été cliquée pour trier.

Existe-t-il un moyen de résoudre ce problème afin que la grille qui est cliquée se trie également correctement?

Razer:

for (int i = 0; i < grids.Count; i++) 
{ 
    @(Html.Kendo().Grid(dataXYZ) 
      .Name($"grid{i}") 
      .Deferred() 
      .Columns(columns => 
      { 
       // Columns 

      }) 
      .Sortable(sortable => 
      { 
       sortable.SortMode(GridSortMode.SingleColumn); 
      }) 
      .Events(events => events 
       .Sort("onSorting") 
       .DataBound("dataBound") 
     ) 
      .DataSource(dataSource => dataSource 
       .Ajax() 
       .PageSize(50) 
       .ServerOperation(false) 
     ) 

    ) 
} 

javascript:

<script> 


    function onSorting(arg) { 
     $("div[data-role=grid]").each(function() { 
      var grid = $(this).data("kendoGrid"); 

      var dsSort = []; 
      dsSort.push({ field: "SortColumnHelper", dir: "desc" }); 
      dsSort.push({ field: arg.sort.field, dir: arg.sort.dir }); 

      grid.dataSource.sort(dsSort); 

     }); 
    } 


</script> 

Edit: Je pense que ce qui se passe est que l'événement de tri est appelée avant que la grille est triée, de sorte que le code fonctionne, mais alors le genre réel a lieu après l'exécution du code d'événement.

Answer 1

J'ai réussi à trouver un moyen de le faire, l'événement dataBound se déclenche après un tri de sorte que chaque grille peut également être bouclée à nouveau et capturer la grille non triée.

<script> 

    function onSorting(arg) { 
     $("div[data-role=grid]").each(function() { 
      var grid = $(this).data("kendoGrid"); 

      grid.dataSource.sort({}); 
      var dsSort = []; 
      dsSort.push({ field: "SortColumnHelper", dir: "desc" }); 
      dsSort.push({ field: arg.sort.field, dir: arg.sort.dir }); 
      grid.dataSource.sort(dsSort); 


     }); 
    } 

    function dataBound(arg) { 

     $("div[data-role=grid]").each(function (e) { 
      var grid = $(this).data("kendoGrid"); 
      var gridData = grid.dataSource.view(); 

      var sort = grid.dataSource.sort(); 
      if (sort != null && sort.length > 0 && sort.length <= 1) { 

       var sortedField = sort[0].field; 
       var sortedDir = sort[0].dir; 
       if (sortedField != "SortColumnHelper") { 

        //console.log(this.id + " " + sortedField + " " + sortedDir); 
        var dsSort = []; 
        dsSort.push({ field: "SortColumnHelper", dir: "desc" }); 
        dsSort.push({ field: sortedField, dir: sortedDir }); 
        grid.dataSource.sort(dsSort); 
       } 
      } 

     }); 
    } 

</script> 

L'essentiel est ici que doit vérifier la longueur de tri pour une limite supérieure sinon le tri redéclenche l'événement DataBound et recourir ensuite etc, ce qui créera une erreur de débordement.

if (sort != null && sort.length > 0 && sort.length <= 1)

Essentiellement ce vérifie si une grille a été triée sur 1 seule colonne, puis appliquez un tri sur 2 colonnes.

Il semble un peu hacky 'mais peut; t trouver une autre façon de le faire sur les MVC kendo docs