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.

CustomGrid v1.0 (or SearchGrid v2.0)

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 ]

55 Responses to CustomGrid v1.0 (or SearchGrid v2.0)

  1. ojk007 says:

    I really love this component, its very useful. However due to the lack of documentation i cannot work out how to use xml as a dataprovider and how to have a button in each row. any ideas?

  2. ojk007 says:

    apologies, stratch i can load xml. How would i add a button to each row, ie with itemRenderer

  3. udayms says:

    hi, I have added the example of adding a itemRenderer in the post above. Hope it helps🙂 .

    If u r still having probs, leave a comment and we can work it out.🙂

  4. udayms says:

    Hey.. ojk007…. Did u get it working?

  5. Jamie Badman says:

    Lovely component.

    Is there any way to bind the data loaded in to this component, though ? I’d like the grid to auto update if the array collection ‘behind’ it is updated…

  6. udayms says:

    Try gridId.dataGrid.dataProvider = ArrayCollection();

    In the next version, I am planning to extend the DataGrid instead of having a wrapper around it like we are doing now. Once we extend the DataGrid, we can have more flexibility.

  7. Jamie Badman says:

    Oops… sorry – worked it out just after making that post.

    For anyone else who’s interested in doing this, here’s how:

    Create a function like this:

    public function populateGrid(event:CollectionEvent):void{
    myDataGrid.loadData(myCollection);
    }

    Then in the init() function, add the following line:

    myCollection.addEventListener(CollectionEvent.COLLECTION_CHANGE, populateGrid);

    Hope this helps someone!

    Jamie.

  8. Jamie Badman says:

    Arrghhh! You got there first and with a nicer way! Curse you!

    (Well thank you… but ‘Curse You’ sounds more dramatic😉 )

    Jamie.

  9. Jamie Badman says:

    One final observation – when you print a grid, it seems to only half-print the final row on the first page…

    Jamie.

  10. udayms says:

    are u sure this is not related to the printer spooler? I tried out printing the sample here and it seemed ok. Also, I tried printing it out into a pdf and this is the output.

  11. Jamie Badman says:

    Ah that looks fine. For me, I get the final row cut short, only on the first page. I guess it must be a problem with the spooler then. Unfortunately, that’s out of my control here😦

    Thanks for your help and keep up the great work!

    Jamie.

  12. udayms says:

    You could also try adjusting the page size in the printer options dialog. Its a patch. But, still if the row-cutting probs is very serious. this could be a work around.🙂

  13. Jamie Badman says:

    I don’t think it could be page size – even if I print a small grid – say 5 rows – which takes up only part of a page – it still cuts the final row in half.

    Incidently… it’d be cool to add this:

    http://www.mikenimer.com/index.cfm/2006/10/3/BackgroundRowColor-DataGrid-component

    functionality to your grid too😉

    Jamie.

  14. Jamie Badman says:

    I fixed my print problem. I’ll post it here for posterity – someone else may have a similar issue.

    I altered printGridContent.mxml using this:

    This prints out very nicely here.

    Cheers,

    Jamie.

  15. Jamie Badman says:

    Looks like angle-brackets are a no-no in these comments – I’ve subbed the angle brackets below for square ones – hopefully this’ll be visible!

    [grid:PrintGridHeader id=”header” pNo=”{pageNumber}”/]
    [mx:PrintDataGrid id=”myDataGrid” width=”100%” height=”100%” rowHeight=”18″ headerHeight=”20″ fontSize=”8″/]
    [grid:PrintGridFooter id=”footer” height=”20″ rTotal=”{totRecs}”/]

    Jamie.

  16. udayms says:

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

  17. Jamie Badman says:

    Aha! This just gets better and better! Now if only you could get the HIGHLIGHT row to flash multicoloured to a funky 1970’s disco beat soundtrack your work would be done!

    Jamie.

  18. Jamie Badman says:

    It’s me… back again😉

    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.

    Jamie.

  19. udayms says:

    in the widgets.grid.grid.css there is a style –

    /* grid general style */
    DataGrid {
    backgroundAlpha: 1;
    headerColors: #ffff99, #ffffcc;
    verticalGridLineColor: #ff9933;
    rollOverColor: #ffff99;
    borderColor: #ffcc33;
    selectionColor: #ffcc33;
    }

    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.

    Cheers.

  20. Jamie Badman says:

    … also, the custom renderer bit up above… I *think* the code snippet is incorrect… I think it might need to read:

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

    Cheers,

    Jamie.

  21. Jamie Badman says:

    RE the font style… thanks😉

    Jamie.

  22. udayms says:

    oops! You are right! My mistake. I’ll correct it immediately🙂

  23. Sandy says:

    Great component!

    Question: Is there a way I can utilize a change handler, like so?

  24. Sandy says:

    Sorry, the I guess the MXML can’t be viewed in the comments. So, how can I utilize change handler with the CGrid?

    Thanks!

  25. udayms says:

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

    Hope this helps.

  26. Pingback: Coloring the DataGrid Background « Flexed

  27. Grover Fields says:

    The download link is not working. Can you send me the zip file?

  28. udayms says:

    Hey Grover, Try now. Its working. I really didnt notice that my domain registration had expired. Anyway, its back up again. The links should be fine now🙂 .

  29. Pingback: Searchable Grid Widget « Flexed

  30. max says:

    Is there any way to make editable the CGrid column?

  31. udayms says:

    Yess…. all you have to do is set a widget (ex- TextField) as an itemRenderer… for details on how to set a renderer, check the last part of the post above…🙂 If you are still stuck, leave a message….

  32. danielneri says:

    I’m implementing this in my project right now!!

    Thanks a TON!!

  33. Ashish Mishra says:

    Hi Udaym,

    I want to use this CustomGrid. I m getting the data from HttpService.
    Normally i m using XMLList as dataprovider for grid and
    at response of HttpService i m setting dataprovider as

    var result:XML = new XML(httpSubmission.lastResult);
    grdMain.dataProvider = result.child(“row”);

    How can i use the same thing in this custom grid? Plz tell me abt this. thanks for ur reply

  34. Ashish Mishra says:

    HI Uday,

    Sorry i spelled ur name in last comment. I m really sorry for this.
    As you told me, i had given the dataprovide of datagrid.dataprovider as xmllist.

    It is displaying the data but it is not searching the data from list.
    I tried to convert the XMLList to ArrayCollectionList but it is giving exception.

    Can you tell me how can i do it?

  35. Ashish Mishra says:

    HI Uday,

    Sorry i spelled ur name in last comment. I m really sorry for this.
    As you told me, i had given the dataprovide of datagrid.dataprovider as xmllist.

    It is displaying the data but it is not searching the data from list.
    I tried to convert the XMLList to ArrayCollectionList but it is giving exception.

    Can you tell me how can i solve this?

  36. udayms says:

    Ok. I think I get your probs. Try this.

    You said you have converted the XMLList to an ArrayCollection… right? Now use the cgrid.loadData(xmlData:ArrayCollection) …. then the search should work like a charm🙂

    Check it out.

    PS: Dont worry about the name… a lot of people still mail me addressing to udayms, udayams, udyams and many more combinations… actually udayms stands for Uday M. Shankar🙂

  37. Pingback: CustomGrid v1.2 « Flexed

  38. Rafael Ochoa says:

    Hello, great component!!! thanks a lot..
    I have some problems with headers and tittle on my outPut, allways looks cutted, not complete…. how can this happen?
    thanks

  39. Rafael Ochoa says:

    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

  40. arlow says:

    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.

  41. udayms says:

    Can u post the code here? …. cause labelFunction is pretty much simple….

    Am posting 2 functions.. use them as examples –

    here’s one….

    /**
    * Format Date. Used in the datagrid for
    * formatting the date recieved from the feed.
    */
    private function formatDate(item:Object, col:DataGridColumn):String {
    var date:String = item.pubDate.toString();
    var df:DateFormatter = new DateFormatter();
    df.formatString = "DD.MM.YYYY";
    return df.format(date);
    }

    and here’s another one…

    /**
    * Take ArrayCollection and create a csv string. Used in the datagrid for
    * formatting the date recieved from the feed.
    */
    private function parseCatgories(item:Object, col:DataGridColumn):String {
    var categories:String = "";
    var acCats:ArrayCollection = item.category;
    for(var i:int=0; i<acCats.length; i++){
    categories += acCats[i]+", ";
    }
    categories = categories.substr(0, categories.lastIndexOf(","));

    return categories;
    }

  42. Ajenjo says:

    Hi.

    I have the same problem as Jamie.

    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.

    What can I do?

    Thanks for your help.

  43. Ajenjo says:

    Code.-

  44. Ajenjo says:

    Code.-

    [mx:PrintDataGrid id=”myDataGrid” width=”90%” height=”100%” variableRowHeight=”true”]
    [mx:columns]
    [mx:DataGridColumn headerText=”ELEMENTO A CONTROLAR” wordWrap=”true” dataField=”descripcion”/]
    [mx:DataGridColumn headerText=”RECOMENDACION” wordWrap=”true” dataField=”recomendacion”/]
    [/mx:columns]
    [/mx:PrintDataGrid]

  45. RSS feed for comments on this post.

  46. quineto says:

    Hello Uday,

    seems that u have lots of questions must be that this is a great module, so here is one more question for when you have some time , I appreciate it.

    if I want to add a horizontal scroll bar, so the grid can haveenough space for colums and it´s headers . Should I modify the CSS or is at the UseCGrid.mxml layout, or somewhere in the code?

    thanks

  47. rn says:

    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.

    Thanks.

  48. rn says:

    Was able to customize your code for my component.
    Thanks..
    And you have a great sense of humor…

  49. MikeM says:

    Copy to clipboard does not copy the column names. Is there a way to do that? Are there plans for doing that?

  50. phentermine actos claritin d hr buy cheap medrol , exelon rfi work pricing apply buying medrol , will short term prednisone cause hirsuitism ordering buy acomplia online , long term diflucan therapy for candida online buy avodart , negative side effects of prednisone Ventolin ,

  51. Saw Palmetto says:

    The only way to be free is to limit yourself. (Jason Benson)

  52. I am regular reader, how are you everybody? This post posted at this site is actually pleasant.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: