Datagrid ItemRenderer with LinkButton.

I have one of the columns in my DataGrid which needs to be a LinkButton. The actual data value is 0 or 1 but I want the LinkButton to be visible only if the data value is 1. The problem is that LinkButton is always visible. How can I selectively make it visible or invisible on different rows of DataGrid ? I tried making the visible attribute bound with the value of the flag but no success.
<mx:DataGridColumn itemRenderer="LinkButtonItemRenderer" dataField="flag" />
Following is the LinkButtonItemRenderer code.
<mx:LinkButton xmlns:mx="http://www.adobe.com/2006/mxml" visible="{data.flag == 1}" label="Click Me" />

Hi MoreGart,
You can try this...
<mx:LinkButton xmlns:mx="http://www.adobe.com/2006/mxml" render="(Number(data.flag) == 1)?(visible = true):(visible = false)" label="Click Me" />
Try this ans let me know...
Thanks,
Bhasker

Similar Messages

DataGrid itemrenderer with switch statement

Hi,
I have datagrid control with this columns
<mx:DataGrid id="dgvParagraphs" >
    <mx:columns>
        <mx:DataGridColumn dataField="type" headerText="Type"/>
        <mx:DataGridColumn dataField="title" headerText="Title"/>
        <mx:DataGridColumn dataField="content" visible="false"/>
    </mx:columns>
</mx:DataGrid>
Under type column I have values from 1 to 6. Each number presents type of content. I have icons for each type. I would like to show icon instead of just number. I know this can be done using itemrenderes but I don't know how to accomplish this.

If this post answers your question or helps, please mark it as such.
Greg Lafrance
www.ChikaraDev.com
Flex Development and Support Services
You might see issues with this code during scrolling, as DataGrid recycles itemRenderers, but in that case the icon information must be in the data.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
      public function getImageSource(item:Object):String{
        var retVal:String;
        switch(uint(item.type)){
          case 1:
            retVal = "black.png";
            break;
          case 2:
            retVal = "blue.png";
            break;
          case 3:
            retVal = "gray.png";
            break;
          case 4:
            retVal = "green.png";
            break;
          case 5:
            retVal = "purple.png";
            break;
          case 6:
            retVal = "red.png";
            break;
        trace(retVal);
        return retVal;
    ]]>
</mx:Script>
<mx:DataGrid id="dgvParagraphs" dataProvider="{dataXML..item}">
    <mx:columns>
      <mx:DataGridColumn dataField="type" headerText="Type" width="50">
        <mx:itemRenderer>
          <mx:Component>
            <mx:Image source="{outerDocument.getImageSource(data)}" horizontalAlign="center"/>
          </mx:Component>
        </mx:itemRenderer>
      </mx:DataGridColumn>
      <mx:DataGridColumn dataField="title" headerText="Title" width="100"/>
      <mx:DataGridColumn dataField="content" visible="false"/>
    </mx:columns>
</mx:DataGrid>
<mx:XML id="dataXML" xmlns="">
    <data>
      <item>
        <type>2</type>
        <title>My Title 1</title>
        <content>Content 1</content>
      </item>
      <item>
        <type>5</type>
        <title>My Title 2</title>
        <content>Content 2</content>
      </item>
      <item>
        <type>3</type>
        <title>My Title 3</title>
        <content>Content 3</content>
      </item>
      <item>
        <type>1</type>
        <title>My Title 4</title>
        <content>Content 4</content>
      </item>
      <item>
        <type>4</type>
        <title>My Title 5</title>
        <content>Content 5</content>
      </item>
      <item>
        <type>6</type>
        <title>My Title 6</title>
        <content>Content 6</content>
      </item>
      <item>
        <type>2</type>
        <title>My Title 7</title>
        <content>Content 7</content>
      </item>
      <item>
        <type>1</type>
        <title>My Title 8</title>
        <content>Content 8</content>
      </item>
      <item>
        <type>4</type>
        <title>My Title 9</title>
        <content>Content 9</content>
      </item>
      <item>
        <type>5</type>
        <title>My Title 10</title>
        <content>Content 10</content>
      </item>
      <item>
        <type>2</type>
        <title>My Title 11</title>
        <content>Content 11</content>
      </item>
    </data>
</mx:XML>
</mx:Application>

Problem with Datagrid itemrenderer with a Datagrid

Hi all,
I have this kind of a structure. I try to use a datagrid item renderer in a data grid column. However when I try to move rows inside the same datagrid I experience a problem. When my datagrid loads first it seems correct, but when I drag and drop a row in the same datagrid inner datagrids start to be drew in wrong rows. I checked the DB but there are no mistakes in DB records. Problem is with rendering. I suppose inner datagrids trying to draw to early or datagrid component is trying to reuse the itemrenderer. I could not find any solutions for that. Any help will be greatly appreciated..
<mx:DataGridColumn width="130" editable="false"
          headerText="{resourceManager.getString('resources', 'acl.content')}">
          <mx:itemRenderer>
               <mx:Component>
                    <ACLInnerDataGrid rowCount="3"     dragEnabled="true"     dropEnabled="false"
                    x="0" y="0"     editable="true" dragInitiatorId="catGrid"
                    filterGroupName="content" remoteDestination="zend"
                    remoteSource="ACLFilterParamService" showHeaders="false"
                    creationComplete="this.init();">
                         <columns>
                              <mx:DataGridColumn dataField="id" editable="false" visible="false"/>
                              <mx:DataGridColumn dataField="ruleId" editable="false" visible="false"/>
                              <mx:DataGridColumn dataField="filterKey" editable="false" visible="false"/>
                              <mx:DataGridColumn dataField="param" editable="false" visible="false"/>
                              <mx:DataGridColumn dataField="name" editable="true"/>
                         </columns>
                    </ACLInnerDataGrid>
               </mx:Component>
          </mx:itemRenderer>
</mx:DataGridColumn>
Thanks in advance.

I have attached the item renderer component source code.

Flex datagrid itemRenderer with different states

Hi,
I have a datagrid with allowMultipleSelection="true" & itemRenderer as my custom component. The custom component have 2 states "NORMAL" & "EXPANDED".
Now on row selection the renderer should change its state from NORMAL to EXPANDED state. And if I am selecting multiple rows then all the selected rows should be in EXPANDED state.
As soon as the selection goes the renderer should retain its NORMAL state.
I am stuck. Please help me out.
Thanks in advance.

Use itemclick property of grid and it passes ListEvent to the method given for itemclick. use selectedindices or selectedcells property in grid to find which are selected and change the states for the renderers of selected rows. U can get the renderer for the current selected row using event.itemRenderer property. Hope this helps.

Move focus from one to another itemRenderer inside DataGrid itemRenderer

I have a mx: DataGrid with 4 columns that have a itemRenderer with the following settings:
- Mx:DataGrid:
<code>
<mx:DataGrid id="itensPedidoCompraList"
      width="100%"
height="120"
dataProvider="{ model.pedidoCompra.itens }"
editable="true"
itemEditEnd="itensPedidoCompraList_itemEditEndHandler(event)">
</code>
- Mx:DataGridColumn:
<code>
<mx:DataGridColumn headerText="{resourceManager.getString('cadastroPedidoCompra', 'ident.PercentualDesconto') }"
                   width="60"
                   textAlign="right"
                   rendererIsEditor="true"
                                      editorDataField="data">
      <mx:itemRenderer>
                 <fx:Component>
                       <mx:Canvas>
                                 <input:NumberInput width="55"                                                                number="@{ data.percentualDesconto }"/>
                       </mx:Canvas>
            </fx:Component>
      </mx:itemRenderer>
</mx:DataGridColumn>
</code>
The user clicks on the line of the grid and click on the column to edit.
After him change or add value, ENTER key and have to move the focus to another column in the same line.
The way I'm doing, is moving to the column below.
What is the best way to do to move to the right column?
thank you

Try adding a capture phase event listener to DataGrid for keyDown and changing the key from ENTER to TAB

Datagrid itemRenderer dynamic values

While working on an application I came across the following
problem. I've got a view with a datagrid, where I have several
columns. Each column needs 2 values displayed beneath each other in
one cell. You make an itemRenderer with 2 labels inside a VBox.
Easy so far. However since this scenario repeats several times it
seems counterproductive to make an itemRenderer for each cell. How
can I make the text property for the labels change for each cell
instead of being static in their values.
Thx in advance.

Your description of your requirements and your sample code do
not paint a clear enough picture.
Your dataProvider has 4 pieces of data: batchId,
bookingNumber, valueDate, immsBranch. Your current itemRenderer
references two of those pieces of data, and you say you want to
reference the other two. You can do that easily like this:
<mx:Label text="data.valueDate"/>
<mx:Label text="data.immsBranch"/>
A basic question: will your DataGrid have two rows for each
set of 4 pieces of data? If so then I understand your problem. If
not, then you must clarify exactly how and when you would like the
4 pieces of data shown in your DataGrid.
In any case, you probably need a Repeater, and then need to
figure out how to get at the right data at the right time in the
Repeater.
See this FB 3 help topic and its sub-topics:
Dynamically Repeating Controls and Containers
Also search for this in the FB3 help to see the API:
mx.core.Repeater
You can define a listener for the Repeater for the Repeat
event to specify processing for each iteration of the
repeater.

DataGrid - ItemRenderer - WordWrap

I have added an itemrenderer to a datagrid to change the
color of individual rows based on the value of of a cell. However,
the problem I am having is this. The word-wrap no longer works for
the datagrid. I imagine this is because I use a lable in my
itemrenderer. I have not been able to find just a good solution
that makes the cells look just like the normal datagrid, but with
different colors.
Any suggestions would be greatly appreciated.
Enclosed is the itemrenderer
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="
http://www.adobe.com/2006/mxml"
>
<mx:Script>
<![CDATA[
import mx.controls.listClasses.ListData;
import com.vo.HistoryDataValueObject;
import com.model.Model;
override protected function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
super.updateDisplayList(unscaledWidth,unscaledHeight);
if (data != null && (data is HistoryDataValueObject)
if (data.monetaryAmount.indexOf("-",0) ==
data.monetaryAmount.length-1 )
setStyle("color", 0xFF0000);
else
setStyle("color", 0x000000);
]]>
</mx:Script>
</mx:Label>

I have added an itemrenderer to a datagrid to change the
color of individual rows based on the value of of a cell. However,
the problem I am having is this. The word-wrap no longer works for
the datagrid. I imagine this is because I use a lable in my
itemrenderer. I have not been able to find just a good solution
that makes the cells look just like the normal datagrid, but with
different colors.
Any suggestions would be greatly appreciated.
Enclosed is the itemrenderer
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="
http://www.adobe.com/2006/mxml"
>
<mx:Script>
<![CDATA[
import mx.controls.listClasses.ListData;
import com.vo.HistoryDataValueObject;
import com.model.Model;
override protected function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
super.updateDisplayList(unscaledWidth,unscaledHeight);
if (data != null && (data is HistoryDataValueObject)
if (data.monetaryAmount.indexOf("-",0) ==
data.monetaryAmount.length-1 )
setStyle("color", 0xFF0000);
else
setStyle("color", 0x000000);
]]>
</mx:Script>
</mx:Label>

Calculate accurate datagrid height with variableRowHeight and without any empty row

hi ,
how can i calculate accurate datagrid height with variableRowHeight="true" and without getting any empty row.
Currently i am calculating datagrid height on updateComplete event of datagrid as follows:
public function onUpdateComplete() : void
this.datagrid.headerHeight=50;
datagrid.height= datagrid.measureHeightOfItems(0, this.datagrid.dataprovider.length)+this.datagrid.headerHeight;
with following datagrid properties:
<mx:DataGrid
dataProvider="{dataArrayCollection}" width="100%" rowCount="{dataArrayCollection.length}"
id="datagrid" updateComplete="onUpdateComplete()" paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0"
fontSize="12" wordWrap="true" variableRowHeight="true" verticalScrollPolicy="off" >
With this approach the issue is, i am getting scrollbar on datagrid's container. I want scrollbar for datagrid instead of its container so that i can have only rows to be scrollable and not the header. Also, if i set verticalScrollPolicy of datagrid as "auto", i get empty rows.
So,is there any way to have datagrid with following properties:
variable row height
no empty rows
word wrap for headers as well as for rows
Scrollbar for grid i.e. header should remain fix ,only rows should be scrollable
no horizontal scrollbar
TIA

http://blogs.adobe.com/aharui/2010/10/mx-datagrid-list-and-variablerowheight
.html

TabIndex in DataGrid ItemRenderer Component

How to implement tabindex for the DataGrid ItemRenderer
Component?Any
idea Please.

"ravi_bharathii" <[email protected]> wrote
in message
news:gbv9ps$k6r$[email protected]..
> How to implement tabindex for the DataGrid ItemRenderer
Component?Any
> idea Please.
Is this what you wanted?
http://blogs.adobe.com/aharui/2008/08/datagrid_itemeditor_with_two_i.html

Custom ItemRenderer with dynamic field associations?

Hi All,
I'm trying to create a custom itemrender control that isn't tied to a specific type of data input. I'm creating a thumbnail itemrenderer to be used with the Sparks List control:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer
xmlns:fx="
http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/mx" autoDrawBackground="
true"
>
<s:layout>
<s:BasicLayout/>
</s:layout>
<mx:Image left="
5" right="
5" bottom="
25" top="
5" id="
img_thumbnail"source="
{data.image}"
/>
<s:Label
left="
5" right="
5" bottom="
5" verticalAlign="
middle" textAlign="
center" id="
lbl_label" fontWeight="
bold" fontSize="
10"text="
{data.label}"
/></s:ItemRenderer>
However, as you can see, the image source and label text properties are tied to specific fields in the data collection (image and label). I would like to provide a way to figure out what the label and icon fields are set to in the parent control, and set them accordingly in the itemrenderer. This should allow me to use the same itemrenderer with different objects, as long as they have a text and image property.
Any ideas? Thanks

After doing some research, I found my answer:
1) The data object is the current item which the List component is populated with. You can access any properties of the object using it. (Not what I'm looking for here.)
2) You can access the label property set by the labelField or labelFunction properties of the list control in the item renderer simply using this.label. This is exactly what I was looking for.

Datagrid with LinkButton/Hyperlink for DataGridColumn(simple one)...

Hi All,
   I'm having below code
   <mx:Script>
     [Bindable]
             public var mySourceDataProvider:Array = new Array({isRowSelected: false, name:'Name1', age:10, comment:'Comment1'},
                         {isRowSelected: false, name:'Name2', age:20, comment:'Comment2'},
                         {isRowSelected: false, name:'Name3', age:30, comment:'Comment3'},
                         {isRowSelected: false, name:'Name4', age:40, comment:'Comment4'});
   </mx:Script>
   <mx:DataGrid id="mySourceDataGrid" dataProvider="{mySourceDataProvider}" headerRelease="headRelEvt(event);" x="54" y="65" width="365">
             <mx:columns>
                     <mx:DataGridColumn sortable="false">
                             <mx:headerRenderer >
                                 <mx:Component>
                                     <mx:HBox horizontalAlign="center" verticalAlign="middle">
                                         <mx:CheckBox selected="{outerDocument.check_flg}" click="outerDocument.headerCheckBoxSelection(event);"/>
                                     </mx:HBox>
                                 </mx:Component>
                              </mx:headerRenderer>
                             <mx:itemRenderer>
                                     <mx:Component>
                                             <mx:VBox horizontalAlign="center" verticalAlign="middle">
                                                     <mx:CheckBox id="source"
                                                         selected="{data.isRowSelected}"
                                                         click="outerDocument.updateSelectedRowFlag(event);"/>
                                             </mx:VBox>
                                     </mx:Component>
                             </mx:itemRenderer>
                     </mx:DataGridColumn>
                     <mx:DataGridColumn dataField="name"/>
                     <mx:DataGridColumn dataField="age"/>
                     <mx:DataGridColumn dataField="comment"/>
             </mx:columns>
</mx:DataGrid>
   The grid is showing correctly with data and it is working fine. Now I need to have hyperlink/linkbutton on name column displayed in DataGrid. When I press this link/button it should navigate to different page(.mxml)...
    Can someone please let me know how to do this?
    Thanks in advance.
Regards,
sharath.

I'm able to solve this problem but having question on setting style on linkbutton. Linkbutton style is not working
<mx:DataGridColumn editable="false" textAlign="center" id="dgCol_buttons" >
                        <mx:itemRenderer>
                            <mx:Component>
                            <mx:LinkButton styleName="htmlLink" label="{data.name}" toolTip="Accept WorkOrder"/>
                            </mx:Component>
                        </mx:itemRenderer>
</mx:DataGridColumn>
<mx:Style>
       .htmlLink        {
            fontSize: 12;
            fontWeight: normal;
            text-decoration:underline;
</mx:Style>
text-decoration is defined as underline but it is not showing underline for linkbutton column.
Can you please advice, how to solve this problem.

Datagrid Column with complex itemRenderer / itemEditor

I have a datagrid with a custom component used as an itemRenderer / editor. The component has two view states (default is simply the text of my data and the second state contains my editor fields). I have is set up so that when an individual double-clicks on the cell of my datagrid the renderer changes view states to the editor view. This view contains a dateSelector component and two numeric stepper components that reflect a date (dateSelector) and the hour and minute in the two steppers. The problem I have is that I'm trying to control the view state based on when the user clicks outside of the editor. When the user is done editing the applicable field(s), I want the viewstate to change back to simply the text-view state and remove the editors.
I had this working except that whenever a user changed focus from say the dateSelector to one of the numeric steppers the view state changed prematurely. The editor view should stay in view until the datagrid cell loses focus. Any ideas???

Hi Alex,
thanks for the response. I've looked at your example with the two text fields and can't seem to find a way to implement the same idea in my project. When the DG loads I don't want the editable fields to be displayed. I just want the user to see the text values. When the user double-clicks, I want the renderer to change to an editor and allow the user to make the necessary changes. I'm trying to switch view states within the renderer/editor to make this happen but can't seem to get the editor to switch back to a renderer when the cell in the DG loses focus. That's when I would like the switch to occur and not before. What happens now is that whenever one of the editable components loses focus the editor automatically switches back to a renderer and doesn't allow the user to navigate to any of the other editable components without double-clicking again. My editor uses a date selector and two numeric steppers. Any ideas? I'm still learing Flex and AS 3 so any help is greatly appreciated!! BTW... great blog.
Bill

Datagrid itemrenderer list rowcount not changing with data

I have a datagrid with an itemrenderer. the itemrenderer is a list component. I populate the list with different values for each datagrid row. this works fine. However, I want the list to reset the rowcount for each datagrid row. This is not happening. if the first datagrid row list box is 3 rows every list box in that column is 3 rows no matter what i do. here's my code:
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml" rowCount="1">
<mx:Script>
<![CDATA[
   import mx.utils.ObjectProxy;
   import mx.collections.ArrayCollection;
   import mx.utils.ArrayUtil;
   [Bindable] private var arr:Array;
   override public function set data( value:Object ) : void
    super.data = value;
    if(value != null && value.MEET is ArrayCollection)
     var len:Number = value.MEET.length;
     arr = new Array();
     for each (var obj:ObjectProxy in value.MEET){
      arr.push(obj.DAYS);
     this.dataProvider = arr;
     //labelField = "DAYS";
     this.rowCount = len;
    else if (value != null && value.MEET is ObjectProxy )
     this.rowCount = 1;
     this.dataProvider = value.MEET;
     this.labelField = "DAYS";
    else
     this.rowCount = 1;
]]>
</mx:Script>
</mx:List>

Hello !
This trick makes my application freeze...
I've just an advancedDatagrid populated with arrays, and a list as renderer on some of its columns... I've got exactly the same problem (rowCount that is always the same, for all of my renderers instances), but your solution doesn't work it out...
Any idea ?
thanks a lot

Enable disable linkbar links in datagrid itemrenderer.

Hi All,
I have to show the linkbar in datagrid column as a renderer and enable and disable the links according to attached documents codes.
here are my sample code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable]
          public var arrColl:ArrayCollection = new ArrayCollection();
          public function init():void{
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
              arrColl.addItem(["1,2,3","1,2"]);
              arrColl.addItem(["1,2,3", "1,3"]);
    ]]>
</mx:Script>
    <mx:DataGrid id="dg" dataProvider="{arrColl}" width="200" height="500" x="510" y="168" >
        <mx:columns>
            <mx:DataGridColumn itemRenderer="assets.components.linkbarItemRenderer" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>
My item renderer linkbarItemRenderer.mxml as
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="init();" >
<mx:Script>
    <![CDATA[
        import mx.controls.LinkButton;
        import mx.collections.ArrayCollection;
        import mx.controls.Alert;
        [Bindable] public var arrColl : ArrayCollection = new ArrayCollection();
        public var arrDocType : ArrayCollection = new ArrayCollection([{data:"1" , label:"AP"},{data:"2" , label:"AR"},{data:"3" , label:"BOL"}]);
        public var attDoccodes : Array;
        public function init():void
            try
                var requiredDoc :String = data[0];
                var attachDoc : String = data[1];
                var reqDocCodes :Array = requiredDoc.split(",");
                attDoccodes = attachDoc.split(",");
                if(reqDocCodes != null)
                    //add the links of required documents.
                    for(var i:int = 0 ; i<reqDocCodes.length; i++ )
                        var obj:Object = new Object();
                        for(var j : int = 0; j < arrDocType.length; j++)
                            if(arrDocType.getItemAt(j).data == reqDocCodes[i])
                                obj.label = arrDocType.getItemAt(j).label;
                                obj.data = reqDocCodes[i];
                        arrColl.addItem(obj);
                callLater(enableDisalbeLinks);
            catch(error:Error)
                Alert.show("error ::"+error.getStackTrace());
        public function enableDisalbeLinks():void
            try
                //disable all links first
                for(var q:int=0; q< arrColl.length; q++)
                    LinkButton(linkBarId.getChildAt(q)).enabled = false;
                if(attDoccodes != null)
                    for(var k:int = 0; k<attDoccodes.length; k++)
                        for(var l:int = 0 ; l<arrColl.length; l++)
                            if(arrColl.getItemAt(l).data == attDoccodes[k])
                                LinkButton(linkBarId.getChildAt(l)).enabled = true;
            catch(error:Error)
                Alert.show("error ::"+error.getStackTrace());
    ]]>
</mx:Script>
        <mx:LinkBar id="linkBarId" dataProvider="{arrColl}" />
</mx:HBox>
It renderes the link in correct form in datagrid first time.when i scroll the datagrid the rows are miss up with each other and links are not shown propers in enable/disable format.
Thanks,
Amol.

Hi All,
It was my fault. Got it work now.
When I redirect to PR, it also calls my page initialization method and clear all data. I added a parameter and issue resolved.
Thanks & Regards,
KJ

Using a DropDownList in a DataGrid, both with dynamically loaded content

I just bought FlashBuilder 4.5 and even though I have been using ActionScript for years, I am having the hardest time to solve a seemingly simple task:
I have a database table with names of employees:
id
name
departmentid
1
Janet Jackson
2
2
Frank Zappa
2
3
John Travolta
1
in another table I have the departments
id
Department
1
Acting Department
2
Music Department
What I want is a DataGrid with a DropDownList itemRenderer for the Department so that I can selected the Department by name and not by id. This should be a no-brainer (and with HTML and PHP I have done that hundreds of times), but with Flex I can not figure out how to do this. This is what I have done so far:
Created the DataGrid, generated the database service and dragged it to the datagrid to bind the data. Works.
Then I created an itemRenderer for departmentid
In the department itemRenderer I dragged a DropDownList element, created a database service for the departments and dragged it onto that to get the databinding.
So far, so good. When I start it, I have a populated datagrid with a DropDownList that shows all available departments when I click on it.
What I need, of course, is that the Department DropDownList now shows the Department of the Employee row. When I change the Department in the DropDownList, it should update the Employee Database table.
I literally spend now days on trying to figure this out and can't find anything on the Internet that would help me. If you could give me some advise or even show me how the code needs to look, it would be GREATLY appreciated.
I am pasting here also the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:employeeservice="services.employeeservice.*"
                  width="982" height="380" minWidth="955" minHeight="600">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
                    getAllEmployeeResult.token = employeeService.getAllEmployee();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllEmployeeResult"/>
          <employeeservice:EmployeeService id="employeeService"
                                                   fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                   showBusyCursor="true"/>
          
     </fx:Declarations>
     <s:DataGrid id="dataGrid" x="52" y="67" width="455"
                    creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
                    requestedRowCount="4">
          <s:columns>
               <s:ArrayList>
                    <s:GridColumn dataField="id" headerText="id"></s:GridColumn>
                    <s:GridColumn dataField="firstname" headerText="firstname"></s:GridColumn>
                    <s:GridColumn dataField="lastname" headerText="lastname"></s:GridColumn>
                    <s:GridColumn dataField="departmentid" editable="false" headerText="departmentid"
                                     itemRenderer="components.DepartmentDropDownList"></s:GridColumn>
               </s:ArrayList>
          </s:columns>
          <s:typicalItem>
               <fx:Object id="id1" departmentid="departmentid1" firstname="firstname1"
                            lastname="lastname1"></fx:Object>
          </s:typicalItem>
          <s:AsyncListView list="{getAllEmployeeResult.lastResult}"/>
     </s:DataGrid>
</s:Application>
Here the code of the itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer 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:departmentservice="services.departmentservice.*"
                         width="172" height="34" clipAndEnableScrolling="true">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               override public function prepare(hasBeenRecycled:Boolean):void {
                    lblData.text = data[column.dataField]
               protected function dropDownList_creationCompleteHandler(event:FlexEvent):void
                    getAllDepartmentResult.token = departmentService.getAllDepartment();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllDepartmentResult"/>
          <departmentservice:DepartmentService id="departmentService"
                                                        fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                        showBusyCursor="true"/>
     </fx:Declarations>
     <s:Label id="lblData" top="9" left="7"/>
     <s:DropDownList id="dropDownList" x="34" y="5" width="128"
                         creationComplete="dropDownList_creationCompleteHandler(event)"
                         labelField="department">
          <s:AsyncListView list="{getAllDepartmentResult.lastResult}"/>
     </s:DropDownList>
</s:GridItemRenderer>

I just bought FlashBuilder 4.5 and even though I have been using ActionScript for years, I am having the hardest time to solve a seemingly simple task:
I have a database table with names of employees:
id
name
departmentid
1
Janet Jackson
2
2
Frank Zappa
2
3
John Travolta
1
in another table I have the departments
id
Department
1
Acting Department
2
Music Department
What I want is a DataGrid with a DropDownList itemRenderer for the Department so that I can selected the Department by name and not by id. This should be a no-brainer (and with HTML and PHP I have done that hundreds of times), but with Flex I can not figure out how to do this. This is what I have done so far:
Created the DataGrid, generated the database service and dragged it to the datagrid to bind the data. Works.
Then I created an itemRenderer for departmentid
In the department itemRenderer I dragged a DropDownList element, created a database service for the departments and dragged it onto that to get the databinding.
So far, so good. When I start it, I have a populated datagrid with a DropDownList that shows all available departments when I click on it.
What I need, of course, is that the Department DropDownList now shows the Department of the Employee row. When I change the Department in the DropDownList, it should update the Employee Database table.
I literally spend now days on trying to figure this out and can't find anything on the Internet that would help me. If you could give me some advise or even show me how the code needs to look, it would be GREATLY appreciated.
I am pasting here also the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:employeeservice="services.employeeservice.*"
                  width="982" height="380" minWidth="955" minHeight="600">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
                    getAllEmployeeResult.token = employeeService.getAllEmployee();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllEmployeeResult"/>
          <employeeservice:EmployeeService id="employeeService"
                                                   fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                   showBusyCursor="true"/>
          
     </fx:Declarations>
     <s:DataGrid id="dataGrid" x="52" y="67" width="455"
                    creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
                    requestedRowCount="4">
          <s:columns>
               <s:ArrayList>
                    <s:GridColumn dataField="id" headerText="id"></s:GridColumn>
                    <s:GridColumn dataField="firstname" headerText="firstname"></s:GridColumn>
                    <s:GridColumn dataField="lastname" headerText="lastname"></s:GridColumn>
                    <s:GridColumn dataField="departmentid" editable="false" headerText="departmentid"
                                     itemRenderer="components.DepartmentDropDownList"></s:GridColumn>
               </s:ArrayList>
          </s:columns>
          <s:typicalItem>
               <fx:Object id="id1" departmentid="departmentid1" firstname="firstname1"
                            lastname="lastname1"></fx:Object>
          </s:typicalItem>
          <s:AsyncListView list="{getAllEmployeeResult.lastResult}"/>
     </s:DataGrid>
</s:Application>
Here the code of the itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer 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:departmentservice="services.departmentservice.*"
                         width="172" height="34" clipAndEnableScrolling="true">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               override public function prepare(hasBeenRecycled:Boolean):void {
                    lblData.text = data[column.dataField]
               protected function dropDownList_creationCompleteHandler(event:FlexEvent):void
                    getAllDepartmentResult.token = departmentService.getAllDepartment();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllDepartmentResult"/>
          <departmentservice:DepartmentService id="departmentService"
                                                        fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                        showBusyCursor="true"/>
     </fx:Declarations>
     <s:Label id="lblData" top="9" left="7"/>
     <s:DropDownList id="dropDownList" x="34" y="5" width="128"
                         creationComplete="dropDownList_creationCompleteHandler(event)"
                         labelField="department">
          <s:AsyncListView list="{getAllDepartmentResult.lastResult}"/>
     </s:DropDownList>
</s:GridItemRenderer>

Datagrid ItemRenderer with LinkButton.

Similar Messages

Maybe you are looking for