CustomRowColorDataGrid component

well done, smart use of rowColorFunction, it's very flexible that way.

how can i see the source of CustomRowColorDataGrid ? if possible...

Great work!

What I am trying to do is color specific cells at runtime, say, on a click of some item. Is there any way to achieve this?
Also, I am trying to do something else when the mouse rolls over a header cell. The itemRollOver() method does not recognize this as the 0th row, while itemClick() does. Any way to do this too?

Thanks in advance

Vianny,
honestly, I have no idea. I just uploaded a new zip with the source can you grab that and use the debugger to find the bug. The code itself is very simple so it's probably just a question of adding an IS check somewhere.

Hi again,

I checked the source and I can't really find what i'm looking for,
do you think it is possible to use your components with a XML
dataProvider ? I mean have you tried ? And if so could you tell
me how you managed to do it ?

Thanks !

Vianney

Hi again !

Here is a pretty simple case that fails dramatically:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns="*"
pageTitle="Dashboard" xmlns:nimer="com.mikenimer.components.datagrid.*">

<mx:XML xmlns="" id="myxml">
   <memos>
   <memo>
      <done>true</done>
      <date>06/09/2006</date>
      <subject>Testationnage</subject>
      <content>
      Blablabla
      </content>
   </memo>
   <memo>
      <done>true</done>
      <date>06/09/2006</date>
      <subject>Testationnage</subject>
      <content>
      Blablabla
      </content>
   </memo>
</memos>
</mx:XML>

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function selectTypeColor(item:Object, color:uint):uint
{
   trace(item.toString());
if( item.done == "true" )
{
return 0xFFFF00;
}
else if( item.done == "false" )
{
return 0xFF0033;
}
return color;
}
]]>
</mx:Script>

<nimer:CustomRowColorDataGrid id="test" dataProvider="{myxml.memo}" rowColorFunction="selectTypeColor">
   <nimer:columns>
      <mx:DataGridColumn dataField="done"/>
      <mx:DataGridColumn dataField="date"/>
   </nimer:columns>
</nimer:CustomRowColorDataGrid>

</mx:Application>

Now it's strange since when i don't mention the rowColorFunction the datagrid populates perfectly...

I hope the mistake is on my side !

Thanks again.

Vianney

Hello again,

One question about this. When I'm trying to refence some common properties of dataGrid with AS I keep getting compiler errors and am unable to compile ther project in Flex Builder. For example when trying to set:

myGrid.backgroundAlpha="0.15";

1119: Access of possibly undefined property backgroundAlpha through a reference with static type com.mikenimer.components.datagrid:CustomRowColorDataGrid.

If I put the same setting to nimer:CustomRowColorDataGrid, there is no problem.

Can you help on this?

Thanks,

Jari

I was having the same exact problem as Vianney, but I was getting my data provider from a ColdFusion CFC versus XML. I ran debug on the code and found the simple solution... it appears the function was trying to run before the dataProvider got populated. The fix was simply changing line 123 of the CustomRowColorDataGrid.as file from...

if( dataIndex < (this.dataProvider as ArrayCollection).length )

... to this ...

if( (this.dataProvider as ArrayCollection) != null && dataIndex < (this.dataProvider as ArrayCollection).length )

Thanks for the great component! This really helped me a lot!

Thanks Kevin !

If anyone's interested I found another nice way to do this (definitly more code to write but it's code I understand hehe).
Here it is http://www.iepl.net/DataGridRowColorSample/DataGri...

Thank you all !

Vianney

ah nevermind, rookie flex mistake about what verticalScrollPosition's units, etc. something like this works fine:

updateComplete="resultsPlaceHolder.verticalScrollPosition = resultsPlaceHolder.maxVerticalScrollPosition + 1;"

where resultsPlaceHolder is a datagrid.

I'm not sure how writting your own DataGrid extension is better then using mine, but whatever works is what matters. Just be careful not to hard code your business logic in the DataGrid itself (this is why I use a call out function).

As for you having a null dataProvider. Without a running example, there is not much I can do. I'm driving blind ;) Double check your code (case, scope, etc..) If the grid is populated the value can't be null.

i have used this custom component together with victors search implemententation.

it works fine however i have noticed that the searches are case sensitive.

is there a way around this?

could you provide an example where i could use the .toLowerCase() on a dataprovider e.g.

i have a datagrid with an array as the dataprovider which is called from a database and populatates the datafields name and email address.

how can i use the .toLowerCase on the name datafield even tho the dataprovider is an array?

sorry im still very new to flex2 and AS3 so any help provided would be of great use

this control is quite useful.

i want to know how to assign color to particular cell in datagrid?

how to create custom tree control along with check-boxes ?

for each node there should one check box.

Mike, thank you so much for creating this! Met you in New Orleans at MAX - you've been a wonderful asset for Macromedia/Adobe!

There is no link between this this component and webservices. Data is data. I would double check the application is compiling right, and there are no errors buried. Delete everything in your bin folder and do a project->Clean->Build All.

Mike, thanks for creating this..
I'm trying to get it to work within my app and running into problems..
I have this in my code:
      <comp:columns >
         <mx:Array>
            <mx:DataGridColumn width="150"
               headerText="Employee"
               itemRenderer="com.alltel.rapid.aopscheduler.renderers.WSNameCellRenderer" >
            </mx:DataGridColumn>
            <mx:DataGridColumn width="84" headerText="Sunday" >
               <mx:itemRenderer>
                  <mx:Component>
                     <mx:Label toolTip="{outerDocument.toolTipString}"
                        color="{data.sun.isAtAlternateLocation ? 0xFF0000 : 0x000000}"
                        text="{ data.sun.timespan }" />
                  </mx:Component>
               </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn width="84" headerText="Monday" >
               <mx:itemRenderer>
                  <mx:Component>
                     <mx:Label toolTip="{outerDocument.toolTipString}"
                        color="{data.mon.isAtAlternateLocation ? 0xFF0000 : 0x000000}"
                        text="{ data.mon.timespan }" />
                  </mx:Component>
               </mx:itemRenderer>
            </mx:DataGridColumn>
         </mx:Array>
      </comp:columns>


when I use the rowColorFunction I get an error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.

Will this even work for me? I'm not using the array of Objects as in your example..

Thanks

I guess the same tecnhique could be applied to the rest of list-like components:

- List
- HorizontalList
- TileList
- DataGrid, PrintDataGrid
- Tree
- Menu

Hi
I am reading through all these and since new to Flex am a bit lost.
My need is to colour datagrid rows at RUNTIME on user selection of certain conditions. I do not seem to understand how I can use a function to react as soon as a user clicks a button for example or selects an item in a List. I want rows in the dgrid be coloured if the data respond to cetain conditions.
Can you give me an example.

thanks to all.

Hi mike,

is there a way to further extend this wonderful component to filter search results so that only the returned results are displayed on the datagrid. i have seen this example http://udayms.com/flex/cgrid/UseCustomGrid.html which uses the filtering method, however i find it quite difficult to implement becuase it does not extend the datagrid.

Great example, but can a skin be used to highlight a row instead of a background color?

Hi Mike,

I'm trying to create a custom property editor, very similar to some of the older IDE's made by Borland and Microsoft. Basic premise was to use a DataGrid with the "property" column on the left, and the editable "value" column on the right. I've found how to change the background color of a column (using the backgroundColor property you've used here), however I haven't found a way to assign a CSS class to a particular column (or cell). Ultimately, I'd like to give each cell in the "properties" column a raised effect using this CSS, so that there is some separation between the rows. Have you run across this situation, and if so, how did you go about solving this?

Unless I'm reading your code wrong, moving this into the setColor method will change the bg color row once making all of the rows the same color.

However, using the rowColorFunction I added and having it called from the drawRowBackground() method let's you define a different color for each row - based on the actual data of that row at runtime. Which is why I needed to override the drawRowBackground() method.

Here's an example using this component:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" xmlns:comps="comps.*" creationComplete="start()">
<mx:Script>
<![CDATA[
public function start():void{
cdg.func=colorSettor;
}
public function colorSettor:Function=function(data:Object):Number{
if(data==null) return -1;
if(data.Album=="Slanted and Enchanted") return 0xFF0000;
return -1;
}
]]>
</mx:Script>
<comps:ColorDataGrid id="cdg">
<comps:dataProvider>
<mx:Object Artist="Pavement" Price="11.99" Album="Slanted and Enchanted" SalePrice="true"/>
<mx:Object Artist="Pavement" Price="9.99" Album="Brighten the Corners" SalePrice="false"/>
</comps:dataProvider>
<comps:columns>
<mx:DataGridColumn dataField="Artist"/>
<mx:DataGridColumn dataField="Album"/>
<mx:DataGridColumn dataField="Price"/>
<mx:DataGridColumn dataField="SalePrice"/>
</comps:columns>
</comps:ColorDataGrid>
</mx:Application>

This too has been tested.

First of all, I never said you did anything wrong. I didn't call your code bad. I'm simply trying to make a suggestion.

Secondly, when I wrote the first example I was thinking in the mindset of "You wouldn't ever need to change every color value and it is much more efficient to simply call 1 function once than to call it once for each row." Using this mentality, the client for this component would search through the dataProvider once, but the color function would only be called when the color would differ from the default. Later on you mentioned that you wanted each row's color to change based on the data in the row so I showed how you could, in less code, write a component that would do what you wanted.

Thirdly, when I said "tons of functionality" I was mistakened. After I had adapted my code to what you wanted I opened your source code and the little scroll bar on the right side of the window got really tiny (because of all of your comments) and I saw a bunch of imports (Shape, FlexShape, Graphics, AbstractEvent, ArrayCollection, Event) that I hadn't needed so I figured you had redefined the entire display for a DataGrid. To back up this assumption, I saw you had messed with updateDisplayList, which I hadn't needed to do. When I saw you had a pretty big file compared to mine, I didn't want to read through all of your source code. I simply wanted to tell you that there was an easier way.

Still, you did have some extra stuff that simply added to your file size. I just wanted to help.

Anyway, I understand if you think I stole your code because yours and mine do look very similar (although mine dropped some stuff with no functionality loss) and I won't blame you if you don't believe me when I say that I wrote my code myself and saw my file was way smaller than yours and posted it to help you out, because our files are so similar, but I did write my own code.

Lastly, your code includes much more that what you posted. Here's what the source in the zip file linked to at the top of this page says (comments removed):

package com.mikenimer.components.datagrid
{
   import mx.controls.DataGrid;
   import flash.display.Shape;
   import mx.core.FlexShape;
   import flash.display.Graphics;
   import flash.display.Sprite;
   import mx.rpc.events.AbstractEvent;
   import mx.collections.ArrayCollection;
   import flash.events.Event;

   public class CustomRowColorDataGrid extends DataGrid
   {
      private var _rowColorFunction:Function;
      
      public function CustomRowColorDataGrid()
      {
         super();
      }
      
      
      public function set rowColorFunction(f:Function):void
      {
         this._rowColorFunction = f;
      }
      
      public function get rowColorFunction():Function
      {
         return this._rowColorFunction;
      }
      
      
      
      private var displayWidth:Number;

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
       super.updateDisplayList(unscaledWidth, unscaledHeight);       
         if (displayWidth != unscaledWidth - viewMetrics.right - viewMetrics.left)
         {
            displayWidth = unscaledWidth - viewMetrics.right - viewMetrics.left;
         }
    }
          override protected function drawRowBackground(s:Sprite, rowIndex:int,
                                    y:Number, height:Number, color:uint, dataIndex:int):void
    {
       if( this.rowColorFunction != null )
       {
          if( dataIndex < (this.dataProvider as ArrayCollection).length )
          {
             var item:Object = (this.dataProvider as ArrayCollection).getItemAt(dataIndex);
             color = this.rowColorFunction.call(this, item, color);
          }
       }
       
       super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
    }


This is 1 package declaration, 8 imports, 2 functions and 1 private variable more than what you posted. Did your link go to the incorrect version of your component, or did you realize that I was correct and that a lot of the code wasn't doing anything?

i love you Mike Nimer you help me too much!

Thanks so much.It's i need it.

Mike, great work.

I only wish I had stumbled across this 5 months ago. I search around quite a bit to find this functionality and found only a few partially related implementations. So, of course I had to write my own.

You can see it here: <a href="http://www.macsims.com/blog/?p=20">http://...;

I took basically the same approach that you did in extending DataGrid and overriding drawRowBackground. Because I wanted mine to work with any collection, not just ArrayCollections, I used a cursor to access the collection. There a few other minor differences, but you can look at the code if you are interested.

Thank you so much for this. I works great and really
saved me time!

Thanks so much for this! This is exactly what I was looking for.