Comment cacher la barre de défilement horizontale sur une sous-grille jqGrid?

Question

J'ai donc un problème d'affichage mineur avec le jqGrid. Je ne peux pas prétendre que c'est un bogue, mais cela déroute mes utilisateurs et on m'a demandé de m'en occuper, mais cela semble avoir pris le dessus sur moi. J'utilise des sous-réseaux, où l'expansion d'une ligne de la grille parente provoque le chargement d'une sous-grille (voir le code ci-dessous). J'ai simplifié l'ensemble de la config pour la rendre plus facile à lire, surtout en supprimant toutes les colonnes sauf une et en gardant le colModel simple. La grille parente a une barre de défilement horizontale pour pouvoir défiler de droite à gauche pour voir les données qui pourraient ne pas être sur l'écran. Lorsque l'écran est assez grand pour afficher toutes les données, la barre de défilement horizontale sur la grille parent disparaît. Lorsque la sous-grille charge, elle charge avec une largeur de 100%, ce qui fonctionne très bien. La grille parente se développe pour permettre l'affichage de toute la sous-grille et la barre de défilement horizontale de la grille parente vous permet de faire défiler d'avant en arrière pour voir toutes les données. Il y a une barre de défilement pour tout le défilement horizontal, indépendamment de si ou combien de sous-réseaux sont affichés. Malheureusement, la sous-grille affiche également une barre de défilement horizontale - mais puisque la largeur de la grille est de 100%, cette barre de défilement ne «fait» rien - exciter l'utilisateur en lui faisant croire qu'il n'y a plus de données à voir quand ils essaient de l'utiliser pour faire défiler et rien ne bouge.

Y a-t-il un moyen par le biais de la configuration de jqGrid ou CSS "magique" que je peux cacher cette barre de défilement horizontale sur la sous-grille? J'ai utilisé les outils de développement Chrome, mais il ne semble pas y avoir de balise DIV associée spécifiquement à la barre de défilement, juste le titre, l'en-tête et les lignes de données.

Versions:

• jQuery  :           1.4.2
• jQueryUI  :     1.8.5
• jqGrid  :             3.8.1
• navigateurs  :   Chrome 8, IE 8

jQuery(document).ready(function() { 
    jQuery('#ParentGrid').jqGrid({ 
     url: '[URL TO GET DATA]', 
     width: '100%', 
     height: '100%', 
     shrinkToFit: 'false', 
     datatype: 'json', 
     mtype: 'POST', 
     jsonReader: { repeatitems: false }, 
     sortname: 'ParentRowID', 
     sortorder: 'asc', 
     colNames: [ 
      'Parent Row ID' 
     ], 
     colModel: [ 
      { name: 'ParentRowID', index: 'ParentRowID', width: 110, align: 'left' } 
     ], 
     gridComplete: function() { 
      $('.ui-jqgrid-titlebar-close', '#ParentGrid').remove(); 
     },    
     subGrid: true, 
     subGridRowExpanded: function (subgrid_id, row_id) { 
      var subgrid_table_id = subgrid_id + '_t'; 
      $('#' + subgrid_id).html("<table id='" + subgrid_table_id + "' cellpadding='0' cellspacing='0'></table>"); 
      $('#' + subgrid_table_id).jqGrid({ 
       url: '[URL TO GET DATA BASED ON PARENT GRID SELECTED ROW ID]', 
       width: '100%', 
       height: '100%', 
       shrinkToFit: 'false', 
       datatype: 'json', 
       mtype: 'POST', 
       jsonReader: { repeatitems: false }, 
       sortname: 'ChildRowID', 
       sortorder: 'asc', 
       colNames: [ 
        'Child Row ID' 
       ], 
       colModel: [ 
        { name: 'ChildRowID', index: 'ChildRowID', width: 110, align: 'left' } 
       ], 
       gridComplete: function() { 
        $('.ui-jqgrid-titlebar-close', '#' + subgrid_table_id).remove(); 
       } 
      }); 
     } 
    }); 
}); 

Answer 1

Donne pagination et d'augmenter la hauteur de la grille de résultats de telle sorte que la barre de défilement vertical sera supprimé. Cela à son tour supprime également la barre de défilement horizontale.

Answer 2

J'ai le même problème, et je l'ai résolu en ajoutant css. Vous pouvez faire comme ceci:

#ParentGrid .ui-jqgrid-bdiv{ 
     overflow-x:hidden; 
    }