I had 7 columns in an advanced datagrid and have one comboBox with all of the columns names.
The datagrid should show only the columns the use has selected in the comboBox. Does this mean customization of the advanced datagrid columns? If anyone has any samples, please share them.
For example if you have a DataGrid like this
<s:DataGrid
width="100%" height="100%" dataProvider="{ac01}" >
<s:columns>
<s:ArrayList>
<s:GridColumn id="colType" dataField="type" headerText="Type"/>
<s:GridColumn dataField="message" headerText="Message" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
You can trigger some event and call this line of code
colType.visible = false;
Then the column colType will disappear. If you want to show that column again, just assign the true value to its visible property.
Related
Hi I am trying to pass the rowindex when I click on a button in a row, the data value returns the correct information but the rowIndex returns nothing.
<mx:AdvancedDataGridColumn headerText="EDIT" showDataTips="false" editable="true">
<mx:itemRenderer>
<fx:Component>
<mx:HBox horizontalAlign="center" verticalAlign="middle">
<s:Button label="Edit" id="editGeo" click="{outerDocument.onClick(data, rowIndex)}"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
thanks !
I'm surprised you're provided code does not throw an error.
You need to access listData.rowIndex. listData should be an instance of the AdvancedDataGridListData class.
<s:Button label="Edit" id="editGeo" click="{outerDocument.onClick(data, listData.rowIndex)}"/>
Since the HBox does not have a listData property, you may have to implement it on your own for the data to be passed in. Something like this should suffice:
[Bindable]
public var listData:BaseListData;
It has been a while since I've been deep into an MX component, so my memory is a bit rusty on the last part.
In addition to the first answer, try not to use listData.rowIndex when your datagrid has the vertical scroll bar, because the rowIndex just shows the index of current visible Rows.
Try to use the current object index in the DataProvider of the datagrid instead.
I am kinda new with datagrids and spark, and been wracking my brain to figure this out. I have a datagrid being loaded with an XMLList. One field is a numeric value that will be calculated times another field and that result be stored and displayed in the grid on the fly.
Example:
XML
<SampleTable>
<Row>
<Item>Item 1</Item>
<Quantity>10</Quantity>
<Price></Price>
<Cost></Cost>
</Row>
</SampleTable>
So a user would enter in the price, and the Cost would be updated in the grid with the Price * Quantity values, with the dataprovider being updated with the result when the form is saved.
Adding in the grid and the XML is already bound. I can get simple updates to the cells to work. I need help figuring out where to do a calculation. Only the price is editable, and when that cell changes value I want the Cost to be calculated.
Handlers for the editing session:
import spark.components.gridClasses.CellPosition;
import spark.events.GridEvent;
private var mouseDownRowIndex:int;
private var mouseDownColumnIndex:int;
protected function dataGrid_gridMouseDownHandler(event:GridEvent):void
{
mouseDownRowIndex = event.rowIndex;
mouseDownColumnIndex = event.columnIndex;
}
protected function dataGrid_gridMouseUpHandler(event:GridEvent):void
{
// Start a grid item editor if:
// - the rowIndex is valid
// - mouseUp is on the same cell and mouseDown
// - shift and ctrl keys are not down
// - cell is editable
// - an editor is not already running
// An editor may already be running if the cell was already
// selected and the data grid started the editor.
if (event.rowIndex >= 0 &&
event.rowIndex == mouseDownRowIndex &&
event.columnIndex == mouseDownColumnIndex &&
!(event.shiftKey || event.ctrlKey) &&
event.column.editable &&
!event.grid.dataGrid.itemEditorInstance)
{
event.grid.dataGrid.startItemEditorSession(event.rowIndex, event.columnIndex);
}
}
<s:DataGrid id="dgTest" x="10" y="68" width="900" editable="true" electionMode="singleCell" requestedRowCount="4" gridMouseDown="dataGrid_gridMouseDownHandler(event)" gridMouseUp="dataGrid_gridMouseUpHandler(event)">
<s:columns>
<s:ArrayList>
<s:GridColumn width="250" dataField="Item" headerText="Item" resizable="true" sortable="false" editable="false"></s:GridColumn>
<s:GridColumn width="160" dataField="Quantity" headerText="Quantity" resizable="false" sortable="false" editable="false"></s:GridColumn>
<s:GridColumn width="90" dataField="Price" headerText="Price" resizable="false" sortable="false" ></s:GridColumn>
<s:GridColumn width="90" dataField="Cost" headerText="Cost" resizable="false" sortable="false" editable="false"></s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
You should make your datasource Bindable.
So in code (AS), this would be:
[Bindable]
var myXMLList:XMLList;
I don't think it is possible to bind to an XMLList however. You should make use of an XMLListCollection instead.
It's still not clear to me if your want to save your data somewhere, or if you just want to visualize...
s:GridColumn has a property called "labelFunction". Maybe this is sufficient for your needs.
public function myLabelFunction(item:Object, column:DataGridColumn):String
{
var amount:Number = item.Quantiy;
var price:Number = item.Price;
return amount*price as String
}
In you example
<s:GridColumn width="90" dataField="Cost" headerText="Cost" resizable="false" sortable="false" editable="false"></s:GridColumn>
would be changed into
<s:GridColumn width="90" dataField="Cost" headerText="Cost" resizable="false" sortable="false" editable="false" labelFunction="myLabelFunction"></s:GridColumn>
Provided code is by no means complete. It serves as an example.
Good luck.
Got it working using an itemrenderer. It's ugly but works.
What I am having trouble with is moving this event to when the PercentComplete field is changed instead of the click event on this field. This is the timing I am having trouble with.
<s:GridColumn width="90" dataField="Extension" headerText="Extension" resizable="false" sortable="false" rendererIsEditable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer mouseDown="itemrenderer1_dataChangeHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.events.GridEvent;
protected function itemrenderer1_dataChangeHandler(event):void
{
if(data){
var data_field:String = ((parseFloat(data['PercentComplete'])/100)*parseFloat(data['Weight'])).toFixed(2).toString();
this.dataLabel.text = data_field;
data.Extension[0] = data_field;
}
}
]]>
</fx:Script>
<s:Label id="dataLabel" text="{data.Extension}" height="100%" width="100%" textAlign="left" verticalAlign="middle"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
The Datagrid is owner of the datasource, not the GridItemRenderer.
Therefore you should not use mouseDownEvents. (What will happen when to Tab trough your cells?). You might even consider moving this kind of business logic away from your view into your controller (or your model).
For your example, your really don't need a "fancy" GridItemRenderer. Everything has to be calculated outside of your datagrid.
The spark Datagrid has an event which is call "gridItemEditorSessionSave".
spark.components.DataGrid.gridItemEditorSessionSave
Dispatched after the data in item editor has been saved into the data
provider and the editor has been closed.
Event Type: spark.events.GridItemEditorEvent.GRID_ITEM_EDITOR_SESSION_SAVE
Language Version: 3.0
Player Version: Flash 10, AIR 2.5
Product Version: Flex 4.5
Personally I would implement a Bindable ValueObject and convert my XMLList in an IList implementation, for example and ArrayCollection, containing a set of those objects. Example follows:
[Bindable]
public class MyValueObject
{
public var percentComplete:Number;
public var weight:Number;
public function get extension():Number
{
return percentComplete*weight;
}
}
If you populate your datagrid with these ValueObjects, you can use a dumb view and even better, you can use any view you like without having to change your actual application. (Isn't that the purpose of OO Programming?)
This question is completely different than the first one though. I'm willing to provide answers, but you should do some research on your own.
I'm using a spark Datagrid in an mobile Flex (4.6) application. When a row is selected in the grid I want to trigger a function and use the content of the selected item in that same function. This is my Datagrid
<s:DataGrid id="patientGrid" x="317" y="211" width="393" height="177"
dataProvider="{patientInfo}" gridClick="patientSelect(event)">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="FirstName" headerText="First Name"/>
<s:GridColumn dataField="LastName" headerText="Last Name"/>
<s:GridColumn dataField="DateOfBirth" headerText="Date Of Birth"/>
<s:GridColumn dataField="Gender" headerText="Gender"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
And when a item is selected the patientselected function needs the ability to work with the content of that selected item.
I hope my question is clear, and thanks for helping!
Use the GridSelectionEvent.SELECTION_CHANGE event instead for two reasons:
it will provide information on which cells have been selected
it is fired whenever the selection changes (if you only react on mouse clicks, you ignore keyboard navigation/selection)
.
<s:DataGrid id="dg" selectionChange="onSelectionChange(event)" />
private function onSelectionChange(event:GridSelectionEvent):void {
var index:int = event.selectionChange.rowIndex;
var patient = dg.dataProvider.getItemAt(index);
patientSelect(patient);
}
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 a simple DataGrid in Flex 3:
<mx:DataGrid width="{indexW - 20}" height="100%"
headerHeight="0" resizableColumns="false"
dataProvider="{itemsList}"
itemClick="itemKlik(event)"
dataTipFunction="displayTooltip">
<mx:columns>
<mx:DataGridColumn id="col1" dataField="title" showDataTips="true"/>
<mx:DataGridColumn id="col2" width="25" textAlign="left" dataField="index" showDataTips="true"/>
</mx:columns>
</mx:DataGrid>
I am displaying a tooltip with this function:
private function displayTooltip(item:Object):String{
var s:String = " ";
if (item != null){
s = s + item.title;
}
return s;
}
What I want to do is to 'force' my DataGrid to display ERROR TOOLTIPS with 'errorTipRight' option instead of displaying a regular tooltips.
Is there a simple way to accomplish this?
Thanks in advance!
If you look at this link it might help you with what you are trying to do. In short you want to set the tooltip you created borderStyle property to "errorTipRight". If you want to add more styling, include it in a style definition.
The first example in the link should help you more.