Gauge or UI Object render in Datagrid or AdvancedDataGrid in flex 4.5 or flex 4

I am working with flex 4.5. I want to create Gauge component Datagrid.

I am using open source com.betterthantomorrow.components. I have created custom components开发者_开发百科 like this

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   xmlns:bttc="com.betterthantomorrow.components.*"
                   xmlns:gauge="com.betterthantomorrow.components.gauge.*"
                   xmlns:objects="tekhnia.com.tekhniag.objects.*"
                   width="30%" height="65" backgroundColor="black" borderColor="black"
                   creationComplete="init(event)">
    <fx:Declarations>
        <mx:NumberFormatter precision="1" id="formatter" rounding="nearest" />
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.messaging.channels.StreamingAMFChannel;
            [Bindable]
            public var cpuValue:Number;
            [Bindable]
            public var memoryValue:Number;
            [Bindable]
            public var diskValue:Number;

            [Bindable]
            public var mycomp:String;
            [Bindable]
            public var serverName:String;

            [Bindable]
            public var statusImage:String;


            protected function init(event:FlexEvent):void
            {

                var strValues:String;
                var strColors:String;
                var strAlphas:String;
                strColors="0x009900,0xFFFF00,0xDD0000";
                strValues="0,50,70,100";
                strAlphas=".8,.8,.8"
                var values:Array=strValues.split(",");
                var colors:Array=strColors.split(",");
                var alphas:Array=strAlphas.split(",");

                gauge1.setStyle("alertValues",values);
                gauge1.setStyle("alertColors",colors);
                gauge1.setStyle("alertAlphas",alphas);

                gauge2.setStyle("alertValues",values);
                gauge2.setStyle("alertColors",colors);
                gauge2.setStyle("alertAlphas",alphas);

                gauge.setStyle("alertValues",values);
                gauge.setStyle("alertColors",colors);
                gauge.setStyle("alertAlphas",alphas);

                gauge.invalidateDisplayList();
                gauge1.invalidateDisplayList();
                gauge2.invalidateDisplayList();

            }

        ]]>
    </fx:Script>
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <s:TileGroup width="101" paddingLeft="20" paddingRight="2">
        <bttc:Gauge id="gauge" 
                    diameter="50" width="50"
                    verticalCenter="0" horizontalCenter="-111"
                    minValue="1"  maxValue="10" value="{cpuValue}"  valueFormatter="{formatter}"
                    bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>        
    </s:TileGroup>
    <s:TileGroup width="101" paddingLeft="20" paddingRight="2">
        <bttc:Gauge id="gauge1" 
                    diameter="50" width="50"
                    verticalCenter="0" horizontalCenter="-111"
                    minValue="1"  maxValue="10" value="{memoryValue}"  valueFormatter="{formatter}"
                    bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white" automationName="T"/>
    </s:TileGroup>
    <s:TileGroup width="101" paddingLeft="20" paddingRight="2">
        <bttc:Gauge id="gauge2" 
                    diameter="50" width="50"
                    verticalCenter="0" horizontalCenter="-111"
                    minValue="1"  maxValue="10" value="{diskValue}"  valueFormatter="{formatter}"
                    bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>
    </s:TileGroup>
    <s:TileGroup width="40" paddingTop="3">
        <s:Image source="assets/led/big/{statusImage}" />
        <s:Label  color="white" text="{serverName}" textAlign="center"/>
    </s:TileGroup>  

</s:BorderContainer>

I want to add this component in Datagrid. I have tried a lot on net. I didn't find any help. I read books as well.

Please help me. I found somewhere on the site one liner answer : write grid renderer. I don't how to write grid renderer and pass the data values to it.

I will be more thank full someone gives me pointer to sample grid renderer or code.

Just Check if this helps you. Instead of using your custom component for putting all the three gauges together you can have them in separate coloumns and provide appropriate data provider. You can achieve exactly what you want to also but then you have to handle the data you pass as the data provider accordingly in your component. The following approach seems simpler.

<mx:DataGrid id="yourGrid"
             height="388" width="663"
             dataProvider="{yourDP}"

             >
    <mx:columns>
        <mx:DataGridColumn headerText="Type" width="80">
            <mx:itemRenderer>
                <mx:Component>
                    <bttc:Gauge id="gauge1"  diameter="50" width="50" verticalCenter="0" horizontalCenter="-111" minValue="1" maxValue="10" value="{cpuValue}"  valueFormatter="{formatter}"
                                bigTicks="9" smallTicks="45" showMinMax="false" showValue="false"
                                pointerColor="white" automationName="T"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>

        <mx:DataGridColumn headerText="Type" width="80">
            <mx:itemRenderer>
                <mx:Component>
                    <bttc:Gauge id="gauge2"  diameter="50" width="50" verticalCenter="0" horizontalCenter="-111" minValue="1" maxValue="10" value="{memoryValue}"  valueFormatter="{formatter}"
                                bigTicks="9" smallTicks="45" showMinMax="false" showValue="false"
                                pointerColor="white" automationName="T"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>

        <mx:DataGridColumn headerText="Type" width="80">
            <mx:itemRenderer>
                <mx:Component>
                    <bttc:Gauge id="gauge3"  diameter="50" width="50" verticalCenter="0" horizontalCenter="-111" minValue="1" maxValue="10" value="{diskValue}"  valueFormatter="{formatter}"
                                bigTicks="9" smallTicks="45" showMinMax="false" showValue="false"
                                pointerColor="white" automationName="T"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>

        <mx:DataGridColumn headerText="Type" width="80">
            <mx:itemRenderer>
                <mx:Component>
                    <s:Image source="assets/led/big/{statusImage}" />
                    <s:Label  color="white" text="{serverName}" textAlign="center"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>


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

The other way is pass your entire component as the item renderer taking cues from above:

<mx:DataGrid id="yourGrid"
             height="388" width="663"
             dataProvider="{yourDP}"

             >
    <mx:columns>
        <mx:DataGridColumn headerText="Type" width="80">
            <mx:itemRenderer>
                <mx:Component>
                    <someNameSpace:YourComponent cpuvalue={cpuValue} diskValue={diskValue}/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>



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

One more point to make here is if your data provider assigned to the dataGrid has all the values then inside your component you can access them like data.variableName:

<s:TileGroup width="101" paddingLeft="20" paddingRight="2">
    <bttc:Gauge id="gauge" 
                diameter="50" width="50"
                verticalCenter="0" horizontalCenter="-111"
                minValue="1"  maxValue="10" value="{data.cpuValue}"  valueFormatter="{formatter}"
                bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>        
</s:TileGroup>
<s:TileGroup width="101" paddingLeft="20" paddingRight="2">
    <bttc:Gauge id="gauge1" 
                diameter="50" width="50"
                verticalCenter="0" horizontalCenter="-111"
                minValue="1"  maxValue="10" value="{data.memoryValue}"  valueFormatter="{formatter}"
                bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white" automationName="T"/>
</s:TileGroup>
<s:TileGroup width="101" paddingLeft="20" paddingRight="2">
    <bttc:Gauge id="gauge2" 
                diameter="50" width="50"
                verticalCenter="0" horizontalCenter="-111"
                minValue="1"  maxValue="10" value="{data.diskValue}"  valueFormatter="{formatter}"
                bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>
</s:TileGroup>
<s:TileGroup width="40" paddingTop="3">
    <s:Image source="assets/led/big/{statusImage}" />
    <s:Label  color="white" text="{data.serverName}" textAlign="center"/>
</s:TileGroup>  

in which case you can pass in your component as an item renderer as follows :

<mx:DataGrid  dataProvider="{yourDP}" >
        <mx:columns>
            <mx:DataGridColumn itemRenderer="com.somePath.yourComponent"/>
        </mx:columns>
</mx:DataGrid>

Hope this is of some help.

Have a look at this tutorial http://help.adobe.com/en_US/flex/using/WS03d33b8076db57b9-1c32bcb9124deadc3e9-8000.html as it describes exactly what you are trying to to. I think all you need to do is to have a component based on a s:MXDataGridItemRenderer component.