I'm working on a flex project, and have a datagrid that I'd like the cursor to change when hovering over any row containing data.
I have double click enable on the datagrid and I'd like to indicate to the use that they can click the row they are hovering over.
This is what I've tried but it seems to just use the hand cursor on the datagrid its self and not the row data.
<mx:DataGrid x="9" y="47" width="330" height="244" useHandCursor="true" buttonMode="true" mouseChildren="true" horizontalScrollPolicy="{ScrollPolicy.AUTO}" styleName="resultgrid" dataProvider="{acLatest}" doubleClickEnabled="true" itemDoubleClick="doubleClickoverview()" id="overviewLatest_dg">
<mx:columns>
<mx:DataGridColumn headerText="Tag" id="overviewLatest_dg_animal_ptag" visible="true" dataField="animal_ptag" width="110" />
<mx:DataGridColumn headerText="Status" id="overviewLatest_dg_status_status" visible="true" dataField="status_status" width="110"/>
<mx:DataGridColumn headerText="Sex" id="overviewLatest_dg_animal_sex" visible="true" dataField="animal_sex" width="110"/>
</mx:columns>
</mx:DataGrid>
I would create an itemRenderer and add event listeners for the MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT events. In the event handlers you can change the cursor using the cursorManager. This also has the added benefit of allowing you to change the cursor based on some data or condition for the row the user is hovering their cursor over.
Here's an example on changing the cursor when mousing over a component. Hopefully this gets you started in the right direction.
Ended up using itemRollOver & itemRollOut on the datagrid.
Then just created a simple class that changes the cursor to a hand image.
DataGrid:
itemRollOver="Cursors.setHandCursor()" itemRollOut="CursorManager.removeAllCursors()"
Cursor Class:
package com {
import mx.managers.CursorManager;
import mx.managers.CursorManagerPriority;
public class Cursors extends CursorManager {
private static var handCursorList:Array = [];
public static function setHandCursor():void {
[Embed(source="../images/hand.png")]
var handCursorClass:Class;
handCursorList.push(setCursor(handCursorClass, CursorManagerPriority.MEDIUM));
}
}
}
Related
I have one datgrid with no. of columns like:
<s:DataGrid id="cpDataGrid" dataProvider="{arrList}">
<s:columns>
<mx:ArrayList>
<mx:source>
<s:GridColumn headerText="Name" dataField="name" editable="false"/>
<s:GridColumn headerText="Age" datafield="age" editable="false"/>
<s:GridColumn headerText="Test" dataField="test" editable="false" />
<s:GridColumn width="100" headerText="Result" dataField="result" >
</mx:source>
</mx:ArrayList>
</s:columns>
</s:DataGrid>
In the above datagrid result column is editable. I have make function when user done entering value in that column as following:
protected function onCreationCompleteHandler(event:FlexEvent):void
{
cpDataGrid.addEventListener(GridItemEditorEvent.GRID_ITEM_EDITOR_SESSION_SAVE, onSave);
}
private function onSave(event:GridItemEditorEvent):void
{
var name:String = event.currentTarget.selectedItem.name;
}
Now, I will get name and other field value when edit end. But i need Result text. Means Whatever user entered text in that field.
Like suppose user enter 50 in result column then how can i got that value?
Any help will greatly appreciated.
For spark.DataGrid you need to create custom class based on spark.DataGrid and override method endItemEditorSession. In it you can access DataGrid's property itemEditorInstance.
If you would use mx.DataGrid, you could use DataGridEvent.ITEM_EDIT_END event in combination with itemEditorInstance property of DataGrid.
// register listener
cpDataGrid.addEventListener(DataGridEvent.ITEM_EDIT_END, onItemEditEnd);
...
// listener
private function onItemEditEnd(event:DataGridEvent):void {
// at this point itemEditorInstance is still available, so you can get entered value from it
// if itemEditorInstance is TextInput
var enteredValue:String = TextInput(cpDataGrid.itemEditorInstance).text;
}
I coded the following in Flex 4/AS3 and it doesn't worked as expected.
So, I would like to know if there is something wrong with my code... I'll explain it:
TileTest.mxml
<s:Application minWidth="955" minHeight="600" creationComplete="createButtons()"
<fx:Script>
<![CDATA[
import Object.TestButton;
import mx.collections.ArrayList;
private var _names:Array = ["one", "two", "three"];
public function createButtons():void
{
var buttons:ArrayList = new ArrayList();
for(var a:int = 0; a < _names.length; a++)
{
var testButton:TestButton = new TestButton();
testButton.customName = _names[a];
buttons.addItem(testButton);
}
myList.dataProvider = buttons;
}
]]>
</fx:Script>
<s:VGroup gap="12" width="100%">
<s:Label text="Options" fontSize="18" fontWeight="bold" color="#333333" />
<s:List width="100%" height="100%" id="myList" itemRenderer="Object.TestButton" borderVisible="false">
<s:layout>
<s:TileLayout orientation="rows" columnWidth="290" rowHeight="90" columnAlign="left" horizontalGap="0" verticalGap="0" />
</s:layout>
</s:List>
</s:VGroup>
</s:Application>
This is my Application. Here, I have a List called myList, where I load some TestButtons. I set a name for each button inside the loop.
TestButton
<s:Group width="300" height="90" click="{ Alert.show(_name); }"
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private var _name:String = "just a test...";
public function set customName(newName:String):void
{
_name = newName;
Alert.show(_name);
this.addEventListener(MouseEvent.MOUSE_OVER, function():void{ Alert.show(_name); });
}
]]>
</fx:Script>
<s:BorderContainer accentColor="#000000" width="100%" height="100%" />
</s:Group>
As you can see, I have three Alerts in this component... I did so we can understand the problem.
The first Alert occurs when I set the customName, which occurs in the Application, as already shown.
The second one should occur on Mouse_Over, as the event listener been added to the Group element.
And the third Alert should occur on Click in the Group element.
Now, if I run the resulting swf, I see all the three buttons in the screen and three Alerts, one for each set customName by the Application and it alerts the right name.
If I put the mouse over any button, it doesn't alert any message.
If I click any button, it alerts the default message set to the _name property, which is "just a test..."
I can't understand what is the problem, as I was expecting it to always alert the name set by the Application to each button. Also, I don't want to change the components... what I'm saying is that I would like to have a List and TestButtons with a private String inside.
If the problem is in these specific implementation, so I'll have no other way than change it...
Thank you all!
The problem is that you have a list of TestButtons in your data provider, instead of just plain data. Those buttons get created, and that is why you see the correct Alert messages.
So, then Flex sees a list with three items and therefore it creates three additional TestButtons to render the data in your list. But those TestButtons are completely new ones, with default values for its properties.
To fix this, it would be better if you had data only in your data provider ArrayList, and you would access it through the data property of your item renderer.
hi so this is my first flash application i have two functions one a click handler to take you to the list page and a function to call the results is there any way in actionscript to pass values through variables like in php($)
what i need to do is to set the function off from the button that is pressed every button needs to supply a different value to the list to get results heres the two functions
protected function button_clickHandler_100():void
{
currentState='data';
}
protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
{
getCitysResult.token = cityservice.getCitys(/* VALUE ENTERED HERE */);
}
<s:Button click="button_clickHandler_100()" id="button128" includeIn="europe" skinClass="components.englandButton" x="101" y="135"/>
<s:Button click="button_clickHandler_100()" id="button129" includeIn="europe" skinClass="components.denmarkButton" x="135" y="117"/>
<s:Button click="button_clickHandler_100()" id="button130" includeIn="europe" skinClass="components.polandButton" x="214" y="135"/>
<mx:DataGrid includeIn="data" x="28" y="10" id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getCitysResult.lastResult}" width="276" height="255">
<mx:columns>
<mx:DataGridColumn headerText="city" dataField="city"/>
</mx:columns>
</mx:DataGrid>
so for instance the vlaue that needs to be supplied is GB for button128 , PL for button130 ....
getCitys returns a list of citys and populates a datagrid according to a 2 letter code it is a php sevice
is there a way i could get the clickHandler to supply the value to getCitys function according to which button is pressed off the id of the button say
"Flexicious" a third party component library built for handling very larg data set in DataGrid for flex, The issue is, i am not able to change the search functionality dynamically in a data Grid.
<flxs:FlexDataGridColumn id="multiselect" dataField="Name" headerText="Name"
filterControl="NumericTextInput" headerAlign="center">
<flxs:headerRenderer>
<fx:Component>
<controls:ComboBox change="changeSel(event)" width="10" height="41" dataProvider="outerDocument.searchArray}">
<fx:Script>
<![CDATA[
import com.flexicious.controls.ComboBox;
import mx.controls.Alert;
public function changeSel(event:Event):void{
var cbox:ComboBox = event.currentTarget as ComboBox;
if(cbox.selectedItem=="Less Than"){
outerDocument.multiselect.filterOperation="LessThanEquals";
//Alert.show(""+outerDocument.multiselect.filterOperation);
}else if(cbox.selectedItem=="Greator Than"){
outerDocument.multiselect.filterOperation="GreaterThanEquals";
//Alert.show(""+outerDocument.multiselect.filterOperation);
}else if(cbox.selectedItem=="Equal To"){
outerDocument.multiselect.filterOperation="Equals";
//Alert.show(""+outerDocument.multiselect.filterOperation);
}else if(cbox.selectedItem=="Begins With"){
outerDocument.multiselect.filterOperation="BeginsWith";
//Alert.show(""+outerDocument.multiselect.filterOperation);
}
}
]]>
</fx:Script>
</controls:ComboBox>
</fx:Component>
</flxs:headerRenderer>
</flxs:FlexDataGridColumn>
Now when i select any option from the rendered combobox i am not able to change filteroption, however when i alter the filteroperation it dose show me the changed operatioin but in functionality it doesn't change.
You should call grid.rebuildFilter() after changing the filterOperation
I am creating a Flex3 app to return some results from the Google Geocoding API.
I am using the HTTPService Events sample from TourDeFlex as a reference guide to mimic.
For now, I have hardcoded the response from Google to use this XML response:
maps.googleapis.com/maps/api/geocode/xml?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false
Network Monitor suggests that I am getting a valid response from the XML, but I imagine I have not referenced it correctly for populating my DataGrid?
I have screencasted the issue here.
Here is a stripped down version of my code:
private function resultHandler(event:ResultEvent):void
{
results = event.result.GeocodeResponse.result;
}
private function faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultDetail, "Error");
}
]]>
</mx:Script>
<mx:HTTPService id="srv"
url="http://maps.googleapis.com/maps/api/geocode/xml?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false"
result="resultHandler(event)"
fault="faultHandler(event)"/>
<mx:TitleWindow title="Find" showCloseButton="true" close="closeMe();"
styleName="formPanel" horizontalScrollPolicy="off" verticalScrollPolicy="off"
width="400" height="200">
<mx:DataGrid dataProvider="{results}" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="type" headerText="Address"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Go" height="20" styleName="buttonGo" click="srv.send()"/>
</mx:TitleWindow>
Had a look at the xml. It could be that the first occurance of type is at a top level, but from then on type is an element of address_component.
Maybe try address_component.type as the datafield of the DataGridColumn? Or set the dataprovider to results.address_component?
Edit Update
Because its reading XML, maybe set resultFormat="e4x" inside the <HttpService ..> tag, and have an XMLListCollection awaiting the result:
<mx:XMLListCollection id="xc" source="{srv.lastResult.result}"/>
<mx:DataGrid id="dg" dataProvider="{xc}">
In debug mode, set a watch on XC to make sure its being populated