4 Replies Latest reply on Apr 24, 2009 5:34 AM by m_hartnett

    Using Item Renderers in Data Grid Controls

      Hi,

       

      I created a Flex Project with a Data Grid Control. While adding a Column to the data grid, i wanted to add a Link Button as an editor to the column so i could perform some operation on the click.

       

      I created a Component file for item rendering with the component as Link Button. All the things run fine but i am not able to display the Label of the Link Button, thus the column with link button remain blank. Even i am able to perform the operation on the click but the text is not displayed.

       

      I tried searching for some solutions but could not find any solution after implementating many.

       

      I am attaching the Source MXML files so that you can check if i have coded correclty.

       

      Let me know if you have some solution to this problem.

       

      Thanks and Kind Regards,

      Gaurav.

        • 1. Re: Using Item Renderers in Data Grid Controls
          m_hartnett Level 3

          You should cut and paste your code in the question.

          For some reason all the attachments are 'queued' and cannot be viewed.

          • 2. Re: Using Item Renderers in Data Grid Controls
            Gregory Lafrance Level 6

            This code might provide some insight:

             

            <?xml version="1.0"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
              <mx:ArrayCollection id="ac">
                <mx:Object>
                  <mx:Site>Google</mx:Site>
                  <mx:MyLink>http://www.google.com</mx:MyLink>
                </mx:Object>
                <mx:Object>
                  <mx:Site>Yahoo</mx:Site>
                  <mx:MyLink>http://www.yahoo.com</mx:MyLink>
                </mx:Object>
                <mx:Object>
                  <mx:Site>Adobe</mx:Site>
                  <mx:MyLink>http://www.adobe.com</mx:MyLink>
                </mx:Object>
              </mx:ArrayCollection>
              <mx:DataGrid dataProvider="{ac}">
                <mx:columns>
                  <mx:DataGridColumn dataField="Site" width="100"/>
                  <mx:DataGridColumn dataField="MyLink" width="200">
                    <mx:itemRenderer>
                      <mx:Component>
                        <mx:LinkButton label="{data.MyLink}" click="navigateToURL(new URLRequest(data.MyLink), '_blank')"/>
                      </mx:Component>
                    </mx:itemRenderer>
                  </mx:DataGridColumn>
                </mx:columns>
              </mx:DataGrid>
            </mx:Application>

            • 3. Re: Using Item Renderers in Data Grid Controls
              Level 1

              Hi,

              The Code for Main MXML File is

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

              <?xml version="1.0" encoding="utf-8"?>

              <mx:Application

               

               

              xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical

              "

              width="

               

              100%" height="100%" initialize="initApp()" backgroundColor="#eaf1f6

              "

              backgroundGradientAlphas="

               

              1.0,1.0"

              >

               

               

               

              <mx:Script>

              <![CDATA[

               

               

              import

              mx.controls.dataGridClasses.DataGridListData;

               

               

              import

              mx.controls.LinkButton;

               

               

               

              import

              mx.rpc.soap.SOAPFault;

               

               

              import

              sap.FlashIsland;

               

               

              import

              mx.collections.ArrayCollection;

               

               

              import

              mx.graphics.IFill;

               

               

              import

              mx.graphics.SolidColor;

               

               

              import

              mx.controls.Alert;

               

               

              import

              mx.core.ClassFactory;

               

              [

               

              Bindable

              ]

               

               

              public var

              dataSource:ArrayCollection;

              [

               

              Bindable

              ]

               

               

              public var

              col1:String;

              [

               

              Bindable

              ]

               

               

              public var

              col2:String;

              [

               

              Bindable

              ]

               

               

              public var

              col3:String;

               

              [

               

              Bindable

              ]

               

               

              public var

              riskTitle:String;

               

              [

               

              Bindable

              ]

               

               

              public var

              orgunitTitle:String;

               

              [

               

              Bindable

              ]

               

               

              public var

              activityTitle:String;

               

              [

               

              Bindable

              ]

               

               

              public var

              linkButton:IFactory;

               

               

               

               

              public function initApp():

              void

              {

              FlashIsland.register(

               

              this

              );

              FlashIsland.addEventListener(FlashIsland.EVENT_END_UPDATE_DATASOURCES, updateDone);

              }

               

               

               

              public function updateDone():

              void

              {

              Alert.show(dataSource.length.toString());

              }

               

               

               

              public function filterOrgunit():

              void

              {

              FlashIsland.storeProperty(

               

              this,"orgunitTitle"

              ,orgunit.text);

              FlashIsland.fireEvent(

               

              this,"filterOrgunit"

              );

              }

               

              ]]>

               

               

              </mx:Script>

               

               

               

              <mx:Form

              >

               

               

              <mx:FormItem label="Organization" fontWeight="bold"

              >

               

               

              <mx:TextInput id="orgunit" text="{orgunitTitle}" change="filterOrgunit()"

              />

               

               

              <mx:Button id="click" label="Filter" click="filterOrgunit()"

              />

               

               

              </mx:FormItem>

               

               

               

              </mx:Form>

               

               

               

              <mx:DataGrid width="803" height="198" id="table1" dataProvider="{dataSource}"

              >

               

               

              <mx:columns>

               

               

              <mx:DataGridColumn headerText="Risk Id" dataField="riskid" visible="false"

              />

               

               

              <mx:DataGridColumn headerText="Risk Title" dataField="{col1}" fontWeight="bold

              "

              itemRenderer="

               

              DGListRenderer"

              />

               

               

              <mx:DataGridColumn headerText="Organization" dataField="{col2}"

              />

               

               

              <mx:DataGridColumn headerText="Activity" dataField="{col3}"

              />

               

               

              </mx:columns>

               

               

              </mx:DataGrid>

               

               

              </mx:Application>

               

              And for the renderer file DGListRenderer is

               

               

               

               

               

               

               

               

               

               

               

               

              <?xml version="1.0" encoding="utf-8"?>

              <mx:LinkButton

               

               

              xmlns:mx="http://www.adobe.com/2006/mxml

              " click="clickRisk()"

              label="

               

              {data.col1}"

              >

               

               

              <mx:Script

              >

              <![CDATA[

               

               

              import

              mx.core.Application;

               

               

              import

              mx.collections.ArrayCollection;

               

               

              import

              sap.FlashIsland;

               

               

              import

              mx.controls.dataGridClasses.DataGridListData;

               

               

               

              public function clickRisk():

              void

              {

              FlashIsland.setLeadSelection(

               

              this

              , Application.application.dataSource, Application.application.table1.selectedItem);

              FlashIsland.fireEvent(

               

              this, 'clickRisk'

              );

              Application.application.table1.selectedItem.setFocus();

              }

               

              ]]>

               

               

              </mx:Script>

               

              </mx:LinkButton>

              • 4. Re: Using Item Renderers in Data Grid Controls
                m_hartnett Level 3

                This code looks fine but I don't see where the dataProvider (dataSource) is built.

                 

                Can you show what is in the AC and how it is created?