I've got a simple app that is currently getting information form a database and just displaying the content into a datagrid.
Instead of having this information displayed in a datagrid, I'd like to display it in a couple of labels (first name, last name, phone, etc.), but I'm not really sure how to.
Currently on creationComplete I call my php query function - which looks like this.
public function getPeople() {
return mysql_query("SELECT * FROM tbl_people ORDER BY pers_name ASC");
}
Then I'm just putting my results into a datagrid
<mx:DataGrid id="empdg" x="22" y="184" dataProvider="{amfcall.getPeople.lastResult}" click="showName()">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="pers_id" editable="false"/>
<mx:DataGridColumn headerText="Name" dataField="pers_name"/>
<mx:DataGridColumn headerText="Image" dataField="pers_img"/>
<mx:DataGridColumn headerText="Job" dataField="pers_job"/>
<mx:DataGridColumn headerText="Bio" dataField="pers_bio"/>
</mx:columns>
</mx:DataGrid>
Eventually my query will be modified and will only ever return 1 row from the database. So how do I get the results to display in labels instead of the datagrid?
Your question is vague at best, but here's me trying anyway:
<s:Label text="First Name: {data.firstName}" />
<s:Label text="Last Name: {data.lastName}" />
<s:Label text="Phone: {data.phone}" />
I recommend you read up on how on to do binding and look up examples on data driven Flex application, like this one on my blog.
Related
I am creating an app where users input their investment info into a datagrid on each row one row at a time. As they move along new rows are dynamically generated so they can input new investments. As the user moves and puts in new info I want a column to display what row the user is on (or better said what number investment he is on). I had an idea about the how to create the function:
private function rowCount():void
{
myDG.dataProvider=tasks;
myDG.rowCount=tasks.length;
}
but Im just not sure how to implement it in the datagrid.
How would I implement something like that? What datagrid property would I use? Im still fairly new to flex 3 so any help is appreciated!
<mx:DataGrid id="myDG"
width="908" height="410"
dataProvider="{tasks}"
sortableColumns="false" editable="true"
itemEditBeginning="checkEdit(event)"
itemEditEnd="editEnd(event)" x="10" y="0" >
<mx:columns>
<mx:DataGridColumn headerText="Investment number"
dataField="investment number " width="80">
<mx:DataGridColumn headerText="Symbol"
dataField="symbol" width="105">
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Trade Date"
dataField="date" width="80">
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
Putting simply, you need to display the index of the row in itemRenderer.
Look at this question and answers, the problem and its solution are the same (since List and DataGrid derives from the same ListBase):
Display List ItemRenderer Index in Flex3
I have an advanced datagrid that has a grouping on it. With the items inside of the grouping I have it setup where you double click on an item and it will create a popup that allows the user to edit that entry. The problem that I am having is that I can double click on the group title and the popup is activated with blank information. How do I prevent this from working?
Here is the mxml code
<mx:AdvancedDataGrid id="plugList" designViewDataType="tree" width="100%" height="100%"
initialize="gc.refresh();" doubleClickEnabled="true" itemDoubleClick="plugList_itemDoubleClickHandler(event)">
<mx:dataProvider>
<mx:GroupingCollection2 id="gc" source="{plugs}">
<mx:grouping>
<mx:Grouping>
<mx:GroupingField name="traderTitle"/>
</mx:Grouping>
</mx:grouping>
</mx:GroupingCollection2>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Title" dataField="traderTitle"/>
<mx:AdvancedDataGridColumn headerText="Anchor" dataField="traderAnchor"/>
<mx:AdvancedDataGridColumn headerText="URL" dataField="url"/>
<mx:AdvancedDataGridColumn dataField="status" headerText="Status" width="75"/>
</mx:columns>
</mx:AdvancedDataGrid>
The event target is not the single row but the entire datagrid component, you cannot use this object.
If the selectionMode property is set to singleRow (which is the default), you can use the selectedItem property to point the target row.
Then you can check for the presence of the children property to distinguish between a father node and a simple leaf.
This is a simple doubleClick listener function example:
protected function plugList_itemDoubleClickHandler(event:ListEvent):void
{
if(((Object)(event.target.selectedItem)).hasOwnProperty('children')){
trace('not a leaf');
}else{
Alert.show("Selected "+event.target.selectedItem.desc);
}
}
Davide
That would be handled in the plugList_itemDoubleClickHandler function. Have a conditional statement to and look at the event.target, not sure of the syntax for it off hand, but in debug mode you should be able to see a difference between the item and header that you can watch for. If its a header, dont show the popup
I have a datagrid with a single column rendered with another datagrid. I'm doing this to implement a rowspan-like display (with a hbox beneath the child datagrid) showing messages under each row.
When I tab and reach the end of a row, I want the focus to pass to the next row i.e the next child datagrid and on a specific cell of that row.
This is the simplified code calling the renderer :
<mx:DataGrid width="100%"
showHeaders="false"
selectable="false"
id="ParentDatagrid"
dataProvider="{arrayActs}"
paddingBottom="0" paddingTop="0"
variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn itemRenderer="components.ColumnRendererDatagrid"/>
</mx:columns>
</mx:DataGrid>
And the renderer (ColumnRendererDatagrid) code :
<mx:DataGrid
id="dgLocal" width="100%" height="23" borderSides=""
dataProvider="{data}" showHeaders="false"
editable="true" selectable="false">
<mx:columns>
<mx:DataGridColumn />
<mx:DataGridColumn />
<mx:DataGridColumn />
<mx:DataGridColumn />
<mx:DataGridColumn />
</mx:columns>
</mx:DataGrid>
<mx:HRule width="100%" />
<mx:Label id="message" text="Error Message" width="100%" />
For the moment, I'm using the following snippet in ColumnRendererDatagrid to check when tabbing reaches the end of the row and bubble up the event :
if(dgLocal.editedItemPosition.columnIndex == 13){
dispatchEvent(new Event(MOVE_FOCUS_DOWN, true));
From there I'm struggling on how to drill down into the renderer to set the focus once the higher component get this event. Any help would be really appreciated. Thx
Ok, here is the solution I came up with. This is the code in the parent's event handler (handling the MOVE_FOCUS_DOWN):
//Find the postition of the item that sent the event :
for each( var row:Object in ParentDatagrid.dataProvider ) {
if( (event.target as ColumnRendererDatagrid).data == row) {
break;
}
i++;
}
//Get the renderer of the next item :
var render:IListItemRenderer = ParentDatagrid.itemToItemRenderer(arrayActes.getItemAt(i+1));
(render as ColumnRendererDatagrid).dgLocal.editedItemPosition = {rowIndex:0, columnIndex:1}
(obviously checks should be made in real code to see if the next object exists) which is of type ColumnRendererDatagrid. From there I just set the focus/editing position.
I am trying to bind an ArrayCollection result coming in from the server to my DataGrid
created dynamically in AS.
The result data is not getting Displayed in the Grid.
var dg:DataGrid = new DataGrid();
dg.width=650;
dg.dataProvider=someArrayCollfromServer;
I am adding the dgColumn as runtime based on some data from a XML and it is the same as defined in below static format.
But if I use the same code and create the DataGrid as a Flex Component as below, it works fine.
<mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{someArrayCollfromServer}">
<mx:columns>
<mx:DataGridColumn dataField="Value" headerText="Value"/>
<mx:DataGridColumn dataField="Code" headerText="Code" />
</mx:columns>
</mx:DataGrid>
This works fine. Is there some functionality or implementation different as far as DataGrid is concerned in Flex and AS.
Any point of issue here?
dg.dataProvider=someArrayCollfromServer; just assigns the current value of the variable someArrayCollfromServer (which might be null if it hasn't been populated yet) to the dataProvider. To get data binding, replace that line with:
BindingUtils.bindProperty(dg, "dataProvider", this, "someArrayCollfromServer");
And make sure that someArrayCollfromServer is [Bindable]
Is there a way to make a Flex 3 Datagrid show only the first node of an arrayCollection, instead of showing all of the arrayCollection's data?
myDGArray = [
{Name: "Judy", Talent: 'Pole-Dancing', Score: "40"},
{Name: "Jane", Talent: 'Yodelling', Score: "65"},
{Name: "Jim", Talent: 'Singing', Score: "82"}
]
myAC:ArrayCollection = new ArrayCollection(myDGArray);
If I set the datagrid's dataProvider as myAC, then all of myAc's results will be listed in the dataGrid. How do I make it show only the first person's data, the not-so-hot Judy?
(The data in the myDGArray is actually from a database call. So, I'd like to return it all at once instead of making multiple server calls).
My goals is to have the datagrid load with the first person's data. And then have a comboBox control what data is shown in the dataGrid. So, if the user selects "Jim" in the comboBox, then Jim's data shows up in the dataGrid.
Any suggestions or advice?
Thank you.
-Laxmidi
Try this
<mx:DataGrid dataProvider="myAC">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="Talent"/>
<mx:DataGridColumn headerText="Score"/>
</mx:columns>
</mx:DataGrid>
If you always only want to show one record in your DataGrid, then you probably don't need to use the (rather heavy) DataGrid component. I would assign the data provider to the combo box and have something as simple as an HBox with Labels for the details. You can bind the label text to whatever detail of the selected combo box item:
<mx:Label text="{'Talent: " + myCombo.selectedItem.Talent}"/>
Try this
<mx:DataGrid dataProvider="myAC">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="Talent"/>
<mx:DataGridColumn headerText="Score"/>
</mx:columns>
</mx:DataGrid>