textRollOverColor in Flex DataGrid part 2
In my last post I presented a simple way to customise the DataGridItemRenderer class so the Flex DataGrid control would use the textRollOverColor and textSelectedColor styles correctly. But I also noted that the solution would not fix the DataGrid header items... well, here's my solution to that problem.
First of all, it's worth noting that there are two main reasons why a custom DataGridItemRender is not adequate for the DataGrid header items. The first reason is that the renderer's validateNow() method is almost never called for header items, even though it also called correctly, and often, for the data items. And the second reason is this: the validateNow() method (both the original version, and my custom version) depends on two DataGrid methods in order to determine which text style to use. Those methods are isItemHighlighted() and isItemSelected(). However, neither of those methods work for header items - they both always return false, making them of no use in determining text color for header items.
So, to correctly use the textRollOverColor and textSelectedColor styles, I created a custom DataGrid control that overrides three mouse handlers: mouseDownHandler(), mouseOverHandler(), and mouseOutHandler(). The overrides are as follows:
override protected function mouseDownHandler(event:MouseEvent):void {
super.mouseDownHandler(event);
if (enabled && sortableColumns && isHeaderItem(event.target)) {
var col:int = listItems[0].indexOf(event.target);
if (columns[col].sortable && event.target.hasOwnProperty("textColor"))
event.target.textColor = event.target.getStyle("textSelectedColor");
}
}
super.mouseDownHandler(event);
if (enabled && sortableColumns && isHeaderItem(event.target)) {
var col:int = listItems[0].indexOf(event.target);
if (columns[col].sortable && event.target.hasOwnProperty("textColor"))
event.target.textColor = event.target.getStyle("textSelectedColor");
}
}
override protected function mouseOverHandler(event:MouseEvent):void {
super.mouseOverHandler(event);
if (enabled && sortableColumns && !event.buttonDown && isHeaderItem(event.target)) {
var col:int = listItems[0].indexOf(event.target);
if (columns[col].sortable && event.target.hasOwnProperty("textColor"))
event.target.textColor = event.target.getStyle("textRollOverColor");
}
}
override protected function mouseOutHandler(event:MouseEvent):void {
super.mouseOutHandler(event);
if (isHeaderItem(event.target) && event.target.hasOwnProperty("textColor"))
event.target.textColor = event.target.getStyle("color");
}
protected function isHeaderItem(item:Object):Boolean {
return ( showHeaders && (listItems[0].indexOf(item)>=0) );
}
So now if we put together the custom DataGridItemRenderer from the last post, and a custom DataGrid control with the above overrides, then we have a DataGrid control that uses the textRollOverColor and textSelectedColor styles almost perfectly. I say "almost" because the DataGrid control will still use the base text color when re-ordering columns by dragging, but other than that, it all works as I'd expect it to :)
I've put together a really simple demo app, which you can play with here, and/or view the source.
Trackback URL for this post:
http://colby.id.au/trackback/3
Oops
I've just noticed that the demo and source links at the end of this post are not available since I moved the post over from Blogger. I will endeavor to rectify the situation sometime this week... will have to dig out the 'ol tar archive from the old server....
No joy yet...
Hmm... it seems that the only copy of the old server files is currently on an ext3fs partition, and I don't have any boxes setup to read it at the moment. So, I guess this will just have to wait 'til I setup my next Linux box - shouldn't be long ;)
hooray... oh, no wait a second :(
hi paul
this post is exactly the type of solution i'm looking for to solve my 'no datagrid header rollover' woes, but
i've implemented it and i dont see any results.
i created a class (StyledDatagrid) pasted in your overrides and set the datagrid's textRollOverColor but i still
cant manage to toggle that mythical rollover color?
is it possible to put up the example with the source so i can take a look and see if my application of your solution
was done properly?
thanks in advance.
great blog :)
Done!!!
You're comment was the last bit of motivation I needed to dig out the old disk, and reboot into Debian :) So the above links are now updated, and working properly.
But just so you don't have to go scrolling up to find them (in case you're down here reading), here they are again:
If you still have trouble getting the overrides to work in your code, post a link to your example (if you can), and I'll have a look ;)
*thumbsup
this is really helping alot.
i'm having one problem though. i want to specify a themeColor and have the datagrid use that for the
selected and rollover colors of the list and then specify 'n different textRollOverColor for the headers to use. i've
created a custom style and set it on the datagrid's headerStyleName property but it isn't passing back the
desired result :(
i've resorted to the solution posted Flex Bug and Issue Management system (http://bugs.adobe.com/jira/browse/SDK-9404) which works exactly as i want it, but it isn't really the simplest solution.
would there be some way of tweaking your solution so that the header and the list use separate style declarations?
i'm playing around with it and will post as soon as i have some kind of solution :)
again, thanks a lot for posting :)
Dan
Maybe...?
Hi Dan,
I'm not *really* sure what you mean, but if you're just trying to style the dg headers independent of the dg rows, then probably the easiest thing to do would be to change all of the style names in my custom MyDataGrid class to header-specific names.
For example, you could replace:
Then, then you should be able to do some style like:
DataGrid {
textRollOverColor: white; /* text rollover color for datagrid rows */
headerTextRollOverColor: blue; /* text rollover color for datagrid headers */
}
Of course, this might not be enough... there may be other events within the DataGrid class that re-paint the headers back to the standard style names (don't ya just love corner-cases?).
Also, you would need to add something more to change the background colors, if that's what you want... you'd definitely need to experiment to see what would work there. But the same overrides in MyDataGrid class would probably suffice... they'd probably just need some kind of "event.target.bgColor = ..." assignment added?
Well, I hope that helps a bit... be sure to let us know how it goes :)
Paul.
Wonderful post, Thanks for
Wonderful post, Thanks for sharing.
rollover data
Hi,
I need to get row index and column index of the cell when I will do mouse roll over.Can u please help me?
Post new comment