CustomGrid v1.0 (or SearchGrid v2.0)

Update: 15 August 2007 – CustomGrid v1.2 released

Last June , when I was just getting my feet wet with Actionscript, I was trying to build a grid component for the project I am working on and the output of that was posted as SearchGrid v1.0 and in July Ted Patrick included it in his blog post about text Based Filtering component.

Now, here I am back with the search grid with a few more bells & whistles added and rebranded as CustomGrid or CGrid. The CGrid component provides the following out of the box –

1. Takes in Column names and data as an arraycol
2. Two kinds of data search – Filtering & Highlighting
3. Displays a data count
4. Printing the grid contents
5. Status area

In the demo you can check out a static example & a dynamic one. In the static example, I am passing in the columns of the grid as one arraycollection and the data as another arraycollection. This example uses the highlighting type of search. In the dynamic example, an RSS feed from MXNA is used as the datasource. The RSS reader uses the filtering mechanism for search.

Implementation of CGrid

<grid:CGrid id="<Grid ID>" printTitle="<GRID PRINT TITLE>" searchType="<SEARCH TYPE – filter | highlight>"/>

First we need to add columns to the grid by using –
public var gridColumns:ArrayCollection = new ArrayCollection([{
colname:"COL NAME",
colwidth:"COL WIDTH",
coldata:"COL DATA",
align:”COL ALIGN”,
labelfunction:”COL DATA MANIPULATION FUNCTION”,
sortable:”TRUE | FALSE”
}]);
gridId.drawColumns(Columns ArrayCollection);

To load data into the grid, use –
gridId.loadData(Data as ArrayCollection);

The caller can add controls near the data count display using –
gridId.addControls(UIbject);

To set text to the status bar, use –
gridId.statusBar.text = “text to be printed in status bar”;

Special Thanks to

• Thoughtfactory for MXNA Viewer (which started it all)
• Mike Nimer for RowColorDatagrid
• My Team @ Work

CGrid Roadmap

• Export to Clipboard
• Abililty for user to select columns to view
• Ability for user to lock columns or rows while viewing
• To highlight search text in Filter type search
• Code Optimization & cleanup

Update: Adding an ItemRenderer
As wanted by one of the visitors, I am adding a section to list out how to add an itemRenderer to the CGrid. For this, edit the CGrid.mxml to change the drawColumns() method to add the following as the last if condition –

//setting custom itemrenderer
if (cols[i].renderer != "" && cols[i].renderer != null ) {
column.itemRenderer = new ClassFactory(cols[i].renderer);
}

Now, CGrid is capable of accepting an itemRenderer for a column. Then create an itemRenderer. For this, first create a folder – “renderers” at the same level as the “widgets” folder. Then create a MXML Component – ButtonRenderer.mxml inside this folder. Creating the folder is only for having a cleaner code structure. Add a button inside this component.

Now, in your caller page, when defining the columns array use the following syntax for the column where you want the itemRenderer –

{colname:"Name",coldata:"data",
renderer:renderers.ButtonRenderer}

*Notice that the renderer is reffered to using the complete path and also note that unlike other attributes the renderer shouldnt be passed as string. i.e it should be declared without the quotes.

There you go. Now you can add any itemrenderer to any column by just mentioning it along with the column declarations. I will add this to CGrid in the next version ;).

[ Demo | Source | Sample Printout ]