1 Reply Latest reply on Aug 11, 2006 7:08 AM by peterent

    passing data to a linkbar inside a datagrid

    funk_sf
      Hi folks,

      i'm new to Flex & am trying to convert a HTML table "grid" of articles (containing title,author,date columns, etc) to flex. I'm using a webservice as the dataprovider to the datagrid, with data structured like so:

      <articles>

      <article>
      <aid></aid>
      <title></title>
      <date></date>
      <category></category>
      <author></author>
      <isPublished></isPublished>
      </article>
      ...

      </articles>

      One of the columns of the datagrid is a "action" column which uses a itemRenderer that contains a linkbar control with "edit" & "delete" links, which should launch a new URL when clicked, using the "aid" dataField for that datagrid row to pass to the URL.

      I added a function clickEvent(event) to the click property of the <mx:LinkBar> tag inside the itemRenderer, but i get a "call to a possibly undefined method clickEvent" error in flexbuilder.

      Looks like a scoping issue, but how do i access the function from within this itemRenderer?

      Also, how would I access the currently selected row of the datagrid from within this itemRenderer? I know i can do something like "event.currentTarget.selectedItem" if it was in the datagrid scope...would it be the same from within an itemRenderer? I want to basically send the user to http://localhost/edit.php?aid=[aid for the selected column] & http://localhost/delete.php?aid=[aid for the selected column]

      thanks in advance for any tips!
      -norm

      here's the code i have so far:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="articlesWS.send()" horizontalAlign="left">

      <mx:HTTPService id="articlesWS" url=" http://localhost/flex/test.php" useProxy="false" method="POST" />

      <mx:Script>
      <![CDATA[
      import mx.controls.Alert;

      public function clickEvent(event:Event):void {
      Alert.show(event.currentTarget.selectedItem.aid);
      }
      ]]>
      </mx:Script>

      <mx:DataGrid rowCount="30" id="articleGrid" dataProvider="{articlesWS.lastResult.articles.article}" width="760" height="80%" backgroundColor="#333333">
      <mx:columns>
      <mx:DataGridColumn width="350" headerText="Title" dataField="title"/>
      <mx:DataGridColumn width="80" headerText="Date" dataField="date" />
      <mx:DataGridColumn headerText="Category" dataField="category"/>
      <mx:DataGridColumn headerText="Author" dataField="author"/>

      <mx:DataGridColumn width="110" headerText="Action" sortable="false">

      <mx:itemRenderer>
      <mx:Component>
      <mx:LinkBar textRollOverColor="#ffcc00">
      <mx:dataProvider>
      <mx:Array>
      <mx:String>edit</mx:String>
      <mx:String>delete</mx:String>
      </mx:Array>
      </mx:dataProvider>
      </mx:LinkBar>
      </mx:Component>
      </mx:itemRenderer>

      </mx:DataGridColumn>

      </mx:columns>
      </mx:DataGrid>

      </mx:Application>
        • 1. Re: passing data to a linkbar inside a datagrid
          peterent Level 2
          I'm assuming each row of the DataGrid is an <article> and thus inside of the itemRenderer, data.aid would be the URL.

          <mx:LinkBar click="navigateToURL(new URLRequest(data.aid))" >

          should probably do it if I understand your question correctly.


          To access the current row from within the itemRenderer, use listData.rowIndex, but keep in mind that the header row will be rowIndex 0 and the actual records will start with 1.