Flex Datagrid with conditional links - datagrid

Question

I need your help on following.
I have one datagrid which use an arraylist as a data provider. Now my requirment is in that arraylist i have one statusId as one variable or say property which i display as one of the column in datagrid. now i have another column where i have to display three links like edit, delete and view which will be based on the statusid. can you give me some idea or example

Answer 1

I'm no Flex expert, but usually when you want to customise the appearance of a column in a DataGrid you use an ItemRenderer, as indicated by your tag. Within the item renderer, you could use Label components and set a selection of attributes that make them look like links, and then enable/disable them depending on your condition.
Here's some example code off the top of my head, with the following caveats:
I'm using an MX DataGrid instead of the Spark DataGrid.
I'm using an inline item renderer for convenience, but it is better practice to externalise your item renderers into separate MXML files.
<mx:DataGrid id="dataGrid" dataProvider="{dataProvider}" ...>
<mx:columns>
<mx:DataGridColumn id="status_id_column" dataField="statusId" headerText="Status" />
<mx:DataGridColumn id="action_column">
<mx:itemRenderer>
<fx:Component>
<mx:Label text="View" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
<mx:Label text="Edit" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
<mx:Label text="Delete" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

Answer 2

thanks avik for your help it is partially correct as for me there are lot of condition i can not put that in enabled attribute. anyway i got the solution from my side :)
here is the syntax.
<mx:HBox width="100%">
<mx:DataGrid id="reportDataGrid" dataProvider="{reportDataGridArrayCollection}"
variableRowHeight="true" editable="false" rowHeight="75"
width="100%" height="400" allowDragSelection="false"
draggableColumns="false" textAlign="center">
<mx:columns>
<mx:DataGridColumn sortable="false" dataField="reportId" resizable="false" headerText="" width="0.06" editable="false" textAlign="center"/>
<mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="reportStatusId" headerWordWrap="true" headerText="Status" width="0.21">
</mx:DataGridColumn>
<mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="lockedByUser" headerWordWrap="true" headerText="Locked (Worked) By" width="0.10"/>
<mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="" headerWordWrap="true" headerText="Acion" width="0.20">
<mx:itemRenderer>
<fx:Component>
<mx:HBox textAlign="left" width="100%" creationComplete="init1()" >
<fx:Script>
<![CDATA[
public function init1():void {
if(data.reportStatusId==0) {
viewLnk.visible = true;
viewLnk.includeInLayout = true;
// this is my condition which you can ignore.... if((data.entityId==1 || data.entityId==2 || data.entityId==3 || data.entityId==4) ){
editLnk.visible = true;
editLnk.includeInLayout = true;
}
}
if(data.reportStatusId==1
) {
editLnk.visible = true;
editLnk.includeInLayout = true;
}
if(data.reportStatusId==2) {
reviewLnk.visible = true;
reviewLnk.includeInLayout = true;
}
if(data.reportStatusId==3) {
saveXMLLnk.visible = true;
saveXMLLnk.includeInLayout = true;
}
}
]]>
</fx:Script>
<mx:LinkButton id="editLnk" visible="false" includeInLayout="false" label="Edit" click="outerDocument.editReport(data.reportId)"/>
<mx:LinkButton id="viewLnk" visible="false" includeInLayout="false" label="View" click="outerDocument.viewReport(data.reportId)"/>
<mx:LinkButton id="reviewLnk" visible="false" includeInLayout="false" label="Review" click="outerDocument.reviewReport(data.reportId)"/>
<mx:LinkButton id="saveXMLLnk" visible="false" includeInLayout="false" label="Save XML" click="outerDocument.saveXMLReport(data.reportId)"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:HBox>