automáticamente el tamaño de ancho de DataGridCoulmn/AdvancedDataGridColumn para encajar el contenido

Question

Quiero que el DataGridColumn o AdvancedDataGridColumn sería cambiar automáticamente el tamaño es ancho con el fin de adaptarse al contenido dentro ..

Soy nuevo a flexionar. Quiero implementar algo así como tablas HTML.

Los datos representados son texto simple. Algunas Filas tienen poco texto más largo, en ese caso me gustaría ampliar automáticamente el ancho de DataGridColumn.

Cualquier ayuda para solucionar esto.

Gracias de antemano

Answer 1

Puede establecer el ancho a un porcentaje fijo si se puede adivinar la anchura posible. pero sugeriría otra optiong:

1. establezca la propiedad variableRowHeight de la cuadrícula de datos a cierto
2. establecer la propiedad wordWrap de la columna que tendrá un texto más largo en true.

De esta manera, su texto largo se pondrá en varias líneas y solo se aumentará esa altura de fila. solo inténtalo. si no quieres esto, entonces creo que necesitarás escribir una nueva clase extendiendo 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

Usted ha golpeado a uno de los mayores problemas de la cuadrícula de datos y AdvancedDataGrid. Odio lo difícil que es conseguir que el contenido de la célula aparezca cómodamente. Por razones que no son inmediatamente aparentes, los valores de campo angostos aparecerán en celdas muy anchas, mientras que el contenido amplio y los encabezados se arrugarán.

Esto es especialmente cierto para la primera y la última columna por algún motivo.

La única solución que he encontrado es establecer la propiedad minWidth en columnas, y primero tengo que revisar los datos para encontrar los valores atípicos más anchos en esas columnas y asegurarme de que se ajustan cómodamente. Otra solución que ayuda es tener columnas ficticias a la izquierda y a la derecha con anchuras y anchuras mínimas y anchuras máximas de un tamaño muy pequeño, digamos 5, que parece permitir que las columnas reales en el medio "respiren" un poco mejor.

<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> 

Ten cuidado, sin embargo. Si establece un ancho en una columna, no se interpreta como un valor literal o un porcentaje real, sino como un tipo de proporción a medias. Solo puedo suponer que los procedimientos de dimensionamiento de columnas se cansan de calcular y establecer algún tipo de interpretación "razonable" del ancho de columna, lo que, por supuesto, resulta completamente irracional la mayor parte del tiempo.

En este momento estoy tan frustrado que estoy considerando ir con un producto de terceros, ElfGrid, que resuelve estos problemas y más. Mire la documentación, especialmente los ElfColumnUtils, que tienen algunos métodos muy útiles para tratar estos problemas. También es bastante rápido en las pruebas que he hecho.

Answer 3

Tuve el mismo problema, debes saber de antemano el tamaño de tu cadena más larga, luego asigna MinWidth de ese tamaño y hacer que la columna cambie de tamaño = 'false'.

que trabajó para mí

Answer 4

Así es como lo hago, y funciona bastante bien ...

crear una variable que puede unirse y darle un número de partida (digamos 100), por ejemplo:

[Bindable] private var colWidth:int = 100; 

Use el enlace de datos con el tamaño de las columnas, por ejemplo:

mx:DataGridColumn width="{colWidth}" 

Añadir un identificador de evento de cambio de tamaño r para la cuadrícula de datos, por ejemplo:

myDataGrid.addEventListener(ResizeEvent.RESIZE , onDataGridResize); 

En el controlador de escuchar el nuevo ancho de la cuadrícula de datos, tomar ese número y se divide por la cantidad de columnas (si todas las columnas deben ser iguales), o hacer algunos cálculos para crear el 'porcentaje' para el ancho de las columnas, por ejemplo:

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