Impostazione della larghezza della colonna nella griglia ui angolare

Question

Sto utilizzando la griglia utente angolare e ho una griglia lunga con quasi 30 colonne, voglio impostare la larghezza fissa per le colonne in modo che sia possibile vedere almeno l'intestazione della colonna. C'è un modo per impostare, diciamo una larghezza del 10% per tutte le colonne, o devo farlo per ogni colonna una per una.

Dopo aver impostato il min-width su ui-grid-header-cellulari molte colonne preso combinati in un unico

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

Answer 1

è possibile aggiungere uno stile al tuo css

.ui-grid-header-cell { 

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

} 

Answer 2

Dopo aver impostato la colonna , è possibile aggiungere il seguente

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

Questo imposterà tutte le colonne sulla larghezza selezionata. Con 30 colonne al 10% l'utente utilizzerà la barra di scorrimento orizzontale per vedere tutte le colonne, come preferisci. Non ho cambiato nessun CSS.

Answer 3

Se si aggiunge la larghezza utilizzando per il ciclo o modalità simili, potrebbe rallentare il rendering della griglia, quindi suggerirei di farlo tramite CSS. Perché ho avuto lo stesso problema con 15.000 righe e 80 colonne e ho provato ad aggiungere larghezza utilizzando il ciclo e sembra rallentare il rendering della griglia. Quindi, prova ad aggiungere sotto il codice nel tuo CSS, risolverà il tuo scopo.

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

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

Answer 4

Se siete alla ricerca di larghezza fissa, è possibile utilizzare la proprietà width nei colomnDefs come questo:

columnDefs : [ 
      { field : 'pageIcon', displayName : 'Page Icon', width:25}, 
      { field : 'pageName', displayName : 'Page Name', width:100} 
]