Réglage de la largeur de la colonne angulaire de l'interface utilisateur de la grille

Je suis en utilisant angulaire de l'interface utilisateur-réseau et ont une longue grille avec près de 30 colonnes, je veux mettre une largeur fixe pour les colonnes de sorte qu'au moins une colonne d'en-tête peut être vu facilement. Est-il possible de définir, par exemple 10% de la largeur de toutes les colonnes, ou je dois le faire pour chaque colonne, un par un.

Réglage de la largeur de la colonne angulaire de l'interface utilisateur de la grille

Après le réglage de la min-largeur de l'interface utilisateur-réseau-d'en-tête de la cellule de nombreuses colonnes obtenu combinés en un seul

.ui-grid-header-cell {
    min-width: 150px !important;
}

Réglage de la largeur de la colonne angulaire de l'interface utilisateur de la grille

InformationsquelleAutor Mahtab Alam | 2016-06-27
  1. 6

    Après avoir défini votre définitions de colonne, vous pouvez ajouter le suivant

    for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) {
    $scope.gridOptions.columnDefs[i].width = '10%';
}

    Ceci permettra de définir toutes les colonnes de la largeur que vous sélectionnez. Avec 30 colonnes à 10% l'utilisateur va utiliser la barre de défilement horizontale pour voir toutes les colonnes, comme vous préférez. Je n'ai pas changer de CSS.

    InformationsquelleAutor S. Baggy
  2. 3

    Le meilleur moyen est d'utiliser le GridOptions minimumColumnSize propriété:

    $scope.gridOptions.minimumColumnSize = 100;

    Zéro impact sur les performances et pas de bizarreries avec les méthodes CSS.

    Page de référence, Ctrl-F minimumColumnSize: http://ui-grid.info/docs/#!/api/ui.de la grille.catégorie:GridOptions

    InformationsquelleAutor Hanni Ali
  3. 3

    Si vous êtes à la recherche pour une largeur fixe, vous pouvez utiliser la largeur de la propriété dans le colomnDefs comme ceci:

    columnDefs : [
            { field : 'pageIcon', displayName : 'Page Icon', width : 25},
            { field : 'pageName', displayName : 'Page Name', width : 100},
            { field : 'count',    displayName : 'Count',     width : '30%'}
]
    • BTW, le Pourcentage fonctionne aussi bien, donc, largeur:30% des travaux
    • Seulement non largeur:30%, mais de largeur: de "30%" <- dans le passé comme une chaîne de caractères
    • vous avez raison!! Merci pour remarquer
    InformationsquelleAutor ArielGro
  4. 2

    Essayer par la fonction suivante en appelant avant de l'interface utilisateur-réseau de la source de données se lie.

     function SetColumnWidth() {
        var cols = _.filter($scope.gridOptions.columnDefs, function (c) {
            return c.visible != false;
        });
        var maxWidth = (document.documentElement.clientWidth) / cols.length;
        for (var i = 0; i < cols.length; i++) {
            cols[i].maxWidth = parseInt(maxWidth);
        }
    }

    définir la largeur des colonnes à width: "*" et définir minWidth comme par convinient.

    Cette solution est de travailler pour n'importe quel écran, particulièrement importante de la résolution de l'écran. Il sera gérer pour répartir également maxWidth de toutes les colonnes et couvrir toute la zone de l'écran.

    InformationsquelleAutor Nilay Mistry
  5. 0

    vous pouvez ajouter un style css

    .ui-grid-header-cell {

    min-width: 200px !important;
    max-width: 300px !important;

}
    • J'ai utilisé .l'interface utilisateur-réseau-en-tête de la cellule { min-width: 150px !important;} mais, hauteur de la colonne ont changé et de nombreuses colonnes sont fusionnés en un seul. Veuillez voir le édités question
    InformationsquelleAutor Piyush.kapoor
  6. 0

    Si vous allez ajouter la largeur à l'aide de la boucle ou comme la façon dont elle peut ralentir le rendu de votre grille, je vous suggère de le faire via CSS. Parce que j'ai eu le même problème avec 15 000 lignes et 80 colonnes et j'ai essayé d'ajouter la largeur à l'aide de la boucle, et il me semble ralentir le rendu de la grille. Donc, Essayez d'ajouter le code ci-dessous dans votre CSS, il permettra de résoudre votre but.

    .ui-grid-header-cell {
 min-width: 200px !important;
 max-width: 300px !important;
}

.ui-grid-cell {
min-width: 200px !important;
max-width: 300px !important;
}
    InformationsquelleAutor Madhwendar Thakur