2 Replies Latest reply on Oct 20, 2009 7:51 AM by Di1bert

    How do you programmatically change an image in DataGrid cell

    Di1bert

      I have a DataGrid which contains a status icon. I have been able to get the initial status icon to show in the DataGrid. But I am unable to update the it. I basically need to update the image for a selected row with either a 'assets/processing.png',  'assets/success.png' or 'assets/failure.png' image. I just cannot seem to be able to figure out how to get access to the image in the necessary cell to update/replace it. I've tried to make it a property of my ArrayCollection data provider, but that does not work. I've also have tried to some how get a reference to the original image so it can be replaced, but cannot figure out how to do such. Below is the code to my DataGrid. I will be very appreciative of any help on this. (I'm relatively new to Flex/ActionScript, but a seasoned developer otherwise.)

      <mx:DataGrid id="myDataGrid" left="0" top="0" bottom="0" right="0"
                           allowMultipleSelection="true" verticalScrollPolicy="on"
                           draggableColumns="false" resizableColumns="false" sortableColumns="false"
                           dataProvider="{myArrayCollection}">
                  <mx:columns>
                      <mx:DataGridColumn headerText="Name" dataField="name" wordWrap="true" />
                      <mx:DataGridColumn headerText="Status" dataField="status" width="75" textAlign="center">
                          <mx:itemRenderer>
                              <mx:Component id="statusComponent">
                                  <mx:HBox id="imageBox" width="100%" height="100%" horizontalAlign="center">
                                      <mx:Image id="statusImage" source="@Embed('assets/pending.png')" width="16" height="16"  />
                                  </mx:HBox>
                              </mx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                  </mx:columns>
              </mx:DataGrid>
      
        • 1. Re: How do you programmatically change an image in DataGrid cell
          oldMster Level 3

          The image should be a property of the arrayCollection.  You can either store the url for the image as a string property, or if you need to embed them, then you can create an actionscript object for each image in a script ( private var image1:Image = Image(); image1.source=@embed.....)

          Then, in the code that is processing the event that causes the image to need changing, change the image property of the arrayCollection member(s) affected. Then, at the end of the event code, trigger the datagrid to update by using the method myDataGrid.invalidateList();

           

          Mark

          • 2. Re: How do you programmatically change an image in DataGrid cell
            Di1bert Level 1

            Mark,

             

            My sincerest thanks for your assistance. myDataGrid.invalidateList() the key thing I was missing in all my previous attempts. I had thought about  needing to do something to refresh the grid, but was looking for a "refresh" method. I did not see the invalidateList() method.

             

            To get it to work I needed to override the Container's set data method within the status image column (see below for my full example). Without this, it does not work. Am I missing something or is there a better way to do this?

             

            Again, thank you very much for your help.

             

            <?xml version="1.0" ?>
            
            <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
              <mx:Canvas width="100%" height="100%">
                <mx:DataGrid id="myDataGrid" left="0" top="0" bottom="0" right="0"
                             allowMultipleSelection="true" verticalScrollPolicy="on"
                             draggableColumns="false" resizableColumns="false" sortableColumns="false"
                             dataProvider="{myArrayCollection}">
                  <mx:columns>
                    <mx:DataGridColumn headerText="Name" dataField="name" wordWrap="true" />
                    <mx:DataGridColumn headerText="Status" dataField="status" width="75" textAlign="center">
                      <mx:itemRenderer>
                        <mx:Component>
                          <mx:HBox width="100%" height="100%" horizontalAlign="center">
                            <mx:Image id="statusImage" width="16" height="16" />
                            <mx:Script>
                              <![CDATA[
                              override public function set data(value:Object):void
                              {
                                if (value != null)
                                {
                                  statusImage.source = value.status;
                                }
                              }
                              ]]>
                            </mx:Script>
                          </mx:HBox>
                        </mx:Component>
                      </mx:itemRenderer>
                    </mx:DataGridColumn>
                  </mx:columns>
                </mx:DataGrid>
              </mx:Canvas>
            
              <mx:Button id="updateButton" click="updateIcon()" label="Update Icon" />
            
              <mx:Script>
              <![CDATA[
            
                import mx.collections.ArrayCollection;
            
                [Embed(source="assets/success.png")]
                public static const successImage:Class;
            
                [Embed(source="assets/fail.png")]
                public static const failImage:Class;
            
                [Embed(source="assets/pending.png")]
                public static const pendingImage:Class;
            
                [Bindable]
                private var myArrayCollection:ArrayCollection = new ArrayCollection();
            
                private var lastIndex:Number = 0;
            
            
                private function updateIcon():void
                {
                  //sample updating
                  var item:Object = myArrayCollection.getItemAt(lastIndex);
                  (lastIndex % 2 == 0) ? item.status = EmbeddedImages.successImage : item.status = EmbeddedImages.fail1Image;
                  myDataGrid.invalidateList();
                  if (++lastIndex > myArrayCollection.length - 1)
                  {
                    lastIndex = 0;
                  }
                }
            
            
                private function init():void
                {
                  //load some dummy sample data for demo/testing
                  for (var i:Number = 1; i <= 10; i++)
                  {
                    myArrayCollection.addItem({
                      name:"value-" + i,
                      status:pendingImage
                    });
                  }
                }
                ]]>
                </mx:Script>
            
            
            </mx:Panel>