CustomGrid v1.0 (or SearchGrid v2.0)

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 –

Takes in Column names and data as an arraycol

Two kinds of data search – Filtering & Highlighting

Displays a data count

Printing the grid contents

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.

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 –

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 ;).

Actually we are using Mike Nimer’s RowColorDataGrid inside CGrid. So, whatever is possible in the RowColorDataGrid should be possible in CGrid as well. Actually, we are using the RowColorDataGrid to support the HIGHLIGHT search method. 🙂

Is there any way to apply a style to the grid that is not the ‘default’ style for DataGrid ? For example, I have a separate style called .smallGrid which I’d like to use for a particular type of grid, primarily to use a different font and fontsize in the rows.

changing this will change the look and feel of the grid. And there is another style – PrintDataGrid. Changing this will not make any difference on screen. But, will alter the look and feel of the table in the print out.

Thats a catch we have in CGrid today as the CGrid is a wrapper on datagrid. So, unless we have explicit methods written to do this, we cannot do it from mxml. But, you can achieve this from actionscript. You can do something like myCGrid.dataGrid.addEventListener(“change event”,myChangeFunction”);

Somebody have any Idea how can put some section on the datagrid???
like some line between differents sections? I need that for a report and I have not idea how to do that…. I was thinking abot treeGrid but and don’t know if CustomGrid can import that…. thanks a lot

Just wondering, can you give me an example of how to put in the label function? I am putting in the name of one of my functions which worked before called “myDateFunc”, and it is throwing an error.
Help? Thanks.

When I print a PrintDataGrid component the last row in the first page is cut, but in the other pages it do fine. The differentce is this, I have the atribute variableRowHeight=”true” because the content of the rows have variable lenght and I have do it in this way.

Hi,
great component.. I have an issue though.
In my project, I already use a custom Data grid, which shows the totals of each column in a footer row.
I need to use your print feature on that component, where I can print all the rows, spanning multiple pages.. any suggestions.

Flexed

Working in the UX team @ Yahoo! R&D, India. I specialize in UI architecture & development. I like traveling - Traveling world wide tasting different cultures and customs. Seeing the miracles of man and nature. What else is our life for?