I have a view
<view:SampleDataGridView
rowCount="{Math.min(MAX_ROW_COUNT, hostComponent.dataList.length)}"
dataprovider="{hostComponent.dataList}"
buttonMode="true"
click="clickRow(event)"
/>
I want to get which row was clicked. I tried using currentTarget and target from event object however it wasn't of much use.
Is there a way I can pass some parameter in clickEvent function like clickEvent(rowData) or clickEvent(currentRowIndex)?
Is there any property when we use dataProvider to show currentIndex?
Data Grid
<mx:DataGrid id="employeeDataGrid" doubleClickEnabled="true" itemDoubleClick="selectEmployee(event);" dataProvider={employeeList} >
Handler
protected function selectEmployee(event:ListEvent):void
{
var selectedEmployee:Employee = event.currentTarget.selectedItem as Employee;
}
Related
Main.mxl
<s:DataGrid dataProvider="{employeeData}"> // employeeData is an Arraycollection with predefined data
<s:typicalItem>
<s:DataItem firstName="Christopher"
lastName="Winchester"
hireDate="22/12/2013"/>
</s:typicalItem>
<s:columns>
<s:ArrayList>
<s:GridColumn labelFunction="employeeName"
headerText="Name"/>
<s:GridColumn dataField="hireDate"
headerText="Hire Date"
labelFunction="dateFormat"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.rpc.events.ResultEvent;
[Bindable]
private var employeeData: ArrayCollection;
private function employeeName(item: Object, column: GridColumn): String
{
return item.firstName+" "+item.lastName;
}
]]>
</fx:Script>
A) Can anyone please explain me how does Datagrid internally works with employeeName function? I mean, Iam not even passing 2 parameters for labelFunction, BUT still how does it get called?
B) Why should I use s:ArrayList tag inside s:columns tag?
A) Can anyone please explain me how does Datagrid internally works
with employeeName function? I mean, Iam not even passing 2 parameters
for labelFunction, BUT still how does it get called?
The labelFunction is a property on the GridColumn class. Inside the Gridcolumn there is an itemToString() function which is used to determine what the label should be for that specific instance of the column. right out of the framework code:
/**
* #private
* Common logic for itemToLabel(), itemToDataTip(). Logically this code is
* similar to (not the same as) LabelUtil.itemToLabel().
*/
private function itemToString(item:Object, labelPath:Array, labelFunction:Function, formatter:IFormatter):String
{
if (!item)
return ERROR_TEXT;
if (labelFunction != null)
return labelFunction(item, this);
var itemString:String = null;
try
{
var itemData:Object = item;
for each (var pathElement:String in labelPath)
itemData = itemData[pathElement];
if ((itemData != null) && (labelPath.length > 0))
itemString = (formatter) ? formatter.format(itemData) : itemData.toString();
}
catch(ignored:Error)
{
}
return (itemString != null) ? itemString : ERROR_TEXT;
}
B) Why should I use s:ArrayList tag inside s:columns tag?
Because the data type of the columns property on the DataGrid is an IList; and the ArrayList implements the IList interface. What you're looking at is the MXML way to create and define an ArrayList. You'd use a slightly different approach if you wanted to create the columns in ActionScript.
To answer your first question: the "labelFunction" property is a reference to the function that will be invoked by the DataGrid to format the text of a cell in a column. The function will be called dynamically and the DataGrid will pass in the required parameters. The DataGrid expects a label function to always have this signature. If you fail to do so, you will get a runtime error.
Technically, a function can be called dynamically with the following syntax:
var anObject:MyType;
var methodName:String = "myMethod";
anObject[methodName](param1, param2);
or if you have a Function object
var myFunction:Function;
myFunction(param1, param2);
I have a datagrid with many columns and one of the columns contains a set of buttons using ItemRenderer. The datagrid itself has a clicked event which displays a panel. However, when any of the buttons is clicked, the clicked event of the datagrid should not be executed. How can I achieve this? Currently both the button click and datagrid events are being dispatched when the buttons are clicked.
Below is the current implementation:
Monitoring.mxml which has a datagrid and one of the column uses ItemRenderer to store a set a buttons.
<s:GridColumn width="300" dataField="" headerText="Control Buttons"
itemRenderer="com.example.ItemRenderer.ButtonControlsItemRenderer">
</s:GridColumn>
Inside the ButtonControlsItemRenderer.mxml, I have 2 buttons - Log and Advisory
<s:Button id="btn_log" width="49" height="35" label="Log"
click="btn_log_clickHandler(event)"/>
<s:Button id="btn_Advisory" width="81" height="35" label="Advisory"
click="btn_Advisory_clickHandler(event)"/>
and these 2 buttons are dispatching custom events to the datagrid with these functions.
protected function btn_log_clickHandler(event:MouseEvent):void {
var myEventObject:Event = new Event("logButtonEventRenderer",true);
dispatchEvent(myEventObject);
}
protected function btn_Advisory_clickHandler(event:MouseEvent):void{
var myEventObject1:Event = new Event("AdvisoryButtonEventRenderer",true);
dispatchEvent(myEventObject1);
}
Event metadata have been declared and event listeners have been added in Monitoring.mxml:
[Event(name="logButtonEvent", type="com.example.GetSelectedSystemEvent")]
[Event(name="AdvisoryButtonEvent", type="flash.events.Event")]
dg_Events.addEventListener("logButtonEventRenderer",btn_logButtonHandler);
dg_Events.addEventListener("AdvisoryButtonEventRenderer",btn_AdvisoryButtonHandler);
protected function btn_logButtonHandler(event:Event):void{
// Do something;
}
protected function btn_AdvisoryButtonHandler(event:Event):void{
// Do something
}
//Datagrid Click Event
protected function dg_Events_gridClickHandler(event:GridEvent):void {
// Display Panel
}
Thank you and really appreciate your help!
Try to call stopImmediatePropagation function in the button click hanler.Mouse event will bubble.
protected function btn_log_clickHandler(event:MouseEvent):void {
event.stopImmediatePropagation();
var myEventObject:Event = new Event("logButtonEventRenderer",true);
dispatchEvent(myEventObject);
}
This is my second day using FLEX and AS 3.0 so I am very new at this. I am trying to obtain the value of the selected item in a tree component, in this case it is just a name. Below is the tree I have created. The tree contents have been populated programmatically with an array called "cat". The tree gets populated just fine but I can't figure out how to get the name of the currently selected item.
<mx:Tree id="category_tree" x="10" y="80" width="160" height="169" showRoot="true" dataProvider="{cat}" labelField="name">
I have used the selectedItem.toString() function but this only seems to return the type of object and not the value. Currently it returns "object Object"
In my script I have...
category_tree.selectedItem.toString();
Any help on this would be greatly appreciated. Thank you in advance for your time.
You can add a change event to the tree and have use a callback similar to:
private function changeEvt(event:Event):void {
var lableData:*;
var label:String;
if (event.currentTarget.selectedItem.#data) {
labelData = event.currentTarget.selectedItem.#data;
}
label = event.currentTarget.selectedItem.#label;
}
}
or access the value directly
category_tree.selectedItem.#label;
I know that it is possible to get the selected value on the change handler or item click handler of a radioGroupButton. Like this:
protected function rb1_itemClickHandler(event:ItemClickEvent):void
{
var selectedValue:String=event.currentTarget.selectedValue.toString();
}
But what I need is the index of the selected value. Any idea how to do that?
Check out event.index like in this example:
protected function rb1_itemClickHandler(event:ItemClickEvent):void
{
trace(event.index);
}
I have a Datagrid with an ArrayCollection as DataProvider, the arrayCollection is partially generated by a remoteObject call, the dataprovider seems to works at least until I try to edit the field...
By the RemoteObject I only receive an ArrayCollection with the field ip, but the datagrid looks for the fields ip, check and save...
If I add/edit this new field it works, but only under particular condition
The DataGrid:
<s:DataGrid id="datagrid" left="10" right="10" top="136"
dataProvider="{listaIPCheck}" bottom="10" requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="ip" headerText="Asset"/>
<s:GridColumn dataField="check" headerText="Inventory"/>
<s:GridColumn dataField="save" headerText="Salvataggio"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
The Script:
[Bindable]private var listaIPCheck:ArrayCollection;
private function ro_resultHandler(event:Event=null):void
{
listaIPCheck = new ArrayCollection();
listaIPCheck = ro.getListUpdate.lastResult;
heap = 0;
// Read Below {POINT #1}
init3();
}
private function init3():void
{
// Read Below {POINT #2}
if (heap<listaIPCheck.length)
{
// omitted the initialization of the process p
p.addEventListener(NativeProcessExitEvent.EXIT, onExit);
try{
p.start(startupInfo);
}catch(e:Error){}
}
}
private function onExit(e:NativeProcessExitEvent):void {
// Read below {POINT #3}
}
Here is my code, now as you can see there are 3 line where I wrote to read below...
Let's assume to put this simple for instead of the commented line (once at a time)
for (var k:Number=0;k<listaIPCheck.length;k++)
{
listaIPCheck.getItemAt(k).check = "checkVal";
listaIPCheck.getItemAt(k).save = "saveVal";
}
This code always work in the 3 points, so at the end of the call the ArrayCollection is always filled with the new values, but the datagrid refresh the items only in point #1 and #2
Why not in Point #3???
The reason the DataGrid doesn't refresh when you change properties on an item in an ArrayCollection is that because changing the properties does not trigger the collectionChange event. The DataGrid has no way to know that properties within the object changed. It has to do with pointers and memory spaces and what exactly the DataGrid is looking at for binding purposes.
In most cases, the invalidateList() method to force a refresh of the display. You can call the refresh() method or the itemUpdated() method on the collection or replace the dataProvider completely to force a refresh.