I have a flex datagrid to which I need to add this functionality: user clicks on particular cell, window should pop-up with additional information about the value in that cell. The pop-up might need to be another datagrid with more info.Can u provide flex code for this.I am new to flex.
<!--DGCRenderer.mxml-->
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" selectable="true"
click="handleClick()">
<mx:Script>
<![CDATA[
private function handleClick():void
{
CustComponent(listdata.owner).showPopUp(this.data);
}
]]>
</mx:Script>
</mx:Label>
<!-- inside the datagrid in the CustComponent -->
<mx:DataGridColumn dataField="name" headerText="Name" itemRenderer="DGCRenderer"/>
<mx:Script>
<![CDATA[
public function showPopUp(item:Object):void
{
var p:PopUpClassName = PopUpManager.createPopUp(this, PopUpClassName);
p.setItem(item);
}
]]>
</mx:Script>
Related
I got a Datagrid in my Flex application.
I need to make appear a context menu when the header row is right-clicked.
The latter context menu must not appear when the rest of the datagrid items (the ones containing data) are clicked.
Edit: the application runs in AIR environment, so i got no flash-player troubles
In flex, and more generally in flash, there is no way to catch the the right click event.
I'm not sure about the right mouse click, cos flex apps run in flash player, and right click brings up its menu.
The best bet would be to use headerRelease event on your DatagRid. In your event handler you can then create your menu (maybe in a popup or some hovering panel?) and then do what you need to do there.
Read more about it here
edit:
Maybe you could use a contextMenu class, and attach it to your dataGrid.contextMenu?
Below code may help you: -
I have created sample in which i have added only one ITEM. You can convert it and change logic as per requirement. My idea is to provide one of the base logic. You may gey better solution but this can work for you.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:DataGrid id="myDG" width="350">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:source>
<fx:Object Artist="" Price="11.99"
Album="Slanted and Enchanted" />
<fx:Object Artist=""
Album="Brighten the Corners" Price="11.99" />
</mx:source>
</mx:ArrayCollection>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn dataField="Artist" headerRenderer="StackLabelRenderer"/>
<mx:DataGridColumn dataField="Album" headerRenderer="StackLabelRenderer"/>
<mx:DataGridColumn id="price" dataField="Price" headerRenderer="StackLabelRenderer"/>
</mx:columns>
</mx:DataGrid>
</s:Application>
StackLabelRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
click="dispatchClickEvent()">
<fx:Script>
<![CDATA[
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.dataGridClasses.DataGridListData;
import mx.core.mx_internal;
private function dispatchClickEvent():void
{
trace("Item Clicked")
}
import mx.controls.Alert;
[Bindable]
private var cm:ContextMenu;
override protected function createChildren():void
{
cm = new ContextMenu();
cm.hideBuiltInItems();
cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
this.contextMenu = cm;
}
private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
//condition to check length of column data length
var allNull:Boolean=true;
var columnName:String = DataGridColumn(data).headerText;
for each(var o:Object in DataGrid(owner).dataProvider) {
if(o[columnName] != "") {
allNull=false;
break;
}
}
if(!allNull)
{
var cmi:ContextMenuItem = new ContextMenuItem("First Element...", true);
cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect);
cm.customItems = [cmi];
}
}
private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void {
}
]]>
</fx:Script>
</mx:Label>
I have used datagrid on many projects populate the grid using the following "Usual data structure" and brought the standard o/p as shown below Image.
But now for one assignment I want to bring the same grid result using the below mentioned "Complex data structure" (nested array). I have some Idea which is process the data before pushing it to the Grid but the problem am having is I need to perform some update , edit delete operation through the grid renderers and the same should be reflected into the source collection also. Please let me know is there a way I can use the "Complex structure" and bring the expected o/p using any flex in build properties. Thanks in Advance.
Usual data structure
steps = [a,b,c];
a = {x:100,y:y1,z:z1};
b = {x:200,y:y2,z:z2};
c = {x:300,y:y3,z:z3};
Complex data structure
[] is an Array collection not Array type.
a = [100,y1,z1];
b = [200,y2,z2];
c = [300,y3,z3];
steps = [[a,some objects],[b,some objects],[c,some objects]];
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var a:ArrayCollection = new ArrayCollection(['x1','y1','z1']);
private var b:ArrayCollection = new ArrayCollection(['x2','y2','z2']);
private var c:ArrayCollection = new ArrayCollection(['x3','y3','z3']);
[Bindable]
private var stepsObjs:ArrayCollection = new ArrayCollection([{ items: a},{ items: b},{ items: c}]);
]]>
</mx:Script>
<mx:DataGrid dataProvider="{stepsObjs}" >
<mx:columns>
<mx:DataGridColumn dataField="items.0" headerText="x" />
<mx:DataGridColumn dataField="items.1" headerText="y" />
<mx:DataGridColumn dataField="items.2" headerText="z" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
EDIT Replacing with code to solve the new question.
This one worked for me:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var a:ArrayCollection = new ArrayCollection([100,'y1','z1']);
private var b:ArrayCollection = new ArrayCollection([200,'y2','z2']);
private var c:ArrayCollection = new ArrayCollection([300,'y3','z3']);
private var stepsObjs:ArrayCollection = new ArrayCollection([{ items: a},{ items: b},{ items: c}]);
private var stepsColl:ArrayCollection = new ArrayCollection([[a],[b],[c]]);
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout />
</s:layout>
<mx:DataGrid dataProvider="{stepsObjs}" >
<mx:columns>
<mx:DataGridColumn dataField="items.0" headerText="x" />
<mx:DataGridColumn dataField="items.1" headerText="y" />
<mx:DataGridColumn dataField="items.2" headerText="z" />
</mx:columns>
</mx:DataGrid>
<mx:DataGrid dataProvider="{stepsColl}" >
<mx:columns>
<mx:DataGridColumn dataField="0.0" headerText="x" />
<mx:DataGridColumn dataField="0.1" headerText="y" />
<mx:DataGridColumn dataField="0.2" headerText="z" />
</mx:columns>
</mx:DataGrid>
</s:Application>
The itemRenderers should dispatch an event that describes what should happen, and then it should be handled higher up.
Like this:
//inside item renderer
dispatchEvent(new ItemEvent(ItemEvent.DELETE_ITEM, true, item));//where true tells the event to bubble (you'll need to create this event)
//somewhere above the DataGrid
dataGrid.addEventListener(ItemEvent.DELETE_ITEM, deleteItemFromSource);
protected function deleteItemFromSource(e:ItemEvent):void {
var lcv:ListCollectionView = (dataGrid.dataProvider as ListCollectionView);
lcv.removeItemAt(lcv.getItemIndex(e.item));
}
Note as a FYI that you should be using some sort of ListCollectionView if you want the datagrid to automatically update when you change it, not an Array.
HTH;
Amy
I am dragging item from a datagrid and while dragging I could see all of the columns in the selected record, being getting dragged. However I only want to show one column (maybe name or id of the record)? Is there a way to achieve this? Also, could I show an icon or image instead of the record while dragging.
Thanks Guys.
This can be done by extending the DataGrid to expose the DataGridDragProxy property. Check out http://dgrigg.com/blog/2006/11/03/datagrid-drag-image/ for a working example.
The extended DataGrid:
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridDragProxy;
import mx.core.IUIComponent;
/**
* #public
* class to use as DragProxy image
* set the default value to the standard DataGridDragProxy class
*/
[Bindable]
public var dragProxyImage: Class = DataGridDragProxy;
override protected function get dragImage():IUIComponent
{
var image:IUIComponent = new dragProxyImage();
image.owner = this;
return image;
}
]]>
</mx:Script>
</mx:DataGrid>
Using the DataGrid:
<controls:DataGrid
dataProvider="{dataSource}"
rowHeight="40"
dragEnabled="true"
height="140"
dragProxyImage="com.dgrigg.controls.CustomDragProxy"
allowMultipleSelection="true">
<controls:columns>
<mx:DataGridColumn headerText="Image" dataField="image">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{data.image}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Product" dataField="name"/>
<mx:DataGridColumn headerText="Description" dataField="description"/>
</controls:columns>
</controls:DataGrid>
In a flex datagrid, by default clicking on column headers does sorting. I want it such that if a user clicks a column header the entire column is selected. I have the datagrid listening for the HEADER_RELEASE event so I know when the column header is clicked.
How can I have the column and header appear highlighted similar to how a row is highlighted when selected?
You can do this by setting backgroundColor of the selected column:
<?xml version="1.0" encoding="utf-8"?>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.DataGridEvent;
[Bindable]
public var mydata:ArrayCollection;
public function init():void
{
mydata = new ArrayCollection();
mydata.addItem( { a:"John", b:"Smith" } );
mydata.addItem( { a:"Jane", b:"Doe" } );
grid1.addEventListener(DataGridEvent.HEADER_RELEASE, selectColumn);
}
public function selectColumn(event:DataGridEvent):void
{
var selectedColumn:DataGridColumn = grid1.columns[event.columnIndex];
selectedColumn.setStyle("backgroundColor", "0x7FCEFF");
event.stopImmediatePropagation();
}
]]>
</mx:Script>
<mx:DataGrid id="grid1" editable="true" dataProvider="{mydata}" >
<mx:columns>
<mx:DataGridColumn dataField="a" headerText="A" />
<mx:DataGridColumn dataField="b" headerText="B" />
</mx:columns>
</mx:DataGrid>
I have a wee demo (with source) on how to do this on my website Here. Basically, you check to see if the DataGrid sort is the same as the column name in the Item renderer, and if it is, you draw a colored background.
Hope this helps.
Caspar
In the followin flex Code :
Also viewable at : http://www.cse.epicenterlabs.com/checkBoxDg/checkBoxDg.html
1. Add a row in datagrid by clicking on "AddRow"
2. Click on "CheckDg" to see the values of all the checkboxes
- it shows "checkBox57" or "checkBox64" or some similar string
3. Now, "select" the checkBox in the first row.
4. Click again on "CheckDg"
-it show "true"
So, initially dp.getItemAt(i).date returns a CheckBox
and later it returns the "selected" value of the CheckBox?
Why this difference?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
<mx:Canvas>
<mx:DataGrid x="69" y="119" id="dgFee" editable="true" dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn headerText="Date" dataField="date" width="100" editable="true"
editorDataField="selected" rendererIsEditor="true">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="false">
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="amount" headerText="Amount" editable="true">
<mx:itemEditor>
<mx:Component>
<mx:TextInput restrict="0-9"/>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:CheckBox x="130" y="54" label="Checkbox" selected="true" click="Alert.show(abc.selected.toString())" id="abc"/>
<mx:Script>
<![CDATA[
import mx.controls.CheckBox;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
public var dp:ArrayCollection = new ArrayCollection();
public function addRow():void
{
var tmp:Object = new Object();
tmp['amount'] = 100;
tmp['date'] = new CheckBox();
dp.addItem(tmp);
}
public function delRow():void
{
if(dgFee.selectedIndex != -1)
dp.removeItemAt(dgFee.selectedIndex);
}
public function loop1():void
{
for(var i:int=0;i<dp.length;i++)
{
Alert.show(dp.getItemAt(i).date);
}
}
]]>
</mx:Script>
<mx:Button x="29" y="89" label="AddRow" click="addRow()"/>
<mx:Button x="107" y="89" label="DelRow" click="delRow()"/>
<mx:Button x="184" y="89" label="CheckDg" click="loop1()"/>
</mx:Canvas>
</mx:Application>
You are not supposed to assign objects to data variables but data. Checkbox.select property is set to your check box object first and then true or false after the preceding actions. Try this instead
public function addRow():void
{
var tmp:Object = new Object();
tmp['amount'] = 100;
tmp['date'] = false; // not new CheckBox();
dp.addItem(tmp);
}
PS: Also dp should be attributed with [Bindable] :-)
When you click on the check box in the grid, it writes "true" or "false" into the date field, replacing the original CheckBox object that was there. I believe what itemEditors (you are using your render as an editor) do is they write the .data property from the respective components into the collection.
Set the 'editable' property for that particular datagrid column as false. This will resolve the issue