Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 28/07/2010

Filas de un datagrid de altura variable

Hoy vamos a ver cómo realiar un datagrid con campos largos, que no entrarían en una fila. Por ejemplo un texto descripción de 300 caracteres.


<mx:AdvancedDataGrid id="urlsDataGrid" width="99.99%" height="100%" dataProvider="{dpUrlsList}" styleName="Urls" variableRowHeight="true" verticalAlign="middle">
     <mx:columns>
        <mx:AdvancedDataGridColumn dataField="icono" headerText="" width="62" minWidth="62">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Image maintainAspectRatio="true" brokenImageSkin="{null}" brokenImageBorderSkin="{null}" horizontalAlign="center" />
                </mx:Component>
            </mx:itemRenderer>
         </mx:AdvancedDataGridColumn>
        <mx:AdvancedDataGridColumn width="200" textAlign="left" dataField="nombre" headerText="Nombre" />
        <mx:AdvancedDataGridColumn textAlign="justify" dataField="descripcion" headerText="Descripción" wordWrap="true" />
        <mx:AdvancedDataGridColumn dataField="url" headerText="" visible="false" />
        <mx:AdvancedDataGridColumn dataField="id"  headerText="" visible="false" />
    </mx:columns>
</mx:AdvancedDataGrid>

Lo primero, es decir que dpUrlsList es una arrayCollection que priviene de un XML creado desde PHP y que tiene la siguiente estructura:


var obj:Object= {"id":item.@id, "nombre": item.@nombre, "descripcion":item.@descripcion, "icono":item.@icono, "url":item.@url};

variableRowHeight="true" verticalAlign="middle"

son para el asunto entre manos, para poder manejar la altura de la fila dinámica e independiente por filas y su alineación.

Y por último, en el AdvancedDataGrid, en la columna del campo "Descripcion" ponemos el parámetro wordWrap="true" que provoca que si la longitud del campo es mayor que la longitud de la columna, se provoque un salto de línea.

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.