2 Replies Latest reply on Apr 14, 2010 9:58 PM by Flex harUI

    Hiding/Disabling images in a datagrid

    eric_bockyn

      Hi,

       

      I am working on an application for a park district's program management. I have a datagrid that lists the programs and contains two images; one for editing the program and one for deleting the program (both images are in the same column). The XML in the dataprovider contains the number of participants in the program currently. What I need to do is hide the delete image if the number of participants is greater than 0.

       

      Here is the datagrid as it appears:

      dg_preview.png

       

      And the code:

       

           <mx:DataGrid styleName="datagrid" id="programGrid" dataProvider="{programListArray}" width="100%" right="5" left="5">
                <mx:columns>
                     <mx:DataGridColumn width="50" id="manage" dataField="item_id" headerText="" sortable="false">
                          <mx:itemRenderer>
                               <mx:Component>
                                    <mx:HBox horizontalAlign="center">
                                         <mx:Image toolTip="Click here to edit this program type." click="outerDocument.showManageProgram(data.item_id)" source="@Embed(source='../new_interface_images/icons/Window Edit.png')"/>                                   
                                         <mx:Image toolTip="Click here to delete this program type." click="outerDocument.showDeleteConfirm(data.item_id)" source="@Embed(source='../new_interface_images/icons/Window Delete.png')"/>
                                    </mx:HBox>
                               </mx:Component>
                          </mx:itemRenderer>
                     </mx:DataGridColumn>
                     <mx:DataGridColumn sortable="false" width="300" id="nameField" dataField="item_name" headerText="Program Name"/>
                     <mx:DataGridColumn sortable="false" width="200" id="codeField" dataField="item_code" headerText="Code"/>
                     <mx:DataGridColumn sortable="false" width="200" id="dateField" dataField="start_date" headerText="Start"/>
                </mx:columns>
           </mx:DataGrid>
      

       

       

      Anyone have any suggestions on the easiest way to check the number of participants and disable or hide the delete image?

       

      Here is a sample of the XML:

      <programlist>
           <program>
                <item_id>1</item_id>
                <item_name>Test Program</item_name>
                <item_code>00001</item_code>
                <start_date>2010-04-01</start_date>
                <participant_count>23</participant_count>
           </program>
      
           <program>
                <item_id>2</item_id>
                <item_name>Test Program 2</item_name>
                <item_code>00002</item_code>
                <start_date>2010-04-01</start_date>
                <participant_count>0</participant_count>
           </program>
      
           <program>
                <item_id>3</item_id>
                <item_name>Test Program 3</item_name>
                <item_code>00003</item_code>
                <start_date>2010-04-01</start_date>
                <participant_count>15</participant_count>
           </program>
      </programlist>