7 Replies Latest reply on Dec 8, 2008 5:58 PM by jahh_drum

    Item renderer in datagrid with actionscript

    jahh_drum
      Hi

      I want to implement a datagrid similar to the one given int the starting flex examples but in actionscript. I am having a problem with the itemRenderer. I can't figure it out how I cam create a imagerender in a datagridcolumn.

      My code is:

      var dataG:DataGrid = new DataGrid();
      dataG.dataProvider = xmlList;

      var coluna:DataGridColumn = new DataGridColumn();
      coluna.dataField="nome";
      coluna.headerText="Title";

      var coluna2:DataGridColumn = new DataGridColumn();
      coluna2.dataField="thumbnail";
      coluna2.headerText="Title";


      var imagem:Image = new Image();
      imagem.height = 75;
      imagem.source = "../tb/"+instrumentos.thumbnail+".jpg";

      //HERE RELIES MY PROBLEM -HOW TO ASSOCIATE AN IMAGE TO THE ITEM RENDERER
      coluna2.itemRenderer = new ClassFactory(imagem);

      var lalala:Array = new Array();
      lalala.push(coluna);
      lalala.push(coluna2);

      dataG.columns = lalala;

      thanks in advance
        • 1. Re: Item renderer in datagrid with actionscript
          Level 7

          "jahh_drum" <webforumsuser@macromedia.com> wrote in message
          news:ghcs5u$p2d$1@forums.macromedia.com...
          > Hi
          >
          > I want to implement a datagrid similar to the one given int the starting
          > flex
          > examples but in actionscript. I am having a problem with the itemRenderer.
          > I
          > can't figure it out how I cam create a imagerender in a datagridcolumn.
          >
          > My code is:
          >
          > var dataG:DataGrid = new DataGrid();
          > dataG.dataProvider = xmlList;
          >
          > var coluna:DataGridColumn = new DataGridColumn();
          > coluna.dataField="nome";
          > coluna.headerText="Title";
          >
          > var coluna2:DataGridColumn = new DataGridColumn();
          > coluna2.dataField="thumbnail";
          > coluna2.headerText="Title";
          >
          >
          > var imagem:Image = new Image();
          > imagem.height = 75;
          > imagem.source = "../tb/"+instrumentos.thumbnail+".jpg";
          >
          > //HERE RELIES MY PROBLEM -HOW TO ASSOCIATE AN IMAGE TO THE ITEM
          > RENDERER
          > coluna2.itemRenderer = new ClassFactory(imagem);
          >
          > var lalala:Array = new Array();
          > lalala.push(coluna);
          > lalala.push(coluna2);
          >
          > dataG.columns = lalala;

          ClassFactory takes a class, not an instance.

          Try something like:

          foo:ClassFactory = new ClassFactory(Image)
          foo.properties= {height=75, source:"../tb/"+instrumentos.thumbnail+".jpg"};
          coluna2.itemRenderer = foo;

          Note that using a ClassFactory this way will give you the same image in
          every renderer to start out with. However, I believe that image
          itemRenderers by default will take their source from the data property when
          that gets set.

          HTH;

          Amy


          • 2. Item renderer in datagrid with actionscript
            jahh_drum Level 1
            Thank you. Your answer has solved the problem, I can see the image. My problem now is how to show a different image in each row. I was thinking in something like....

            foo.properties= {height:75, source:"../tb/"+ dataG.data.thumbnail+ ".jpg"};
            but I can't access to the data.

            My full code is now
            var dataG:DataGrid = new DataGrid();
            var listInstr:XMLList = instrumentos.(ID_Instr == listaAux[n].children()[0].toString());
            dataG.dataProvider = listInstr;
            var coluna:DataGridColumn = new DataGridColumn();
            coluna.dataField="nome";
            coluna.headerText="Title";

            var coluna2:DataGridColumn = new DataGridColumn();
            coluna2.dataField="thumbnail";
            coluna2.headerText="Title";

            var lalala:Array = new Array();
            lalala.push(coluna);
            lalala.push(coluna2);

            dataG.columns = lalala;

            var foo:ClassFactory = new ClassFactory(Image);
            coluna2..itemRenderer = foo;
            foo.properties= {height:75, source:"../tb/"+ dataG.data.thumbnail+ ".jpg"};



            • 3. Re: Item renderer in datagrid with actionscript
              Level 7

              "jahh_drum" <webforumsuser@macromedia.com> wrote in message
              news:ghf20n$hhp$1@forums.macromedia.com...
              > Thank you. Ypur answer has solved the problem:)

              You're welcome :-)


              • 4. Re: Item renderer in datagrid with actionscript
                jahh_drum Level 1
                I am sorry to bother you again. but I have a question that you might konw the answer. As you said the ClassFactory only shows onw image. I tried to connect the data of the Datagrid with the source like this:

                var fu:ClassFactory = new ClassFactory(Image);
                fu.properties= {height:75, source:"../tb/"+ dataG.data.thumbnail+ ".jpg"};
                coluna2.itemRenderer = fu;

                but it gives me an error saying that the data is null.
                • 5. Re: Item renderer in datagrid with actionscript
                  Level 7

                  "jahh_drum" <webforumsuser@macromedia.com> wrote in message
                  news:ghgeu1$a93$1@forums.macromedia.com...
                  >I am sorry to bother you again. but I have a question that you might konw
                  >the
                  > answer. As you said the ClassFactory only shows onw image. I tried to
                  > connect
                  > the data of the Datagrid with the source like this:
                  >
                  > var fu:ClassFactory = new ClassFactory(Image);
                  > fu.properties= {height:75, source:"../tb/"+ dataG.data.thumbnail+ ".jpg"};
                  > coluna2.itemRenderer = fu;
                  >
                  > but it gives me an error saying that the data is null.

                  I suggest you look in the help to see what a Class Factory actually is.
                  Here's a chapter from ActionScript 3 design patterns that describes the raw
                  concept independent from the Flex implementation of it:
                  http://tinyurl.com/factoryPattern. That will give you a lot of insight into
                  why this isn't working for you. It might help to realize that the List
                  controls take the factory you give them and make new instances with the
                  properties you specified. ALL of the instances have exactly the properties
                  you specified. They can't make different instances with different
                  properties.

                  You might also want to look at the resources pointed to in Q2:
                  http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf


                  • 6. Re: Item renderer in datagrid with actionscript
                    Level 7

                    "jahh_drum" <webforumsuser@macromedia.com> wrote in message
                    news:ghgeu1$a93$1@forums.macromedia.com...
                    >I am sorry to bother you again. but I have a question that you might konw
                    >the
                    > answer. As you said the ClassFactory only shows onw image. I tried to
                    > connect
                    > the data of the Datagrid with the source like this:
                    >
                    > var fu:ClassFactory = new ClassFactory(Image);
                    > fu.properties= {height:75, source:"../tb/"+ dataG.data.thumbnail+ ".jpg"};
                    > coluna2.itemRenderer = fu;
                    >
                    > but it gives me an error saying that the data is null.
                    >

                    Also check out question 13 in the FAQ.


                    • 7. Re: Item renderer in datagrid with actionscript
                      jahh_drum Level 1
                      Thank you. You were very helpful:)