Hi, you can refer my blog at http://flexphpworld.wordpress.com/2010/02/08/flex-datagrid-with-image-as-itemrenderer/
Hope the above example helps you in solving your problem.. On Feb 8, 8:04 pm, pradeep gorijavolu <[email protected]> wrote: > Hi Varun, > > This is the application code............. > <file:///C:/BlazeDS/componentTest/src/script/PositionImageRenderer.as><?xml > version="1.0" encoding="utf-8"?> > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" > backgroundColor="white" initialize="initGrid()"> > <mx:ArrayCollection id="arr"> > <mx:Object label="User 1" data="1" count="4"/> > <mx:Object label="User 2" data="2" count="4"/> > <mx:Object label="User 3" data="3" count="0" /> > <mx:Object label="User 4" data="4" count="4"/> > <mx:Object label="Open Position" data="5" count="4"/> > <mx:Object label="User 6" data="6" count="0"/> > <mx:Object label="Open Position" data="7" count="4"/> > <mx:Object label="User 8" data="8" count="0"/> > <mx:Object label="User 9" data="9" count="4"/> > <mx:Object label="Open Position" data="10" count="0"/> > <mx:Object label="User 11" data="11" count="4"/> > <mx:Object label="Open Position" data="12" count="0"/> > <mx:Object label="User 13" data="13" count="4"/> > <mx:Object label="User 14" data="14" count="0"/> > <mx:Object label="User 15" data="15" count="4"/> > <mx:Object label="User 16" data="16" count="0"/> > </mx:ArrayCollection> > <mx:ArrayCollection id="arr2"> > > <mx:Object label="User 11" data="11" count="4"/> > <mx:Object label="User 12" data="12" count="0"/> > <mx:Object label="User 13" data="13" count="4"/> > <mx:Object label="User 14" data="14" count="0"/> > <mx:Object label="User 15" data="15" count="4"/> > <mx:Object label="User 16" data="16" count="0"/> > </mx:ArrayCollection> > > <mx:ArrayCollection id="arr3"> > > </mx:ArrayCollection> > > <mx:Script> > <![CDATA[ > import script.Position; > import mx.controls.Label; > import mx.core.Repeater; > import mx.events.CollectionEvent; > import script.PositionImageRenderer; > import mx.events.ScrollEvent; > import mx.events.DataGridEvent; > import mx.controls.Alert; > > public var arrColl:ArrayCollection; > > public function initGrid():void{ > > col1.itemRenderer =null; > dg1.dataProvider = arr; > col1.itemRenderer = new Position(); > dg1.dataProvider = arr; > > //arr.addEventListener(CollectionEvent.COLLECTION_CHANGE,collchange); > } > > public function test(event:DataGridEvent):void{ > //col1.itemRenderer = event.itemRenderer.hb1; > } > [Bindable] > public var arrColl1:ArrayCollection = new ArrayCollection(); > > public function initScroll():void{ > Alert.show("scroll....."); > } > > ]]> > </mx:Script> > > <mx:DataGrid x="161" y="197" id="dg1" height="150" > verticalGridLines="false" horizontalGridLines="true" > horizontalGridLineColor="#cccccc" verticalScrollPolicy="on" > draggableColumns="true" creationComplete="initScroll()"> > <mx:columns> > <mx:DataGridColumn headerText="Column 1" id="col1" width="150"> > > <!--<mx:itemRenderer> > > <mx:Component> > <mx:HBox height="50"> > > <mx:RadioButton/> > <mx:Image source="s1.gif"/> > <mx:Label text="{data.label}"/> > > </mx:HBox> > </mx:Component> > </mx:itemRenderer>--> > </mx:DataGridColumn> > <mx:DataGridColumn headerText="Column 2" dataField="data" /> > <mx:DataGridColumn headerText="Count" dataField="count"/> > </mx:columns> > </mx:DataGrid> > > </mx:Application> > > And custom renderer code..................... > > package script > { > import flash.events.Event; > import flash.events.MouseEvent; > > import mx.containers.HBox; > import mx.controls.Image; > import mx.controls.Label; > import mx.controls.RadioButton; > import mx.controls.dataGridClasses.*; > import mx.core.IFactory; > > public class Position extends HBox implements IFactory > { > private var imageReference:Image = null; > public var radio:RadioButton = new RadioButton(); > private var img:Image = new Image(); > private var lbl:Label = new Label(); > > public function newInstance():* > { > return new PositionImageRenderer(); > } > > override public function set data(value:Object):void > { > radio.selected = false; > if(radio.selected==false){ > radio.addEventListener(MouseEvent.CLICK,function > radiotest(event:Event):void{ > > parentDocument.testMain1(value); > }); > } > addChild(radio); > if(value != null && imageReference == null) > { > if(value.count > 0) { > img.source = "images/srch_plus.gif"; > addChild(img); > lbl.text = value.label ; > > img.toolTip = value.label; > imageReference = img; > > img.addEventListener(MouseEvent.CLICK,function > test(event:Event):void{ > //Alert.show(value.COLLEAGUE_NAME); > > parentDocument.testMain(value.label); > > }); > > addChild(lbl); > > } > else if(value.count == 0){ > lbl.text = " " + value.label + " "; > addChild(lbl); > img.toolTip = value.label; > > } > setStyle("verticalAlign", "middle"); > setStyle("paddingLeft","5"); > > } > > } > > } > > } > > The problem is when i scroll the grid the collection in the grid and the > images are not displayed properly... > > please let me know the solution asap. > > Thanks&Regards, > Pradeep > > On Mon, Feb 8, 2010 at 10:10 AM, FlexiSush <[email protected]> wrote: > > hi pradeep, > > Please give your source file(.mxml) so that i can fix > > for you. > > Regards, > >http://flexphpworld.wordpress.com/ > > > On Feb 4, 11:06 pm, pradeepflex <[email protected]> wrote: > > > Hello Friends, > > > > This is the problem which ifaced from last 3 days.the problem is > > > > I have a datagrid and i am displaying an images based on some > > > condition in the grid. > > > > Intially it displays fine when i scroll the grid vertically the images > > > were not displayed properly. > > > > So please anyone let me know how can i control the scroll in the grid > > > and if possible,please give me some example related that > > > > Regards, > > > Pradeep > > > -- > > You received this message because you are subscribed to the Google Groups > > "Flex India Community" group. > > To post to this group, send email to [email protected]. > > To unsubscribe from this group, send email to > > [email protected]<flex_india%[email protected]> > > . > > 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 [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/flex_india?hl=en.
