Cells and Renderers

Parent Previous Next

As we reviewed in the Grid Architecture topic, each cell in the grid is a descendant of the FlexDataGridCell class. The FlexDataGridCell has a renderer property, which is the actual component being displayed. The concrete classes that inherit from FlexDataGridCell are:

·         FlexDataGridHeaderCell

·         FlexDataGridFilterCell

·         FlexDataGridFooterCell

·         FlexDataGridPagerCell

·         FlexDataGridLevelRendererCell

·         FlexDataGridExpandCollapseHeaderCell

·         FlexDataGridExpandCollapseCell

·         FlexDataGridPaddingCell

                Each of the above cells has a renderer property. The renderer is the actual component that is displayed on the UI. The FlexDataGridCell is responsible for sizing, positioning (based on padding), drawing the background, and drawing the borders. In case of the Header, Data or Footer cells the default renderer is a simple Label Control. For Filter, it is an instance of the IFilterControl. For the Pager, it is an IPager control. For the LevelRenderer it is an instance of the Class Factory that you specify in the nextLevelRenderer of the associated column Level. For the ExpandCollapse cells, it will draw an instance of the expand collapse icon on basis of the disclosureIcon style property. All the drawing happens in the drawCell method. It internally calls the drawBackground and drawBorder methods. Usually specifying the style attributes or the cellBackgroud/rowBackground/cellBorder/rowBorder functions is sufficient, but in case its needed, these methods can be overridden in a custom implementation, and this custom implementation can then be hooked in via the following properties on either the column or the level:

It is extremely rare to modify the built in renderers for the actual cells. More often than not, you will be providing custom renderers for the content of the cells. These renderers are the components that render the actual cell, or the container for each cell. Inside each cells is the actual component that renders the content of the cell. These are represented by the following properties on the column or the level

       The above properties point to class factories for item renderer instances that display the data for each item in the column. You can specify a ClassFactory custom item renderer component as the value of these properties. The default item renderer is a Label class, which displays the item data as text.

If specifying custom html is not enough for your needs, you can use itemRenderers, which is a very powerful concept. Item Renderers are basically UIComponents that sit inside the various cells of the grid. The key about item renderers is that they should expose setData and getData methods. This method is called when the grid instantiates an itemRenderer and prepares it for display. Finally, another important thing to keep in mind is that each item renderer gets a parent property. This points to the parent FlexDataGridCell object. The actual type is FlexDataGridDataCell for itemRenderers, FlexDataGridHeaderCell for headerRenders, FlexDataGridFilterCell for filterRenderers, and FlexDataGridFooterCell for footerRenderers.


The key points to remember about renderers: