Flex Datagrid with conditional links

0
votes

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

2
datagridflex4itemrenderer

2 Answers

1
votes

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>
0
votes

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>