PDA

View Full Version : datagrid


tdurant
05-12-2008, 06:23 PM
I am new to flex so forgive me.

I am trying to do something I thought was simple, import an xml into a datagrid then allow for searching of items, then the user can click on searched item to launch a pdf. I have been working for days on this and am going crazy. help

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

<mx:HTTPService id="srv" url="data/courses.xml"/>
<mx:DataGrid id="dg" dataProvider="{srv.lastResult.courseData.courseInfo}" width="518" height="210"/>
</mx:Application>

xml example

<courseData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<courseInfo>
<courseNumber>17533-01f</courseNumber>
<courseName>Operation Skills: Facility Operating Plan</courseName>
<courseURL>http://link/17533-01.pdf</courseURL>
</courseInfo>
</courseData>

by the way im using flex 2.1

tdurant
05-14-2008, 06:11 PM
I have be at least partially sucessful. I was able to add a link to the datagrid, kinda, by populating a button using the selected item, but I still can get a search or filter to work. help!!!

mxml code

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

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

import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.collections.IViewCursor;
import mx.controls.Alert;

[Bindable]
private var selectedItem:Object;

[Binable]
private var srv:ArrayCollection = new ArrayCollection;

private function resultHandler(event:ResultEvent):void{
mySrv = event.result.courseData.courseInfo;
dg.selectedIndex=0;
}

public function filter():void{
srv.filterFunction = filterFirst;
srv.refresh();
}

private function filterFirst(item:Object):Boolean{
return (item.first == searchField.text)
}
]]>
</mx:Script>
<mx:HTTPService id="mySrv" url="data/courses.xml"/>

<mx:Form width="549">
<mx:FormItem label="Search" direction="horizontal" width="510">
<mx:TextInput id="searchField" change="srv.refresh()" />

</mx:FormItem>
</mx:Form>
<mx:DataGrid id="dg" dataProvider="{mySrv.lastResult.courseData.courseInfo}" width="606"/>
<mx:LinkButton label="{dg.selectedItem.courseName}" click="navigateToURL(new URLRequest(dg.selectedItem.courseURL),'_blank');"/>
</mx:Application>


thanks in advance

tdurant
05-19-2008, 02:28 PM
I was able to figure it out with some help from other tutorials. Instead of using a http service I turned it into an xml list collection and formating it e4x. here's the code for newbies who had the same problem I had.

mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
<mx:Script>
<![CDATA[
private function filterFunc(item:Object):Boolean {
return item.text().match(new RegExp("^" + acronymNameFilter.text, "i"));
}
]]>
</mx:Script>

<mx:XML id="dp" source="data/acronyms3.xml" format="e4x" />

<mx:XMLListCollection id="xmlListColl" source="{dp.acronymInfo.acronym}" filterFunction="filterFunc" />
<mx:Canvas height="220">

<mx:VBox>
<mx:HBox width="100%">
<mx:Label text="Name:" />
<mx:TextInput id="acronymNameFilter" width="100%" change="xmlListColl.refresh()" />
</mx:HBox>

<mx:DataGrid id="dataGrid" dataProvider="{xmlListColl}" x="20">
<mx:columns>
<mx:DataGridColumn id="codeCol" dataField="*" headerText="acronym:" width="65" />
<mx:DataGridColumn id="nameCol" dataField="@desc" headerText="Description" width="280" />
</mx:columns>
</mx:DataGrid>
<mx:Label text="Filtered: Showing {xmlListColl.length} record(s)" visible="{acronymNameFilter.text.length > 0}" />
</mx:VBox>
</mx:Canvas>
<mx:Label x="0" y="241" text="Acronym Search" fontFamily="Arial" fontSize="18"/>
</mx:Panel>

xml sample:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<acronymData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<acronymInfo>
<acronym desc="Automated Area Distribution Center">AADC</acronym>
</acronymInfo>
<acronymInfo>
<acronym desc="Automated Barcode Evaluator">ABE</acronym>
</acronymInfo>