Use a Datatip for each record in a DataGrid in Flex and a memory consumption note

There are times, when I use component, and things tend to get a little cramped on the interface. When I use components like the DataGrid, and the mx:Tree, often times, I find myself having those be the core data holders, and when you select them it creates a class, and other things change on the screen, but the datagrid or tree stays put, and doesn’t move. At that point I find my self filling the screen with text boxes, and then it looks a bit ugly, so I will spread it into a tab navigator to give it cleaner style, and make it easier on the eyes to the user.

Sometimes I have so many fields, that in order to make things look right, I have had to go as far as removing a column from visibility in my datagrid, so I could make it a tiny bit thinner, or another column was more imperative to be wider, and that caused me to find out how to use datatips a little better.

They are not difficult or really confusing but this may help a beginner find what they need right away.

Please View the Example, and right click to view the source. CLICK HERE TO VIEW

One thing that confused me when I started this small venture was that I thought all I had to do was to pass a dataTipFunction to the component, and it would work. After doing some snooping I found that there is a flag that turns them on.





x=“26” y=“324”>





Name” dataField=“productName”/>

If you notice, in the column I have to tell pass showDataTips=”true” this threw me off in the datagrid, because all I had to do in the mx:Tree was pass

showDataTips=”true” dataTipFunction=”someFunction”

You just pass it right inline with the mx:Tree tag.

I sure hope this helps someone, it didn’t take me that long to figure out, but I felt I would use it in the future so I blogged about it.

Memory Consumption

One thing that interested me, was memory consumption, if you click on the link above, and use your task manager (windows) and look at the memory usage of IE or Firefox, my window starts at 29,500K of usage, the second I hover over one of the data grid with a data tip, it immediately jumps to 32,000K

and as I hover over each record with a data tip, it grows by about 200k, this could get dangerous over time… I didn’t happen to leave my browser open for a long enough time to let flash’s garbage collection run, even though I’ve never seen a massive drop in memory usage, even after leaving my browser sit still over night, so I never know when exactly garbage collection runs, but adobe says it does, so I’ll have to hold them on their word… I would like to see a little more documentation on the garbage collection process, because most things out there just say that “it runs, or you have to wait for it to run” I’m assuming this will probably get better with later versions.

So I probably wouldn’t go to wild with the data tips due to memory usage, but they come in handy when you need them, and in a couple situations, I need them, and you might too.

2 comments on this post.
  1. JabbyPanda:

    BTW, have you tried to run the application that has DataGrid with DataGridColumns with “showDataTips” set to true in Flex Builder 3 Pro profiler?

    I’ve just tried that just and my results are mixed, while memory level consumption is continuously rising whenever a new dataTip is displayed, when I press “Run Garbage collector” button in Flex Builder 3 Pro profiler, the memory get somewhat released to the initial value.

  2. Datatip, item Renderer in Datagrid & how it effects Memory | Win-I@iFlex.Blog:

    […] Datatip, item Renderer in Datagrid & how it effects Memory Posted on September 17, 2010 by winner588… […]

Leave a comment