Custom DataGrid Cell Roll Over Example
A few days ago I was asked this question via a previous blog post:
Hello,
Came to this blog searching for a specific issue, which might be nothing for you guys, but have been hitting head for almost two days now.
I have a DataGrid of numbers. All I want to do is that when a mouse rolls over a specific cell, that cell gets highlighted with say, green color, not the whole row.
I have not gotten past this, but as a next step would like to increase the font of the text in that cell as well.. so to emphasize it.
I will appreciate any help or pointers in the right direction.
~Lead
I responded with a brief explanation at the time, but this afternoon I decided to see if I could whip up an example application showing how this could be done. I managed to come up with some code that is both quite simple and reusable. You can check out my demo application here.
Right click on the application to View Source
My demo only shows how to change the background color of the rolled over cell, but once you have that working, changing the text size of the cell should be trivial. Some of the things too look out for when implementing a feature like this are:
- Be sure to set userRollOver and selectable to false on your DataGrid. This stops the default rollover behaviour from interfering with your custom rollover.
- Using the listData property rather than the data property to populate your item renderer is an easy way to make your components more reusable.
- The DataGrid will always set the backgroundAlpha style of any item renderer to 0, and you cannot change that. To show a custom background color you must create your background above the root element of your component.
If you have any questions just leave a comment here and I’ll do my best to help you out.
