DataGrid row background color : Flex 3

[deepak]

Hello friends,

I have a requirement regarding datagrid in flex 3. when I populate the
datagrid with an ArrayCollection as its data provider, I need to
highlight the background color of few rows depending upon few
conditions.

e.g.

I have an ArrayCollection which has 5 elements at y0,y1,y2,y3,y4.

In different conditions I need to highlight one or more than one rows
of datagrid.

Please guide me in this regards or if any other way to implement this
requirement. I just need to let the user notice the important rows in
the datagrid.


Thanks,
Deepak

[Anoop PK]

Hi Deepak,

It is a common requirement for the datagrid. You can easily achieve
this through ItemRenderer.
You need to write a item renderer and in that itemrenderer, check for
your conditions and set the background color.
Ideally we are setting colors for each cell in the row, rather than
the complete row.

Just google for the datagrid itemrenderer and you will get ample
examples.

Cheers,
Anoop

[kapil kaushik]

Very much on lines with what Anoop is suggested.....here is a link that should help you out. It changes the text color, but you might as well change the background.
http://butterfliesandbugs.wordpress.com/2007/06/14/changing-text-color-in-a-datagrid-using-itemrenderers/

Cheers,
Kapil

--
You received this message because you are subscribed to the Google Groups "Flex India Community" group.
To post to this group, send email to flex_...@googlegroups.com.
To unsubscribe from this group, send email to flex_india+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/flex_india?hl=en.

[Vijay]

http://flexpearls.blogspot.com/2008/02/row-background-color-in.html

Goto this link and try it. It works I did this
Regards Sidhu

[deepak bh]

Thanks alot !

[Akki]

Deepak,

I hope this will help.
http://cookbooks.adobe.com/post_When_user_selects_multiple_rows_then_how_to_set_ba-17095.html

If you still have any problem, mail me.

Cheers!!

Akhil Mittal

On Sep 19, 2:58 pm, deepak bh <deepak.dbha...@gmail.com> wrote:
> Thanks alot !
>
>
>
> On Sun, Sep 19, 2010 at 2:38 AM, Vijay <singh.v...@gmail.com> wrote:
>
> >http://flexpearls.blogspot.com/2008/02/row-background-color-in.html
>
> > Goto this link and try it. It works I did this
> > Regards Sidhu
>

> >> flex_india+...@googlegroups.com<flex_india%2Bunsubscribe@googlegrou­ps.com>
> >> .

> >> For more options, visit this group at
> >>http://groups.google.com/group/flex_india?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Flex India Community" group.
> > To post to this group, send email to flex_...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > flex_india+...@googlegroups.com<flex_india%2Bunsubscribe@googlegrou­ps.com>
> > .

> > For more options, visit this group at

> >http://groups.google.com/group/flex_india?hl=en.- Hide quoted text -
>
> - Show quoted text -

[deepak bh]

Thanks to everyone for all the valuable replies.

 

I have implemented somewhat similar with the help of your guidance. But I am able to do it for static value comparision. Now I want to perform the same functionality for dynamic values with which data fields can be compared in ItemRenderer. For this I made one property in the item renderer so that dynamically it can be set from the main mxml file. But I am facing problem in this. I am not getting how to set the property of item renderer dynamically from main mxml file. I tried the following code :

 

CustomBackgroundColor.as

package {

import mx.controls.Label;

import mx.controls.DataGrid;

import mx.controls.dataGridClasses.*;

import flash.display.Graphics;

import mx.controls.Alert;

public class CustomBackgroundComp extends Label {

private var _threshold:Number;

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

super.updateDisplayList(unscaledWidth, unscaledHeight);

var g:Graphics = graphics;

g.clear();

var grid1:DataGrid = DataGrid(DataGridListData(listData).owner);

if (grid1.isItemSelected(data) || grid1.isItemHighlighted(data))

return;

if (data[DataGridListData(listData).dataField] > _threshold)  {

g.beginFill(0xFF0033);

g.drawRect(0, 0, unscaledWidth, unscaledHeight);

g.endFill();

} }

public function set threshold(value:Number):void  {

_threshold = value;

} } }

 

Main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="" xmlns="*" >

<mx:Script> <![CDATA[

import mx.collections.ArrayCollection;

import mx.rpc.events.ResultEvent;

import mx.controls.Alert;

import mx.core.ClassFactory;

private var employeeData:ArrayCollection=new ArrayCollection();

private function resultHandler(event:ResultEvent):void {

employeeData = event.result.coordinates.values;

} ]]> </mx:Script>

<mx:HTTPService id="employeeService"  url="data/file.xml" result="resultHandler(event)" />

<mx:DataGrid id="dg" x="0" y="0" width="100%" initialize="inii()" dataProvider="{employeeData}" >

<mx:columns>

<mx:Array>

<mx:DataGridColumn dataField="xval" headerText="x value" itemRenderer="CustomBackgroundComp"/>

<mx:DataGridColumn dataField="yval" itemRenderer="CustomBackgroundComp" headerText="y value" />

</mx:Array>

</mx:columns> </mx:DataGrid>

<mx:Button x="60" y="248" label="Get Result" click="employeeService.send();" />

</mx:Application>

 

Please guide me for this. Thanks,

Deepak