Datagrids and ItemRenderers!
Someone just asked me how to create a link to a file inside a Flex data grid. This isn't so hard. Here is his question:
The reader didn't specify how he was uploading documents, either from Flex or from an HTML page to ColdFusion. For the purposes of this post I'm going to assume that you already have files up on the server somewhere, and can write the code to return a link to the file back to Flex.
The answer is quite simple. Just create a custom itemRenderer for a data grid column that provides a link to the file for download.
First, we'll need a data provider:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable] public var fileList : ArrayCollection = new ArrayCollection([
{id: 1, file: "test.doc", location:"http://www.jeffryhouser.com"},
{id: 1, file: "test.pdf", location:"http://www.theflexshow.com"},
{id: 1, file: "test2.doc", location:"http://www.yahoo.com"}
]);
]]></mx:Script>
The data provider contains the text to display (File property) and the location of the file (location property). In a real world app this will have probably been populated by the backend (ColdFusion in this case), perhaps with a query object or with Value Objects. Next, start the DataGid:
<mx:columns>
<mx:DataGridColumn dataField="location" headerText="File">
The provider is the fileList arrayCollection from above. Then we list the columns. We only have one column in this case, for the location. This needs an itemRenderer and for the purposes of this example, I'll create an in-line itemRemderer:
<mx:itemRenderer>
<mx:Component>
<mx:LinkButton click="handleClick()" label="{data.file}" >
<mx:Script><![CDATA[
public function handleClick():void{
var url:URLRequest = new URLRequest(data.location);
navigateToURL(url,"_blank");
}
]]></mx:Script>
</mx:LinkButton>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
We define the DataGridColumn, with it's primary field from the data Object as location. Then we have the itemRemderer defined in-line with the component tag. The itemRenderer is based off a LinkButton. The LinkButton calls the handleClick function. This creates a URLRequest based on the location value and passes it onto the navigateToURL.
Finally just close off your open tags and end the file:
</mx:DataGrid>
</mx:Application>
And finally, you can view the sample and the source.
For more reading you should check out The SAJ's posts on navigateToURL problems with FireFox. For more on itemRenderers check out Peter Ent's series on them.
So I have a data gird that is being populated from coldFusion. The location will always be the same up to the point of the file name for example
http://www.google.com/docs/mydoc.doc
So when I select an item in the datagrid it will hit the url and append the filename to the end of the url
In my example, I Was making the assumption that the backend (CF in your case) would be returning the full path to the file, as you specify there. However, there is no reason you wouldn't be able to concatenate them in Flex if you desired; something like this:
public function handleClick():void{
var url:URLRequest = new URLRequest(data.location + data.fileName);
navigateToURL(url,"_blank");
}
Does that help?
-Nicole
Was going mad trying to work this out.... putting the <script> inside the <linkbutton> was something I never would have thought of. Brilliant (I am learn more and more every day 8->)