2 Replies Latest reply on Jul 4, 2010 11:57 AM by cheftimo

    MXML Conditional?

    ehusar Level 1

      I have the datagrid below.  in the last cell you can see I am using an ItemRenderer for an image that links to a 'LetsRace' function. I would like to have a conditional on the image being visible or hidden.  I would like that conditional to be dependend on the 'complete' status. So if datafield for complete is 0 show the lock.png if it is 1 then don't show it.

       

      I could do this by still showing the clock.png and evaluate the complete status and thrown up an alert box and bypass the function. But it would be more elegant if I could just change the image or remove it altogether in MXML.

       

      Possible?

       

       

      mx:DataGrid id="eventRace" dataProvider="{eventArray}"

            width="350" height="326" editable="false" sortableColumns="false">

           

           

              <mx:columns>

                <mx:DataGridColumn itemRenderer="RowColorDataGrid" headerText="" dataField="complete" id="complete" visible="true" width="20" />

                <mx:DataGridColumn headerText="t" dataField="event" id="event" visible="false" width="20" />

                <mx:DataGridColumn headerText="rw" dataField="rowid" id="rowid" visible="false" width="25" />

                <mx:DataGridColumn headerText="ro" dataField="round" id="round" visible="false" width="25" />

                <mx:DataGridColumn itemRenderer="RowColorWinnerDataGrid1" headerText="Racer 1" dataField="racer_one" id="showDgOne" visible="true/>

                <mx:DataGridColumn itemRenderer="RowColorWinnerDataGrid2" headerText="Racer 2" dataField="racer_two" id="showDgTwo" visible="true" />

                <mx:DataGridColumn itemRenderer="RowColorWinnerDataGrid3" headerText="Racer 3" dataField="racer_three" id="showDgThree" visible="true" />

                <mx:DataGridColumn itemRenderer="RowColorWinnerDataGrid4" headerText="Racer 4" dataField="racer_four" id="showDgFour" visible="true" />

                <mx:DataGridColumn id="showDgFive" width="50">

      <mx:itemRenderer>

      <mx:Component>

      <mx:HBox horizontalAlign="center">

       

      <mx:Image source="@Embed('../assets/clock.png')"

      buttonMode="true"

      click="outerDocument.letsRace()"/>

       

      </mx:HBox>

      </mx:Component>

      </mx:itemRenderer>

        </mx:DataGridColumn>         

              </mx:columns>

            </mx:DataGrid>

        • 1. Re: MXML Conditional?
          JeffryHouser Level 4

          You can't do conditionals in MXML.  It is a declaritve / markup language not a programming language.

           

          I'm not sure how you were planning to determine "Complete" status.  But, assuming it is a Boolean value inyour dataProvider you can do this with data binding:

           

          <mx:Image source="@Embed('../assets/clock.png')"

          buttonMode="true"

          click="outerDocument.letsRace()" visible=""{!data.complete}/>

           

          It would be more "appropriate" to listen to the dataChange event and modify the renderer that way, however data will only change when you scroll through the dataGrid.

          • 2. Re: MXML Conditional?
            cheftimo Level 2

            When I have had to to deal with an MXML conditional, I have always worked it out with states.

             

            In this case, perhaps you can have 2 states of the item renderer and write a function that sets the currentState depending on the ‘complete’ status.