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

    Display icon on Datagrid row based on value

    code_away Level 1
      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>

       

       

       

       

      Thanks,
      code_away
        • 1. Re: Display icon on Datagrid row based on value
          Agent-96 Level 1

          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"
                                    xmlns:s="library://ns.adobe.com/flex/spark"
                                    xmlns:mx="library://ns.adobe.com/flex/mx"
                                    focusEnabled="true">
             
              <fx:Script>
                  <![CDATA[           
                      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;
                              }
                          }
                      }
                     
                  ]]>
              </fx:Script>
              <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()" />
              </s:HGroup>
             
          </s:MXDataGridItemRenderer>

           

          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:itemRenderer>

            <mx:Component>

            <mx:HBox>

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

            </mx:HBox>

            </mx:Component>

            </mx:itemRenderer>

            </mx:DataGridColumn>