Datagrid with image itemrenderer problem
pradeepflex
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
Varun Bajaj
I am attaching a file using for my project and functioning what you want to do. Change in the code as per your requirement.
Thanks
Varun Bajaj
--
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.
FlexiSush
Please give your source file(.mxml) so that i can fix
for you.
Regards,
http://flexphpworld.wordpress.com/
pradeep gorijavolu
This is the application code.............
<?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
Jitendra Jain
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(
parentDocument.testMain1(value);
});
}
addChild(radio);
if(value != null && imageReference == null)
{
if(value.count > 0) {
Thanks and Regards,
JJain,
If you have knowledge, let others light their candles in it --Margaret Fuller:
FlexiSush
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 <pradeepflex.gr...@gmail.com>
wrote:
> Hi Varun,
>
> This is the application code.............
> <file:///C:/BlazeDS/componentTest/src/script/PositionImageRenderer.as><?xml
> On Mon, Feb 8, 2010 at 10:10 AM, FlexiSush <sushant...@gmail.com> 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 <pradeepflex.gr...@gmail.com> 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 flex_...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > flex_india+...@googlegroups.com<flex_india%2Bunsu...@googlegroups.com>
Varun Bajaj
thanks and regards,
Varun Bajaj
To unsubscribe from this group, send email to flex_india+...@googlegroups.com.
pradeep gorijavolu
public
function columnwidthAdjust(event:Event):void{ var arrColl:ArrayCollection = event.currentTarget.dataProvider as ArrayCollection;col1.itemRenderer =
null;sepProDetCLSGrid.dataProvider = collection;
col1.itemRenderer =
new Position();sepProDetCLSGrid.dataProvider = collection;
}
columnStretch="columnwidthAdjust(event)" is the datagrid event
similarlay i m asking when i scroll the grid i need to control the collection and displaying the data properly..
please see once and let me know the solution..
Regards,
Pradeep
Fehmina Kanuga
FlexiSush
it is possible to use checkbox as item renderer in datagrid. The
array collection which is used as dataprovider must have field to hold
the value of checkbox selected value. The example can be found in my
blog at:
http://flexphpworld.wordpress.com/2010/02/09/datagrid-with-checkbox-as-itemrenderer/
regards,
http://flexphpworld.wordpress.com
On Feb 9, 5:44 pm, Fehmina Kanuga <whitepearl.fehm...@gmail.com>
wrote:
> HI ,
> is there any way to check the checkbox inside datagrid??
> i am using spring framwork and blazeDs..and fromt end as flex 3
> i want to render checkbox in datagrid in flex based on values yes or no from
> db..
> any pointers will be of great help
> thanks in advance
>
> On Tue, Feb 9, 2010 at 1:58 PM, Varun Bajaj <vb.j...@gmail.com> wrote:
> > pradeep you had put condition to display the image but not put condition
> > for not to display the image this is the only bug in your code.
>
> > thanks and regards,
>
> > Varun Bajaj
>
> > On Mon, Feb 8, 2010 at 11:40 PM, FlexiSush <sushant...@gmail.com> wrote:
>
> >> Hi,
> >> you can refer my blog at
>
> >>http://flexphpworld.wordpress.com/2010/02/08/flex-datagrid-with-image...
> >> <flex_india%2Bunsu...@googlegroups.com<flex_india%252Buns...@googlegroups.com>>
Fehmina Kanuga
To unsubscribe from this group, send email to flex_india+...@googlegroups.com.
pradeep gorijavolu
Its very urgent for me to deliver my application
Regards,
Pradeep
pradeep gorijavolu
i followed your code it was done but i got side effect like
I can select multiple radio buttons in the grid itself...
This is the way i returned the code
<?xml version="1.0" encoding="utf-8"?>
<mx:RadioButton id="radio"/>
<mx:Image id="img" visible="{data.count > 0}" source="s1.gif"/>
<mx:Label id="Lbl" text="{data.label}"/>
</mx:HBox>
please let me know why this problem comes for the radiobutton...
Thanx for any valuable information
Regards,
Pradeep