3 Replies Latest reply on May 19, 2010 7:01 AM by code_away

    Display icon on Datagrid row based on value

      Let's say I have a datagrid - as in the below - and 
      an icon called "new.png". 
      How can I display new.png as an embedded icon based on a dataProvider
      column value?
      Let say my dataprovider if from a database table with
      columns "Album, Price, and New." New can be 0 or 1, and if 1, new.png should display for that row.    <mx:DataGrid id="myGrid" width="350" height="200"       dataProvider="{initDG}" >       <mx:columns>          <mx:DataGridColumn dataField="Album" />          <mx:DataGridColumn dataField="Price" />       </mx:columns>    </mx:DataGrid> </mx:Application>





        • 1. Re: Display icon on Datagrid row based on value

          You've probably figured this one out by now, but I'm in the middle of trying to do the same thing, so thought I'd post what I have so far (Flex 4):


          On your datagrid add an itemRenderer attribute and point it to the component that you are about to write, which is something like this:


          <?xml version="1.0" encoding="utf-8"?>
          <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                      import spark.primitives.BitmapImage;
                      private function renderMe():void {
                          image.visible = false;
                          if(dataGridListData && dataGridListData.columnIndex == 0) {
                              var icon:Class = MyUtilClass.getIcon(data);
                              if(icon) {
                                  image.visible = true;
                                  image.source = icon;
              <s:HGroup id="hGroup" width="100%" height="100%">
                  <s:BitmapImage id="image" />
                  <s:Label id="lblData" name="lblData" top="0" left="0" right="0" bottom="0" text="{dataGridListData.label}" render="renderMe()" />


          This works (ish) but in my datagrid I am adding entries, and modifying entries - the icon should display and change accordingly.  However there is a bug as sometimes the icon gets rendered next to the wrong entry, and a couple of seconds later it is moved.


          So somthing along this logic, but without the bugs.....

          • 3. Re: Display icon on Datagrid row based on value
            code_away Level 1

            I got it to work with the below:


            <mx:DataGridColumn headerText="" dataField="ClaimFollowUp" width="16" textAlign="center" resizable="false" >




            <mx:Image source="@Embed('assets/followup.png')" enabled="false" visible="{data.ClaimFollowUp == 1}" />