I have and add button (last row) in one column of the AdvancedDataGrid. for the row having the add button the rest of fields are not visible. On click of the add button a new row is added to the grid for the user to add. After that this button becomes delete button (label becomes '-' and a new row is added at the bottom for adding another row). When i click on the delete button (label '-'), the last row gets the add button('+' label) but the fields of the row become visible.
Can somebody please explain Below is the sample code
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400"
height="300"
initialize="group1_initializeHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.AdvancedDataGridEvent;
import mx.events.CollectionEvent;
import mx.events.DataGridEvent;
import mx.events.FlexEvent;
import mx.events.IndexChangedEvent;
import spark.events.IndexChangeEvent;
protected function group1_initializeHandler(event:FlexEvent):void
{
alarms=new ArrayCollection();
alarms.addItem(initalarmRow());
//alarms.addEventListener(CollectionEvent.COLLECTION_CHANGE, populateFieldDetails);
alarms.addItem(populateFieldforButton());
populateEvents();
}
private var _addButton:Boolean
[Bindable]
public function get addButton():Boolean
{
return _addButton;
}
public function set addButton(value:Boolean):void
{
_addButton=value;
}
private var _alarms:ArrayCollection;
[Bindable]
public function get alarms():ArrayCollection
{
return _alarms;
}
public function set alarms(value:ArrayCollection):void
{
_alarms=value;
}
private var _alarmRow:alarmVO;
[Bindable]
public function get alarmRow():alarmVO
{
return _alarmRow;
}
public function set alarmRow(value:alarmVO):void
{
_alarmRow=value;
}
// Initiliaze an alarmVO for a new row
private function initalarmRow():alarmVO
{
alarmRow=new alarmVO();
alarmRow.buttonLabel='-';
channels=new ArrayCollection;
for (var i:int=0; i < 10; i++)
{
var vo:ChannelVO=new ChannelVO();
vo.id=i;
vo.name="channel_" + i;
vo.messageType="Message_" + i;
channels.addItem(vo);
}
alarmRow.eventName="Event_1";
alarmRow.channel=channels.getItemAt(5) as ChannelVO;
return alarmRow;
}
private var _events:ArrayCollection;
[Bindable]
public function get events():ArrayCollection
{
return _events;
}
public function set events(value:ArrayCollection):void
{
_events=value;
}
private var _channels:ArrayCollection;
[Bindable]
public function get channels():ArrayCollection
{
return _channels;
}
public function set channels(value:ArrayCollection):void
{
_channels=value;
}
public function populateFieldforButton():alarmVO
{
alarmRow=new alarmVO();
alarmRow.buttonLabel="+";
return alarmRow;
}
public function populateEvents():void
{
events=new ArrayCollection();
for (var i:int=0; i < 3; i++)
{
var event:EventVO=new EventVO();
event.id=i;
event.eventName="Event_" + i;
events.addItem(event);
}
}
public function populateFieldDetails(event:Event):void
{
for (var count:int; count < alarms.length; count++)
{
//trace('alarms.getItemAt(count).buttonLabel :' + alarms.getItemAt(count).buttonLabel);
if (alarms.getItemAt(count).buttonLabel == '+')
{
alarms.getItemAt(count).channel=null;
alarms.getItemAt(count).eventName=null;
}
adgdalarmManagement.invalidateDisplayList();
}
}
public function preventEditing(event:AdvancedDataGridEvent):void
{
//check if it is the last row(it should not be editable)
if (event.rowIndex == alarms.length - 1)
{
event.preventDefault();
//trace('**** :' + event.currentTarget);
}
}
public function adgdalarmManagement_creationCompleteHandler(event:FlexEvent):void
{
}
protected function adgdalarmManagement_dataChangeHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
}
public function ddlEventType_creationCompleteHandler(event:FlexEvent, data:Object):void
{
for (var count:int=0; count < alarms.length; count++)
{
for (var count1:int=0; count1 < events.length; count1++)
{
if (events.getItemAt(count1).eventName == alarms.getItemAt(count).eventName)
{
event.currentTarget.selectedIndex=count1;
break;
}
}
}
checkEventTypeVisible(event, data);
}
public function checkEventTypeVisible(event:FlexEvent, data:Object):void
{
if (data == '-')
{
event.currentTarget.visible=true;
}
else
{
event.currentTarget.visible=false;
}
}
public function button1_clickHandler(event:MouseEvent):void
{
if (event.currentTarget.label == '-')
{
event.currentTarget.parent.parent.parent.parent.dataProvider.removeItemAt(event.currentTarget.parent.parent.parent.parent.selectedIndex);
event.currentTarget.parent.parent.parent.parent.dataProvider.refresh();
adgdalarmManagement.validateNow();
}
else
{
var selectedIndex:int=event.currentTarget.parent.parent.parent.parent.selectedIndex;
alarmRow=new alarmVO();
alarmRow.buttonLabel='-';
alarmRow.eventName="";
alarmRow.channel=new ChannelVO();
event.currentTarget.parent.parent.parent.parent.dataProvider.removeItemAt(event.currentTarget.parent.parent.parent.parent.selectedIndex);
event.currentTarget.parent.parent.parent.parent.dataProvider.addItemAt(alarmRow, selectedIndex);
event.currentTarget.parent.parent.parent.parent.dataProvider.addItemAt(populateFieldforButton(), selectedIndex + 1);
}
}
public function ddlChannel_changeHandler(event:IndexChangeEvent):void
{
event.target.parent.data.typeDisplay=event.target.selectedItem.name;
event.target.parent.data.messageTypeDisplay=event.target.selectedItem.messageType;
}
public function ddlChannel_creationCompleteHandler(event:FlexEvent, data:Object):void
{
// TODO Auto-generated method stub
if (channels != null)
{
if (alarms != null)
for (var count:int=0; count < alarms.length; count++)
{
for (var count1:int=0; count1 < channels.length; count1++)
{
if (alarms.getItemAt(count).channel != null)
{
if (channels.getItemAt(count1).name == alarms.getItemAt(count).channel.name)
{
event.currentTarget.selectedIndex=count1;
break;
}
}
else
{
event.currentTarget.selectedIndex=0;
}
}
}
}
else
{
event.currentTarget.selectedIndex=0;
}
checkVisible(event, data);
}
public function checkVisible(event:FlexEvent, data:Object):void
{
if (data == '-')
{
event.currentTarget.visible=true;
}
else
{
event.currentTarget.visible=false;
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
width="100%"
height="100%"
id="vbxChannelManagement">
<!-- Added for Rounding off Corners of GRID-->
<mx:ApplicationControlBar width="100%"
cornerRadius="8"
height="100%">
<mx:AdvancedDataGrid id="adgdalarmManagement"
width="100%"
height="100%"
dataProvider="{alarms}"
dataChange="adgdalarmManagement_dataChangeHandler(event)"
creationComplete="adgdalarmManagement_creationCompleteHandler(event)">
<mx:columns>
<mx:AdvancedDataGridColumn id="adgcAdRemove"
width="30"
dataField="buttonLabel">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<s:Button label="{data.buttonLabel}"
width="30"
click="outerDocument.button1_clickHandler(event)"/>
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="adgcEvent"
dataField="buttonLabel"
headerText="Event">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<s:HGroup id="eventGroup"
visible="{(this.parent.data.buttonLabel=='-')?true:false}}">
<s:DropDownList id="ddlEventType"
dataProvider="{outerDocument.events}"
creationComplete="outerDocument.ddlEventType_creationCompleteHandler(event,data.buttonLabel)"
labelField="eventName"/>
</s:HGroup>
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="adgcChannel"
dataField="buttonLabel"
headerText="Channel">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<!--<s:HGroup width="100%"
id="channelField"
>-->
<s:DropDownList id="ddlChannel"
width="100%"
dataProvider="{outerDocument.channels}"
creationComplete="outerDocument.ddlChannel_creationCompleteHandler(event,data.buttonLabel)"
labelField="id"
change="outerDocument.ddlChannel_changeHandler(event)"
/>
<!--</s:HGroup>-->
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="adgcChannelType"
headerText="Type"
dataField="typeDisplay"/>
<mx:AdvancedDataGridColumn id="adgcMessageType"
headerText="Message Type"
dataField="messageTypeDisplay"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:ApplicationControlBar>
</s:VGroup>
</s:Group>
