ItemRenderer rowSpan

I need an itemRenderer in my ADG to span a few rows. Even though the AdvancedDataGridRendererProvider has property rowSpan, the function hasn't been implemented yet. My idea is to use TextArea as an itemRenderer and set its height to match the row span. But the problem is that my ADG has horizontalGridLines set to true. Although my TextArea itemRendere has a background color, I can still see the horizontalGridLines behind the itemRenderer. We didn't seem be able to set horizontalGridLines to false for a specific column. Any ideas of making an itemRender span across rows or making it look like spaning across rows? Many thanks.

Adobe Newsbot hopes that the following resources helps you.
NewsBot is experimental and any feedback (reply to this post) on
its utility will be appreciated:
mx.controls.DataGrid (Flex 3):
Called by Flex when a UIComponent object is added to or
removed from a parent. ..... Typically overridden by components
containing UITextField objects,
Link:
http://livedocs.adobe.com/flex/3/langref/mx/controls/DataGrid.html
Adobe - Flex General Discussion:
Apr 21, 2008 ... What is the best way to adjust the row
height from the UIComponent itemRenderer such that it fits into the
cell? Print this message
Link:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&enterthread=y&forum id=60&threadid=1346319
Alexs Flex Closet: More Thinking About Item Renderers:
Apr 6, 2007 ... I would take a UIComponent and add children
Image and UITextField. You can look at the Flex framework source
for ListItemRenderer for
Link:
http://blogs.adobe.com/aharui/2007/04/more_thinking_about_item_rende.html
mx.printing.PrintDataGrid (Flex 2.0.1 Language Reference):
Draws the background of the headers into the given
UIComponent. DataGrid. Inherited ... Typically overridden by
components containing UITextField objects,
Link:
http://livedocs.adobe.com/flex/201/langref/mx/printing/PrintDataGrid.html
Alexs Flex Closet: Thinking About Item Renderers:
Mar 29, 2007 ... Subclass of DataGrid that dispatches a
custom event. ...... How do you reference it from within your
itemRenderer component.
Link:
http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html
Disclaimer: This response is generated automatically by the
Adobe NewsBot based on Adobe
Community
Engine.

Similar Messages

AdvancedDataGrid as a itemRenderer

I am trying to make a list menu using advanceddatagrid. What
I would like is a 1 column item with a tree control. I have created
that. Then when you pull it down it pulls in a data grid below it.
I have this mxml code:
<mx:Canvas width="300" height="800" id="outerCanvas" >
<mx:AdvancedDataGrid rowCount="0" width="100%"
height="100%" id="location_list" variableRowHeight="true"
dataProvider="{argumentData}" change="handleClick(event);"
folderClosedIcon="{null}"
folderOpenIcon="{null}"
defaultLeafIcon="{null}" >
<mx:columns>
<mx:AdvancedDataGridColumn headerText="" width="20"/>
<mx:AdvancedDataGridColumn dataField="@label"
headerText=""/>

</mx:columns>
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider
depth="2"
columnIndex="0"
columnSpan="0"
rowSpan="0"
renderer="buildingLoc"/>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
</mx:Canvas>
</mx:Application>
and this is my renderer
<mx:DataGrid xmlns="*" xmlns:mx="
http://www.adobe.com/2006/mxml"
showHeaders="false">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void
dataProvider = value;
]]>
</mx:Script>
<mx:columns>
<mx:DataGridColumn dataField="key" headerText="Key" />
<mx:DataGridColumn dataField="name" headerText="Building
Name" />
</mx:columns>
</mx:DataGrid>
what seems to happen is it creates a separate datagrid for
each element of the data set. How do I nest the datagrid in so it
just displays as a list?
Here is my compiles swf so you can see what is going on:
http://bradrice.com/test/testList.swf
and my xml is here:
http://bradrice.com/test/assets/buildingList.xml
any help would be appreciated. I have banged my head on this
one.

I think I figured out how to create my menu from the
advanceddatagrid using an itemRenderer. Here it is working:
http://bradrice.com/test/testList2.swf
I changed the renderer to this:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox paddingLeft="2" xmlns:mx="
http://www.adobe.com/2006/mxml"
>
<mx:Script>
<![CDATA[
override public function set data( value:Object ) : void {
super.data = value;
]]>
</mx:Script>
<mx:Label text="{data.key}" width="30" />
<mx:Text width="100%" text="{data.name}" />
</mx:HBox>
Now, one thing I would like to do is somehow remove the
change event on just the top level list items. Right now if you
click one of the items you will get some data from the item.
However the top level items don't have the data and I don't want
the event to fire when you click them. Any thoughts anybody?

Inline item mx:Image ... in mx:itemRenderer could not see the defination of method

I have following code and got a compilation error ("possiblely called an undefined function") because the <mx:Image ...> in the <mx:itemRenderer > could not see the defination of "aMethod" method:
<mx:Form ....>
<mx:Script><![CDATA[
private function aMethod(evt:Event):void {
           // code...
]]></mx:Script>
<mx:Canvas label="Tile View" width="100%" height="100%" >
          <mx:TileList id="photosTileList" dataProvider="{this.photoDP}" width="100%" height="100%" >
                    <mx:itemRenderer >
                        <mx:Component>
                            <mx:Image horizontalAlign="center" source="{data.url.text()}"
                                toolTip="{data.caption.text()}" width="55" height="38" complete="aMethod(event)"/> 
                        </mx:Component>
                    </mx:itemRenderer>
         </mx:TileList>
         <mx:Image .... complete="aMethod(event)"/> 
</mx:Canvas>
</mx:Form>
I do not know why the inline <mx:Image> inside <mx:itemRenderer> can not see the "aMethod" function defination in the same mxml file.
Any suggestions?

You need outerDocument, and the method cannot be private, it should be public:
complete="outerDocument.aMethod(event)"
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services

DataChange event not triggering in itemRenderer

Hi,
I have a tileList on the stage, which is dataBound to an
XMLList object, the items of which are programatically updated with
the results from an httpService.
The tileList uses a custom itemRenderer. Inside the
itemRenderer, I want to be able to change the color of the
background based on the data. For example, when data.@arrow = 1, I
want the background to be green, and when data.@arrow = 0, red etc.
I am trying to call this function on dataChange event of one
of the containers inside the itemRenderer. however it doesnt seem
to be firing when the data updates
Please advise as to what I am doing wrong?

Found the answer. My stupidity!
I wasnt updating the arrow field properly

Image Not getting displayed in DataGridColumn ItemRenderer

I have a DataGridColumn ItemRenderer and based on the value,
I am displaying image in the DataGridColumn
However the image is not getting displayed.
Below is my code. What could be the problem?
Thanks

"ajesing" <[email protected]> wrote in
message
news:gbcd0n$8sn$[email protected]..
>I have a DataGridColumn ItemRenderer and based on the
value, I am
>displaying
> image in the DataGridColumn
> However the image is not getting displayed.
>
> Below is my code. What could be the problem?
@Embed embeds at compiletime, so it can't take a variable. If
you want to
embed the graphics, embed them to the main file and use
DataGrid's
iconFunction to pass an icon to the itemRenderer.
HTH;
Amy

Getting selected item from combobox itemrenderer and storing in object

Hi Guys,
Can anyone help me in this regard. Its very urgent.
I have a combo box itemrenderer in datagrid column. I want to get the user selected item from the dropdown of the row(s) (User may select values from combo box from multiple rows of datagrid) and corressponding values of all other columns of the rows and store it in an object . Then pass this object to database to update only those rows that user has changed.
I am able to get the selected item from combo box using "event.currentTarget.selectedItem" and corressponding values of all other columns of the rows using "valueSelect.ID", etc where valueSelect is object which contains data for datagrid. But am stuck up with, how to store the selected item value of the combobox and corressponding values of all other columns of the rows into an Object ?.
Can anybody help me with sample to store selected item from combobox and its corressponding values of all other columns into an object which i can send to db...?
Kindly help me in this regard.
Thanks,
Anand.

Hi!
Are you using a collection of VO or DTO as the dataprovider of the combobox component?
If so, have you created some attribute there to control the user's selection in the combobox?
For instance:
private var selected:Boolean = false;
If your solution fits this approach, you may create a new collection that contains just the objects that were selected by the user, it means you can loop through the datagrid's dataprovider and only insert in this new collection those objects that have the attribute "selected" set to true.
For instance:
private function getSelectedRecords(datagridDataProvider:ArrayCollection):ArrayCollection
    var newCollection:ArrayCollection = new ArrayCollection();
    for each (var item:Object in datagridDataProvider)
        if (item.selected)
            newCollection.addItem(item)
    return newCollection;
Afterwards, you may serialize this new collection with your back-end.
Hope it helps you!
Cheers,
@Pablo_Souza

Creating a common itemRenderer different data properties

Ok, first let me set the context. I creating a dashboard-like
table where each row represents an object, and the first column of
the table shows the name of the object and subsequent columns are
various dashboard compliance items.
[Name] [Prop A] [Prop B] [Prop C] [Prop D]
Item 1 {graphic) {graphic) {graphic) {graphic)
Item 2 {graphic) {graphic) {graphic) {graphic)
Item 3 {graphic) {graphic) {graphic) {graphic)
Each dashboard cell displays a different graphic based on
that property. There are 6 graphics, so the itemRenderer looks at
the data for that given property, and then translates the #0-#5
into a class reference for 1 of those 6 graphics using the Switch
method.
override public function set data(value:Object):void {
super.data = value;
switch(value.type) {
case 0:
img.source = scanFailed8;
break;
case 1:
img.source = needsScan8;
break;
etc...
So since the calculation is the same for all of these
properties, what I want to do is create a generic itemRenderer
where I can pass in the property name and then use that reference
in the Switch method. My problem is that the Switch method works
fine if it's:
switch(value.PropA)
But in need to set a public variable that can get passed in
to replace that value. I tried this as a string, and that clearly
failed. Can someone help me get through this issue? I really don't
want to have to maintain a separate item renderer for each
property. :)
Thanks.

OK, here it is in all it's infamy....
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
xmlns:mx="
http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IDropInListItemRenderer"
horizontalAlign="center" verticalAlign="middle"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
preinitialize="preinit()" creationComplete="init()">
<mx:states>
<mx:State name="long">
<mx:SetStyle name="horizontalAlign" value="left"/>
<mx:SetStyle name="paddingLeft" value="10"/>
</mx:State>
<mx:State name="short">
<mx:RemoveChild target="{theLabel}"/>
</mx:State>
</mx:states>

<mx:Script source="../Scripts/LoadIcons.as" />
<mx:Script>
<![CDATA[
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridListData;
import flash.events.Event;
[Bindable]
public var showLongFormat:Boolean;
//private var _listData:DataGridListData;
private var _listData:BaseListData;
// Make the listData property bindable.
[Bindable("dataChange")]
// Define the getter method for listData.
public function get listData():BaseListData {
return _listData;
// Define the setter method for listData
public function set listData(value:BaseListData):void {
_listData = value;
public function preinit():void {
// When data changes the handleDataChanged function is
called
addEventListener("dataChange", handleDataChanged);
public function handleDataChanged(event:Event):void {
// Cast listData to DataGridListData object.
var theListData:DataGridListData =
DataGridListData(listData);
// Access information about the data passed to the item
renderer
// and spit out the right image and text.
switch(theListData.label) {
case '0':
theIcon.source = scanFailed8;
theIcon.toolTip = theListData.dataField + ': Scan Failed';
theLabel.text = 'Scan Failed';
break;
case '1':
theIcon.source = needsScan8;
theIcon.toolTip = theListData.dataField + ': Needs
Scanning';
theLabel.text = 'Needs Scanning';
break;
case '2':
theIcon.source = scanning8;
theIcon.toolTip = theListData.dataField + ': Scanning';
theLabel.text = 'Scanning';
break;
case '3':
theIcon.source = noncompliant8;
theIcon.toolTip = theListData.dataField + ': Non-Compliant';
theLabel.text = 'Non-Compliant';
break;
case '4':
theIcon.source = partial8;
theIcon.toolTip = theListData.dataField + ': Partial
Compliance';
theLabel.text = 'Partial Compliance';
break;
case '5':
theIcon.source = compliant8;
theIcon.toolTip = theListData.dataField + ': Compliant';
theLabel.text = 'Compliant';
break;
default:
theIcon.source = notApplicable8;
theIcon.toolTip = 'Not Applicable';
break;
// Check to see if form is 'long' or 'short'
public function init():void {
if (showLongFormat == true) {
currentState='long';
}else{
currentState='short';
]]>
</mx:Script>
<mx:Image id="theIcon" />
<mx:Label id="theLabel" />
</mx:HBox>
That's a lot of code to just stick an image in a cell. Ok, I
guess it does a little more than that. ;-)

Using a custom itemrenderer in datagrid to update value in the same row but different column/cell

Here's what I have so far. I have one datagrid (dg1) with enable drag and another datagrid (dg2) with dropenabled. Column3 (col3) of dg2 also has a custom intemrenderer that's just a hslider.
When an item from dg1 is dropped on dg2, a custom popup appears that asks you to use the slider in the popup to set a stress level. Click ok and dg2 is populated with dg1's item as well as the value you selected from the popup window. I was also setting a sliderTemp variable that was bound to the itemrender slider to set it but that's obviously causing issues as well where all the itemrenderer sliders will change to the latest value and I don't want that.
What is needed from this setup is when you click ok from the popup window, the value you choose from the slider goes into dg2 (that's working) AND the intemrenderer slider needs to be set to that value as well. Then, if you used the intemrenderer slider you can change the numeric value in the adjacent column (col2).   I just dont know how to hook up the itemrenderer slider to correspond with that numeric value (thatds be in col2 on that row);
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                    xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.*" backgroundColor="#FFFFFF" creationComplete="init(event)"
                    xmlns:components="components.*" xmlns:local="*">
     <mx:Script>
          <![CDATA[
               import mx.binding.utils.ChangeWatcher;
               import mx.collections.ArrayCollection;
               import mx.controls.Alert;
               import mx.controls.TextInput;
               import mx.core.DragSource;
               import mx.core.IUIComponent;
               import mx.events.CloseEvent;
               import mx.events.DataGridEvent;
               import mx.events.DragEvent;
               import mx.events.FlexEvent;
               import mx.events.ListEvent;
               import mx.events.SliderEvent;
               import mx.events.SliderEventClickTarget;
               import mx.managers.DragManager;
               import mx.managers.PopUpManager;
               import mx.utils.ObjectUtil;
               [Bindable]private var myDP1:ArrayCollection;
               [Bindable]private var myDP2:ArrayCollection;
               [Bindable]public var temp:String;
               [Bindable]public var slideTemp:Number;
               private var win:Dialog;
               protected function init(event:FlexEvent):void{
                    myDP1 = new ArrayCollection([{col1:'Separation from friends and family due to deployment'},{col1:'Combat'},{col1:'Divorce'},{col1:'Marriage'},
                         {col1:'Loss of job'},{col1:'Death of a comrade'},{col1:'Retirement'},{col1:'Pregnancey'},
                         {col1:'Becoming a parent'},{col1:'Injury from an attack'},{col1:'Death of a loved one'},{col1:'Marital separation'},
                         {col1:'Unwanted sexual experience'},{col1:'Other personal injury or illness'}])
                    myDP2 = new ArrayCollection()
               protected function button1_clickHandler(event:MouseEvent):void
                    event.preventDefault();
                    if(txt.text != "")
                         Alert.yesLabel = "ok";
                         Alert.show("", "Enter Stress Level", 3, this,txtClickHandler);
               private function image_dragEnter(evt:DragEvent):void {
                    var obj:IUIComponent = IUIComponent(evt.currentTarget);
                    DragManager.acceptDragDrop(obj);
               private function image_dragDrop(evt:DragEvent):void {
                    var item:Object = dg2.selectedItem;
                    var idx:int = myDP2.getItemIndex(item);
                    myDP2.removeItemAt(idx);
               protected function dg1_changeHandler(event:ListEvent):void
                    temp=event.itemRenderer.data.col1;
               protected function dg2_dragDropHandler(event:DragEvent):void
                    event.preventDefault();
                    dg2.hideDropFeedback(event as DragEvent)
                    var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
                    win.btn.addEventListener(MouseEvent.CLICK, addIt);
                    PopUpManager.centerPopUp(win);
                    win.mySlide.addEventListener(Event.CHANGE, slideIt);
               private function txtClickHandler(event:CloseEvent):void {
                    trace("alert");
                    if (event.detail==Alert.YES){
                         myDP2.addItem({label:temp});
               private function addIt(event:MouseEvent):void{
                    myDP2.addItem({col1:temp, col2:slideTemp})
               private function slideIt(event:SliderEvent):void{
                    slideTemp = event.target.value;
          ]]>
     </mx:Script>
               <mx:Panel x="10" y="10" width="906" height="481" layout="absolute">
                    <mx:Image x="812" y="367" source="assets/woofie.png" width="64" height="64" dragDrop="image_dragDrop(event);" dragEnter="image_dragEnter(event);"/>
                    <mx:DataGrid x="14" y="81" width="307" height="251" dragEnabled="true" id="dg1" dataProvider="{myDP1}" wordWrap="true" variableRowHeight="true" change="dg1_changeHandler(event)">
                         <mx:columns>
                              <mx:DataGridColumn headerText="Examples of Life Events" dataField="col1"/>
                         </mx:columns>
                    </mx:DataGrid>
                    <mx:DataGrid x="329" y="81" height="351" width="475" dragEnabled="true" dropEnabled="true" id="dg2"
                                    wordWrap="true" variableRowHeight="true" dataProvider="{myDP2}" editable="true"
                                    dragDrop="dg2_dragDropHandler(event)" rowHeight="50" verticalGridLines="false" horizontalGridLines="true" >
                         <mx:columns>
                              <mx:DataGridColumn headerText="Stressor" dataField="col1" width="300" wordWrap="true" editable="false">
                              </mx:DataGridColumn>
                              <mx:DataGridColumn headerText="Stress Level" dataField="col2" width="82" editable="false"/>
                              <mx:DataGridColumn headerText="Indicator" dataField="col3" width="175" paddingLeft="0" paddingRight="0" wordWrap="true" editable="false">
                                   <mx:itemRenderer>
                                        <mx:Component>
                                             <components:Compslide/>
                                        </mx:Component>
                                   </mx:itemRenderer>
                              </mx:DataGridColumn>
                         </mx:columns>
                    </mx:DataGrid>
                    <mx:Text x="14" y="10" text="The first category of underlying stressors is called Life Events. The list includes both positive and negative changes that individuals experience. Both can be stressful. For example, becoming a parent is usually viewed as a positive thing, but it also involves many new responsibilities that can cause stress. " width="581" height="73" fontSize="12"/>
                    <mx:TextInput x="10" y="380" width="311" id="txt"/>
                    <mx:Text x="10" y="335" text="Add events to your list that are not represented in the example list. Type and click "Add to List"
" width="311" height="51" fontSize="12"/>
                    <mx:Button x="234" y="410" label="Add to List" click="button1_clickHandler(event)"/>
               </mx:Panel>
</mx:Application>

how do i go about doing that? do i put a change event function in the itemrenderer? and how would i eventually reference data.col2?

Problem with Checkbox ItemRenderer in a DataGrid

Hello Everyone,
I'm using a datagrid with two columns, which is used as a data entry grid. The first column has a simple text input field and the 2nd column has a checkbox as an itemrenderer. On creationComplete event, I'm passing an arraycollection as the dataprovider for this datagrid. The arraycollection:
<mx:ArrayCollection id="psAC">
        <mx:source>
            <mx:Array>
                <mx:Object PaText="line1" PaCheckbox="0" />
                <mx:Object PaText="line2" PaCheckbox="0" />
                <mx:Object PaText="line3" PaCheckbox="1" />
                <mx:Object PaText="line4" PaCheckbox="0" />
                <mx:Object PaText="line5" PaCheckbox="0" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
There is a datagrid (dGa) in the main application. On click of this, a pop up window comes up which has the same datagrid layout(i.e, 2 columns). And this is where the data is entered. Here, if the user checks the check box, I have assigned a value of '1' for the 2nd column of the arraycollection. THis code(below) works fine.
<datagrid in pop up window>
<mx:DataGridColumn headerText="Best Possible Action?" textAlign="center" width="200" editable="false">
                            <mx:itemRenderer>
                                <mx:Component>
                                   <mx:CheckBox>
                                        <mx:Script>
                                                <![CDATA[
                                                     override public function set data(value:Object):void{
                                                         if(value.PaCheckbox == 1){
                                                            this.selected = true;
                                                        }else{
                                                            this.selected = false;
                                                ]]>
                                            </mx:Script>
                                        
                                    </mx:CheckBox>
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>
But I would also need to set the PaCheckbox value to 0 or 1, based on teh check condition of the check box. I tried using change event (commented in the code above). But there I get an error: Cannot access a property or method of a null object reference. I checekd in debug mode, there the data object is null! Can you please help me on how to pass back the values(0 o 1) to my arraycollection, based on the checkbox's status?
Cheers,
Deepak

heyo,
I solved it.....
i was missing this line of code super.data = value; in the ovverriden function...Once we have this line, the data object will have teh field names and their values in it, which can be accessed on the change event...

Tables with more than one cell with a high number of rowspan (ej. 619). This cell can not be print in a page and it must be cut. But I don't know how indesign can do this action.

Tables with more than one cell with a high number of rowspan (ej. 619). This cell can not be print in a page and it must be cut. But I don’t know how indesign can do this action.

set the wake-on lan on the main computer
The laptop's too far away from the router to be connected by ethernet. It's all wifi.
No separate server app on the laptop, it's all samba
The files are on a windows laptop and a hard drive hooked up to the windows laptop. The windows share server is pants, so I'd need some sort of third party server running. Maybe you weren't suggesting to use Samba to connect to the windows share though?
I'm glad that you've all understood my ramblings and taken and interest, thanks The way I see it, I can't be the only netbook user these days looking for this kind of convenience, and I certainly won't be once chrome and moblin hit the market.
Last edited by saft (2010-03-18 20:38:08)

Passing data from an XML object to an itemRenderer

I'm trying to color the background of a column in a datagrid and have found a sample file that illustrate the concept. However, the sample has data stored in an arrayCollection whereas mine is in an XML object. The problem is that the data in the sample file is apparently automatically passed to the itemRenderer (shown below: note the trace statement). My XML object does not appear to automatically pass data to the itemRenderer. So my questions are:
1. Is there a simple way to pass data stored in an XML object to an itemRenderer
or
2. Should I convert my XML to an arrayCollection? If so, what's the best way to do this-- I've tried the following, but without success:
<mx:Model id="xmldata" source="example3.xml"/>
<mx:ArrayCollection id="myAC" source="{ArrayUtil.toArray(xmldata.Example1)}" />
Here's what the xml looks like:
<TABLE>
   <EXAMPLE1>
      <difficulty> 0.5 </difficulty>
      <discrimination> 0.7 </discrimination>
      <item> 3 </item>
   </EXAMPLE1>
</TABLE>
Here's the itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
    <![CDATA[
        import flash.geom.Matrix;
        import flash.display.GradientType;
        import flash.display.Graphics;
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            var m:Matrix = new Matrix();
            m.createGradientBox(unscaledWidth,unscaledHeight);
            var g:Graphics = graphics;
                        trace("data.col3="+data.col3)
            var colors:Array = (data.col3 < 2000 ? [0x0000CC,0x0000FF] : [0x00CC00,0x00FF00]);
            g.clear();
            g.beginGradientFill(GradientType.LINEAR, colors, [0.2,0.6], [0,255], m);
            // the rectangle is drawn a little high and a little tall to compensate for the gap
            // the DataGrid introduces between rows.
            g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
            g.endFill();
    ]]>
    </mx:Script>
</mx:Label>

This sample code should answer your question of how to bring data into the renderer automatically. It comes in via the DataGrid dataProvider and then you refer to it in the renderer as data.XYZ, where XYZ is the field in the XML with the data. See FB 3 help sys on e4x syntax.
------------------ mainapp.mxml --------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="srvc.send();">
<mx:Script>
    <![CDATA[
      import mx.rpc.events.ResultEvent;
      import mx.collections.XMLListCollection;
      [Bindable] private var xlc:XMLListCollection;
      private function dataHandler(evt:ResultEvent):void{
        xlc = new XMLListCollection(evt.result..EXAMPLE1 as XMLList);
    ]]>
</mx:Script>
<mx:HTTPService id="srvc" url="data2.xml" result="dataHandler(event)"
    resultFormat="e4x"/>
<mx:DataGrid dataProvider="{xlc}">
    <mx:columns>
      <mx:DataGridColumn headerText="Difficulty" dataField="difficulty"/>
      <mx:DataGridColumn headerText="Discrimination" dataField="discrimination"/>
      <mx:DataGridColumn headerText="Item" itemRenderer="MyLabel"/>
    </mx:columns>
</mx:DataGrid>
</mx:Application>
----------- MyLabel.mxml --------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
      import flash.geom.Matrix;
      import flash.display.GradientType;
      import flash.display.Graphics;
      override protected function updateDisplayList(unscaledWidth:Number,
        unscaledHeight:Number):void{
        super.updateDisplayList(unscaledWidth,unscaledHeight);
        this.text = data.col3;
        var m:Matrix = new Matrix();
        m.createGradientBox(unscaledWidth,unscaledHeight);
        var g:Graphics = graphics;
        var colors:Array = (data.col3 < 2000 ? [0x0000CC,0x0000FF] : [0x00CC00,0x00FF00]);
        g.clear();
        g.beginGradientFill(GradientType.LINEAR, colors, [0.2,0.6], [0,255], m);
        g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
        g.endFill();
    ]]>
</mx:Script>
</mx:Label>
------------ data2.xml ----------------
<?xml version="1.0" encoding="utf8"?>
<TABLE>
   <EXAMPLE1>
      <difficulty> 0.5 </difficulty>
      <discrimination> 0.7 </discrimination>
      <col3> 3 </col3>
   </EXAMPLE1>
</TABLE>

How to access variables declared in main mxml in itemrenderer files

Hi,
I have a main mxml which has a cutomRenderer that defines two
mxml components
namely raidobutton and textinput.
Now in this TextInput.as i need to access variable defined in
main mxml.
Please suggest a way.
Thanks,
Lucky

Lets say you have a public property in your application like
public var name:String = "John Smith";
to access this using an inline item renderer:
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:TextInput text={outerDocument.name} />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
To access variables of the applicaton you can use
Application.application.name (for example) to reference "global"
variables, so you might also use this technique. With an inline
item renderer, the outerDocument property will refer to the
component which contains the renderer.

Problem in accessing the itemRenderer dynamically

Hi,
     In my application i am using two AdvanceddataGrids. i am showing one datagrid at a time based on the user selection. I have provided the buttons to switch between the grids. These two datagrids are getting the data from XML. By default the data will be available for the first datagrid in XML. Once the user selects the second grid, i am using the HTTPService to fetch the data for that particular grid. (This HTTPService will pass this grid's id as QueryString to the same XML page, and the .Net will read these parameters to fetch the required data from the DB and will print the data in the XML format in the same page).
     Here, for the first datagrid, i have used the itemRenderer to show some images (in the datagrid) based on the data available in XML. And i have followed the same for the second grid also.
     But the probelm is, whenever the application starts runnning (on Creation complete of the application), i am not able to view the images for the first datagrid, since the data for the second datagrid is not available (i have defined the itemRenderer for the second dataGrid based on XML data).
     I have stored the itemRenderers for each datagrid as a separate component. Is there any way to add this itemRenderer component during the run time. (While the user clicks the button to view the second datagrid)?
     "(Second datagrid's) coloumnid.itemRenderer = mycomponent.mxml" (I have tried this code to access during selection of second datagrid. But it didn't work).
     Could someone help me on this?

When you say:
But the probelm is, whenever the application starts runnning (on Creation complete of the application), i am not able to view the images for the first datagrid, since the data for the second datagrid is not available (i have defined the itemRenderer for the second dataGrid based on XML data).
I don't understand. Why would the images in the first datagrid not be availabe because the data for the second grid is not available?
If certain data needs to be loaded for creationComplete, then ensure it is loaded.
Perhaps you can clarify these points as your scenario is not clear.

How to handle multiple selection in the Spark List control with checkbox as itemrenderer?

Hi All,
I am using checkbox as an ItemRenderer in spark list.
I have a query.
how to handle multiple selection in the Spark List control with checkbox as itemrenderer?
how to retrieve the selected item label?
Thank you in advance.

Hi there, I'll tweak your code a little bit to something like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical">
    <mx:Script>
        <![CDATA[
             import mx.events.ListEvent;
             import mx.controls.CheckBox;
           [Bindable]
           private var mySelectedIndexes:ArrayCollection=new ArrayCollection();
            private function onChange(e:ListEvent):void
               if(CheckBox(e.itemRenderer).selected){
                         mySelectedIndexes.addItem(e.rowIndex);
               }else{
                              mySelectedIndexes.removeItemAt(mySelectedIndexes.getItemIndex(e.rowIndex));
               chkList.selectedIndices=mySelectedIndexes.toArray();
        ]]>
    </mx:Script>
<mx:ArrayCollection id="collection">
        <mx:Object label="Test A"/>
        <mx:Object label="Test B"/>
        <mx:Object label="Test C"/>
        <mx:Object label="Test D"/>
        <mx:Object label="Test E"/>
        <mx:Object label="Test F"/>
        <mx:Object label="Test G"/>
    </mx:ArrayCollection>
<mx:List id="chkList" dataProvider="{collection}" itemRenderer="mx.controls.CheckBox" itemClick="onChange(event);" allowMultipleSelection="true"/>
</mx:Application>

How to include a button in report header like rowspan? &logfile generation?

I am really new to this form and I have some questions on the APEX HTML DB:
The project I need to work on is like this: Based on some criteria, I need to do a database lookup. Then in the result, I need to be able to edit the individual record. So far it is no problem. Here comes the part that I am not sure how to handle or if it can be handled.
1. We need to have the ability to copy down certain columns value to selected rows. Therefore, a "copy down" button needs to be included right under the column header cell. For example, based on certain criteria, the following product information is returned: product description, serial number, price, category etc. The “COPY DOWN” button needs to be listed right under the “serial number” table header and before the first row of the result, like “rowspan” in html table header. Once you click on “copy down”, the first rows’s serial number will be copied to all selected rows “serial number”. – Can a button be put right under a column header? If so, can I even reference the cell value in javascript?
2. Since we are doing the batch update, I need to have the ability to maintain a logfile to include date and time and what information is modified. – Can I generate a logfile from APEX HTML DB?
I am not sure APEX HTML DB is a good candidate for the above two tasks.
Your help is greatly appreciated.

Hi user572980,
Welcome to APEX... the more you'll do with it, the more you'll like it.
1) Are you using a Tabbed Form? Or are you in a report? I try to get a better idea what you're trying to do. Did you already have a look at the templates? You can have a template for the report for ex., in that you can adapt like you wish (in your case put a button under the column header).
You can also reference the cell values, but for that I should know where you're in (form, report). When you click right on the page and have a look at Page Source you see what item (reference) it is.
2) You can make a logfile yes. Are you using packages to do the batch update? In that you can make some code to store the history. In otherwords, out-of-the-box in APEX I don't think it exists, but with PLSQL you can do it (so also in APEX). For ex. the plsql package stores it in a history table and you built a report on top of that.
Dimitri

ItemRenderer rowSpan

Similar Messages

Maybe you are looking for