I want to read a CSV file in FLex and display content of file on Datagrid. plzz provide solution...
My Datagrid and columns on which i want ot display the file file content::
<mx:AdvancedDataGrid id="dg" x="0" y="{btnBar.height}" width="100%" height="532"
defaultLeafIcon="{null}" draggableColumns="false" editable="true"
folderClosedIcon="{null}" folderOpenIcon="{null}"
horizontalScrollPolicy="auto" itemEditBegin="onItemEditBegin(event)"
itemEditEnd="processData(event)" itemOpen="onItemOpen(event.item)"
resizableColumns="false" sortableColumns="false" sortExpertMode="true"
verticalScrollPolicy="on">
<mx:AdvancedDataGridColumn id="value" width="250" dataField="value"
editorDataField="classValue" headerText="Values"
itemEditor="ComboBoxRenderer"/>
<mx:AdvancedDataGridColumn id="property" dataField="property" editable="true"
editorDataField="SelectedItem" headerText="Property"
itemEditor="PropertyComboBoxRenderer"/>
1.create a bean , parse the CSV and add it to the bean(properties same as no of coulmns).
2.add the bean to List iteratively.
3.pass the list as dataprovider to Datagrid
Related
I would like to show HTML entities that encoded in grid cell like this:
|HTML ENTITY|
<div>
But the result is
|HTML ENTITY|
<div>
I used mx:DataGridColumn
I tried this, for me its coming with encoded value only in grid please send your data provider format
[Bindable]
private var myGAC:ArrayCollection = new
ArrayCollection([{label:"<div>"},{label:"<div>"},
{label:"<div>"},{label:"<div>"},{label:"<div>"}]);
<mx:DataGrid id="myGrid" dataProvider="{myGAC}" width="500" rowCount="2">
<mx:columns>
<mx:DataGridColumn dataField="label" />
</mx:columns>
</mx:DataGrid>
I am trying to change the stage state to different state on click of a button. The problem is some times am getting exception as The supplied DisplayObject must be child of the caller.
Here is what am trying to do to change the state
this.currentState = 'fullScreen';
here this is a canvas.
Here is the MXML for the State fullscreen
<mx:State name="fullScreen">
<mx:RemoveChild target="{lstExpert}"/>
<mx:RemoveChild target="{screenToggle}"/>
<mx:AddChild relativeTo="{outContainer}" position="firstChild">
<mx:HBox id="topHeaderBox" horizontalAlign="left" verticalAlign="middle" width="98.5%" height="60"/>
</mx:AddChild>
<mx:AddChild relativeTo="{topHeaderBox}" position="firstChild" >
<mx:Label id="lblCourseName" width="100%" text="Name" color="#ffffff" fontFamily="Arial" fontSize="14" fontWeight="bold" height="20" />
</mx:AddChild>
<mx:AddChild target="{screenToggle}" relativeTo="{lblCourseName}" position="after" />
<mx:AddChild relativeTo="message" position="before">
<mx:Spacer id="Bar" height="5" width="2" />
</mx:AddChild>
</state>
What would be the mistake here?
You might want to bind the relativeTo property value of the last AddChild object. Meaning, to write it like this:
<mx:AddChild relativeTo="{message}" position="before">
Assuming you have an element with that id.
Hope this helps.
I am trying to print a table in Flex 3.2 using FlexPrintJob. I need normal printing behavior - one page if all rows fit on a single page, full page(s) of rows followed by a partially filled page if there is enough data to fill more than one page. Somehow, I get a page per row, where each page has a table header, followed by one row of data, followed by empty space.
Table with 15 rows results in a 15 page document. I get the same behavior in Firefox and IE8.
What can be causing this behavior?
Thanks for your help!
Here's the code:
// The function to print the output.
public function onPrint():void {
var printJob:FlexPrintJob = new FlexPrintJob();
printJob.start();
var thePrintView:FormPrintView = new FormPrintView();
addChild(thePrintView);
thePrintView.initPrintDataGrid(openSequences);
// thePrintView.printOpenTimeGrid.dataProvider = printOpenTime.dataProvider;
thePrintView.validateNow();
thePrintView.width=printJob.pageWidth;
thePrintView.height=printJob.pageHeight;
printJob.addObject(thePrintView, FlexPrintJobScaleType.MATCH_WIDTH);
while (thePrintView.printOpenTimeGrid.validNextPage) {
//Put the next page of data in the view.
thePrintView.printOpenTimeGrid.nextPage();
//Queue the additional page.
printJob.addObject(thePrintView, FlexPrintJobScaleType.MATCH_WIDTH);
}
printJob.send();
removeChild(thePrintView);
this.onClose();
}
PrintDataGrid is located directly in the TitleWindow object:
<!-- The data grid. The sizeToPage property is true by default, so the last
page has only as many grid rows as are needed for the data. -->
<mx:PrintDataGrid id="printOpenTimeGrid" dataProvider="{openSequences}" sizeToPage="true" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="startDate" headerText="Seq Date" width="70">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:DateFormatter id="startDateFormatter" formatString="M/D/YYY"/>
<mx:Label fontWeight="bold" text="{startDateFormatter.format(data.startDate)}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="equipCode" headerText="EQP" width="40" />
<mx:DataGridColumn dataField="base" headerText="BSE" width="40" />
<mx:DataGridColumn dataField="sequenceNumber" headerText="SEQNO" width="45" />
<mx:DataGridColumn dataField="seat" headerText="ST" width="40" />
<mx:DataGridColumn headerText="DPRT" width="40">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:DateFormatter id="departTimeFormatter" formatString="JJNN"/>
<mx:Label fontWeight="bold" text="{departTimeFormatter.format(data.startDate)}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="terminationDate" headerText="ARVL/DT" width="60" >
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:DateFormatter id="arvDateFormatter" formatString="JJNN/DD"/>
<mx:Label fontWeight="bold" text="{arvDateFormatter.format(data.startDate)}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="tripValue" headerText="TTL" width="50" />
<mx:DataGridColumn dataField="blockType" headerText="Block Type" width="170" />
</mx:columns>
</mx:PrintDataGrid>
Printout looks like this
The problem is solved by adding a 'height' parameter to the TitledWindow object (the wrapper of the PrintDataGrid). When height is set to 800, content prints onto a full page, and does't show a scroll bar.
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Open Time" height="800">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.core.*;
[Bindable]
private var openSequences:ArrayCollection;
public function initPrintDataGrid(sequences:ArrayCollection):void {
openSequences = sequences;
}
]]>
</mx:Script>
<!-- The data grid. The sizeToPage property is true by default, so the last
page has only as many grid rows as are needed for the data. -->
<mx:PrintDataGrid id="printOpenTimeGrid" dataProvider="{openSequences}" sizeToPage="true"
width="100%" height="100%">
<mx:columns>
I have setup a Scroller container around an HGroup of labels. The Scroller is setup to only display a single label at a time. What I am trying to do is determine which label is in view of the Scroller when a button is clicked. I have scoured the reference material on Scrollers and HGroups, but cannot formulate a programmatic strategy to determine what element of the group is in view.
Scroller Code for reference:
<local:Scroller id="imageViewer" includeIn="startState" left="411" right="411" top="241"
bottom="356" depth="2">
<s:HGroup id="imageGroup" gap="0" width="100%" height="100%">
<s:Label id="vin1337" width="201" height="104" color="white" fontSize="30"
text="Vehicle ID:1337" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin2567" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:2567" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin9456" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:9456" textAlign="center" verticalAlign="middle"/>
</s:HGroup>
</local:Scroller>
Eventually these Labels will be images, but using labels for proof of concept currently.
Any help would be greatly appreciated, and thank you for reading.
EDIT:
So after implementing an approach with lastIndexInView, I keep getting "TypeError: Error #1009: Cannot access a property or method of a null object reference." on the line "vehicleID.text = Label(lObj).text;". Below is the code involved:
Function:
protected function idSelect_clickHandler(event:MouseEvent):void
{
var hLay:HorizontalLayout = imageGroup.layout as HorizontalLayout;
var lIndex:int = hLay.lastIndexInView;
var lObj:Object = imageGroup.getElementAt(lIndex);
vehicleID.text = Label(lObj).text;
currentState="selectedState";
}
Components:
<local:SnapScroller id="imageViewer" includeIn="startState" left="411" right="411" top="241"
bottom="356" depth="2">
<s:HGroup id="imageGroup" gap="0" width="100%" height="100%">
<s:Label id="vin1337" width="201" height="104" color="white" fontSize="30"
text="Vehicle ID:1337" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin2567" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:2567" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin9456" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:9456" textAlign="center" verticalAlign="middle"/>
</s:HGroup>
</local:SnapScroller>
<s:Button id="idSelect" includeIn="startState" x="367" y="608" width="290" height="67"
label="Select" click="idSelect_clickHandler(event)" color="#00008F" fontSize="24"/>
<s:Label id="vehicleID" includeIn="selectedState" x="425" y="453" color="#00008F" fontSize="24"
text="Vehicle ID: ____"/>
I think this should answer your question http://blog.flexexamples.com/2009/10/31/determining-how-much-of-an-item-is-visible-in-a-scrolling-vgroup-container-in-flex-4/
basically the layout has firstIndexInView and lastIndexInView property which will tell you which items are visible.
The second issue I was running into was due to the fact I was trying to access the vehicleID component before it had actually been initialized. In other words, I was trying to change an element that wasn't included in the current state, but in fact, was a member of the next state.
Solved it by changing the state first, then assigning the label.
I have a ViewStack with 2 panels:
<mx:ViewStack id="viewstack1" height="243">
<mx:Panel id="gridPanel">
<mx:DataGrid id="grid" right="10" left="10" top="10" bottom="10" width="300" height="150" itemClick="showDetails(event)">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="Id"/>
<mx:DataGridColumn headerText="Summary" dataField="Summary"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<mx:Panel id="detailsPanel">
<mx:HBox width="100%" height="100%">
<mx:VBox height="100%" width="228" id="detailsVbox">
<mx:Label text="Label" id="itemTitle"/>
<mx:Text text="Text" id="itemSummary"/>
<mx:DataGrid height="97">
<mx:columns>
<mx:DataGridColumn headerText="Property" dataField="col1"/>
<mx:DataGridColumn headerText="Value" dataField="col2"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
<mx:Image source="images/BackButton.png" width="50" height="50" click="viewstack1.selectedChild = gridPanel"/>
</mx:HBox>
</mx:Panel>
</mx:ViewStack>
I want to have the user click a grid item in the first panel and then load the data in a panel in the second panel. I can grab the value of the index for the clicked item in the itemClicked handler, but how do I access the detailsPanel to set the values based on the row info from the Grid?
I'm not sure if this is what you want, but you can do something like this:
private function showDetails(event:ListEvent):void {
itemTitle.text = event.itemRenderer.data.Id;
itemSummary.text = event.itemRenderer.data.Summary;
//assuming that the datagrid ID from the details panel is: detailsDatagrid
detailsDatagrid.dataProvider = event.itemRenderer.data.Properties;
viewstack1.selectedChild = detailsPanel;
}
In order for this to work you will also have to add a creation policy to the viewstack.
<mx:ViewStack id="viewstack1" height="243" creationPolicy="all">
This way all panels are going to be created when the viewstack is created (by default they are created only when they are needed). This ensures that you will have a reference the detailsPanel, itemTitle, itemSummary, etc... before the panel is visible.
As for me the best way is to use data binding. Just introduce additional field
[Bindable]
private var detailsDataProvider:ArrayCollection;
And fill it with details in showDetails method. If details data need to be obtained asynchronously (from server, for example) you can reset current details value until data received:
detailsDataProvider = null;
And then populate it with server data.
The final changes are in details data grid:
<mx:DataGrid height="97" dataProvider="{detailsDataProvider}">
Hope it helps.
Here this code will explain 'stackview' simple example. Using this can call panel as same.