7 Replies Latest reply on Mar 18, 2008 12:23 PM by TateMadone

    Datagrid Binding to an Image

      I have put together a group of images that are placed within a Canvas component. I did this because I had to specifically place these images at certain x/y coordinates. I am now dynamically populating a datagrid with XML. I would only like to have the images that corresponds to the data being populated in the datagrid to be visible. The simplest way to do this, it would seem, is to be to bind the image source to the dataGridColumn id...but that's not working. Is there a datagrid property that captures all of the data that is displayed in the datagrid. If I use the 'selectedItem', when I click on a value of a column, obviously only that one image becomes visible. Suggestions on how to capture or bind to the data that is visible in the datagrid?

        • 1. Re: Datagrid Binding to an Image
          ntsiii Level 3
          The information is in the dataGrid's dataProvider right?

          I would use a repeater, using the same dataProvider as the DG.

          Unless I am misunderstanding your requirements. What is the relationship between an image and a DataGrid row?

          • 2. Re: Datagrid Binding to an Image
            TateMadone Level 1
            Thanks so much for the reply Tracy.

            The problem with using the datagrid's dataprovider is, I want to be able to delete items from the datagrid as to only see the images that I would like. So in otherwords, all the XML loads into the datagrid, but then I'd like to remove a couple entries. Can I do that with a repeater?

            I'm building a visual map of homes for sales, listed in my XML file. All of the houses in the neighborhood load via the XML, but a few of the houses will be out of a clients price range. I'd like to be able to remove those houses with a 'Remove' button, and only see images in my Canvas that relate to the items remaining in the datagrid.

            Does that make sense?

            Thank you thank you thank you!
            • 3. Re: Datagrid Binding to an Image
              ntsiii Level 3
              When you click the "remove" button, what are you doing to the main dataProvider?

              For that mattter, where is the remove button? On each DataGridRow? If so, then you must be using an itemRenderer. If that is so, then you must be updating some property on the dataProvider item when you click the button.

              If that is so then you can select the dataProvider items where that property==true, and assign that to be the dataProvider for the Images repeater.

              • 4. Re: Datagrid Binding to an Image
                TateMadone Level 1
                Thanks Tracy.

                When I click the 'Remove' button, I'm only removing the item from the datagrid, not the original data source. I'm not actually going to be making any changes to the original data source. I began working with the dataprovider last night, making that the as part of the 'source' for the image and was able to get to the object that I want in the xml...now to just get the object to come up besides 'Object:object, Object:object'. I think I'm on the right track. Thanks so much for the help.

                • 5. Re: Datagrid Binding to an Image
                  TateMadone Level 1

                  This may help. Below is a bit of the code that I'm working on. Just to test the functionality, I'm tryin to populate text in a Panel, binding to the datain my datagrid. I can get into the 'testGrid' object, I just can't get into the dataGridColumn attribute. It would seem logical to just use the 'testGrid.dataProvider.@name' and the data should appear...obviously incorrect?

                  <mx:ComboBox id="treatCmb" dataProvider="{tData}" labelField="name" width="272"/>

                  <mx:DataGrid id="testGrid" dataProvider="{treatCmb.selectedItem.point}" height="270" sortableColumns="false" editable="true" allowMultipleSelection="true">
                  <mx:DataGridColumn id="testColumn" dataField="name" headerText="Location" width="230" editable="false"/>

                  <mx:Panel label="Maps Main">
                  <mx:TextArea text="{testGrid.dataProvider}" width="400"/>

                  Thanks for the help.
                  • 6. Re: Datagrid Binding to an Image
                    ntsiii Level 3
                    No, understand: "testGrid.dataProvider" is a complex object, a collection or array of some other objects. (what is it, an XMLListCollection? or an XMLList? ) What do you expect to see in the TextArea? TextArea needs to display, well, text.

                    To get to text in your scenario, you would have to go two more levels into the dataProvider. 1) you need to get an "item" (xml node?). Then you have to get an attribute or property, then you need to get the value of that property.

                    But I do not think you want text anyway. I think you want a collection of dataProvider item nodes.

                    You almost certainly do not want DataGridColumn. There is nothing there that will help you.

                    Though it is still not clear what you want to have happen. Start over, try to describe what you want to have happen, without theorizing a solution. We'll go from there.

                    • 7. Re: Datagrid Binding to an Image
                      TateMadone Level 1
                      yep...I'm a new user :) . Ok so, I've got a datagrid that is using an external XML file. Here is a clip of the XML.

                      <protocol name="Bone Fracture" id="6" notes="">
                      <point name="Alcoholic Point" id="7" type="tonify" time="20" timeUnit="minutes" needleType="silver" gauge="20" image="images/AlchPoin.png" />

                      The datagrid is currently displaying the <point name="Alchohol Point"... />. There are rough six point <nodes> and all are displaying as they should in the datagrid. But, I want to get at the 'image' attribute for each point. When these six point <nodes> display in the datagrid, I want the image attribute for each point to display in a canvas area I have setup on the page. If I link the image tag source with a 'seletedItem' property, it works but only the one selected item is displayed. I want ALL of the points to be displayed without have to selected any of them. The point should show up in the datagrid and then I should see the assiciated images. If i were to remove one of the points list from the datagrid, the corresponding image should also disappear. I'm not removing anything from the original XML, i'm just removing it from the datagrid.

                      Is that a better explanation? Thanks so much for your help.