Ridimensionare automaticamente la larghezza di DataGridCoulmn/AdvancedDataGridColumn per adattarsi contenuti

Question

voglio che il DataGridColumn o AdvancedDataGridColumn avrebbero ridimensionare automaticamente la sua larghezza in modo da adattare il contenuto all'interno ..

Sono nuovo a flettere. Voglio implementare qualcosa come le tabelle HTML.

I dati visualizzati sono semplici. Alcune righe hanno un testo un po 'più lungo, in tal caso mi piacerebbe estendere automaticamente la larghezza di DataGridColumn.

Qualsiasi aiuto per risolvere questo.

Grazie in anticipo

Answer 1

È possibile impostare la larghezza di una certa percentuale fissa, se si può intuire la larghezza possibile. ma vorrei suggerire un altro optiong:

1. impostare la proprietà variableRowHeight del datagrid su true
2. impostare la proprietà wordWrap della colonna che dovrà testo più lungo su true.

In questo modo il testo lungo verrà inserito in più righe e verrà aumentata solo l'altezza della riga. Basta fare un tentativo. se non lo vuoi, allora penso che potresti aver bisogno di scrivere una nuova classe che estende datagridColumn.

<mx:DataGrid dataProvider="{testAC}" width="80%" height="100%" variableRowHeight="true"> 
     <mx:columns> 
       <mx:DataGridColumn dataField="company" wordWrap="true"/>     <mx:DataGridColumn dataField="share"/> 
       <mx:DataGridColumn dataField="expense"/> 
     </mx:columns> 
</mx:DataGrid> 

Cheers, PK

Answer 2

Hai colpito su uno dei più grandi problemi del DataGrid e AdvancedDataGrid. Odio assolutamente quanto sia difficile far apparire comodamente i contenuti delle celle. Per ragioni non immediatamente evidenti, i valori dei campi stretti appariranno in celle molto ampie, mentre il contenuto ampio e le intestazioni verranno accentuate.

Ciò è particolarmente vero per la prima e l'ultima colonna per qualche motivo.

L'unica soluzione che ho trovato è impostare la proprietà minWidth sulle colonne, e devo prima passare attraverso i dati per trovare i valori anomali più ampi in quelle colonne e accertarmi che si adattino comodamente. Un'altra soluzione che aiuta è quella di avere colonne fittizie a sinistra ea destra a cui sono state date larghezze e minWidth e ampiezze massime di alcune dimensioni molto piccole, per esempio 5, che sembra consentire alle colonne reali nel mezzo di "respirare" un po 'meglio.

<mx:columns> 
    <mx:DataGridColumn id="leftDummy" width="5" minWidth="5" maxWidth="5"/> 
    <!-- Your "real" columns here, with minWidth assignments --> 
    <mx:DataGridColumn id="rightDummy" width="5" minWidth="5" maxWidth="5"/> 
</mxcolumns> 

Attenzione però. Se si imposta una larghezza su una colonna, essa viene interpretata non come un valore letterale o una percentuale effettiva, ma come una sorta di proporzione semi-assed. Posso solo supporre che le procedure di dimensionamento delle colonne si stanchino di calcolare e accontentarsi di una sorta di "ragionevole" interpretazione della larghezza della colonna - che, ovviamente, risulta essere assolutamente irragionevole per la maggior parte del tempo.

In questo momento sono così frustrato che sto considerando di andare con un prodotto di terze parti, ElfGrid, che risolve questi problemi e altro ancora. Guarda la documentazione, in particolare ElfColumnUtils, che ha alcuni metodi molto utili per affrontare questi problemi. È anche abbastanza veloce nei test che ho fatto.

Answer 3

Ho avuto lo stesso problema, dovresti conoscere in anticipo la dimensione della stringa più lunga, quindi assegnare a MinWidth quella dimensione e avere la colonna resizeable = 'false'.

ha funzionato per me

Answer 4

Ecco come lo faccio, e funziona abbastanza bene ...

creare una variabile associabile e dargli un numero iniziale (diciamo 100), es:

[Bindable] private var colWidth:int = 100; 

Utilizzare l'associazione dei dati alle dimensioni delle colonne, ex:

mx:DataGridColumn width="{colWidth}" 

Aggiungi una maniglia evento resize r per la vostra griglia di dati, ad esempio:

myDataGrid.addEventListener(ResizeEvent.RESIZE , onDataGridResize); 

Nel gestore ascolto per la nuova larghezza della griglia di dati, prendere quel numero e dividerlo per il numero di colonne (se tutte le colonne devono essere uguali), o fare un po 'di matematica per creare il 'percentuale' per la larghezza delle colonne, ex:

private function onDataGridResize(event:ResizeEvent):void { 
    colWidth = myDataGrid.width/numberOfColumns; 
}