10 Replies Latest reply on May 4, 2011 5:37 AM by bucpatr1

    How populate itemrenderer items with data.

    nikos101 Level 2

      How populate itemrenderer items with data. Ie after my app starts I generate an array collection that I want to assign as the data provider to each combobox in my item renderer, which im using in a datagrid.

        • 1. Re: How populate itemrenderer items with data.
          bucpatr1 Level 2

          I'm guessing that you have a collection of objects and what you want to  do is show a set of additional data for each item in that list right? So  for example if the datagrid was a list of books and you wanted to  display a list of stores where each book was sold. The way you approach  that depends on the nature of the relationship between the two collections. If the sub-collection is static, for example if you have a single list of stores that gets repeated for each book, then the solution is fairly simple. Simply use the factory of the item renderer to pass in the sub-collection as a parameter that will be assigned to a variable inside your item renderer. The other possibility is that you have a dynamic sub-collection, for example if each book has a different list of stores. In that case you should be able to access the subcollection through the 'data' property of the itemrenderer. In the case of the books data would be an instance of a book, so you would assign the dataprovider of the combobox to data.stores (or whatever the name of the sub-collection property is in the Book object).

          • 2. Re: How populate itemrenderer items with data.
            nikos101 Level 2

            hi, do you have any code examples for this sort of thing?

            • 3. Re: How populate itemrenderer items with data.
              bucpatr1 Level 2
              <?xml version="1.0" encoding="utf-8"?>
              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark"
                             xmlns:mx="library://ns.adobe.com/flex/mx"
                             minWidth="955"
                             minHeight="600">
                  <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                      <s:ArrayCollection id="booksWithStores">
                          <fx:Object name="book1" stores="{new ArrayCollection(['store1','store2'])}"/>
                          <fx:Object name="book2" stores="{new ArrayCollection(['store1','store3'])}"/>
                          <fx:Object name="book3" stores="{new ArrayCollection(['store2','store3', 'store4'])}"/>
                          <fx:Object name="book4" stores="{new ArrayCollection(['store1','store4'])}"/>
                      </s:ArrayCollection>
                      <s:ArrayCollection id="booksWithoutStores">
                          <fx:Object name="bookA"/>
                          <fx:Object name="bookB"/>
                          <fx:Object name="bookC"/>
                          <fx:Object name="bookD"/>
                      </s:ArrayCollection>
                      <s:ArrayCollection id="allStores">
                          <fx:String>store1B</fx:String>
                          <fx:String>store2B</fx:String>
                          <fx:String>store3B</fx:String>
                          <fx:String>store4B</fx:String>
                      </s:ArrayCollection>
                      
                      <fx:Component id="renderer1" className="Renderer1">
                          <s:MXDataGridItemRenderer>
                              <s:DropDownList dataProvider="{data.stores}" />    
                          </s:MXDataGridItemRenderer>
                      </fx:Component>
                      
                      <fx:Component id="renderer2" className="Renderer2">
                          <s:MXDataGridItemRenderer>
                              <s:DropDownList dataProvider="{storesList}" />
                              <fx:Script>
                                  <![CDATA[
                                      import mx.collections.ArrayCollection;
                                      
                                      [Bindable]
                                      public var storesList:ArrayCollection;
                                  ]]>
                              </fx:Script>
                          </s:MXDataGridItemRenderer>
                      </fx:Component>
                  </fx:Declarations>
                  
                  <mx:Form>
                      <mx:FormItem label="Dynamic Stores">
                          <mx:DataGrid dataProvider="{booksWithStores}" width="354">
                              <mx:columns>
                                  <mx:DataGridColumn dataField="name"/>
                                  <mx:DataGridColumn dataField="stores" itemRenderer="{renderer1}"/>
                              </mx:columns>
                          </mx:DataGrid>
                      </mx:FormItem>
                      <mx:FormItem label="Static Stores">
                          <mx:DataGrid dataProvider="{booksWithoutStores}" width="354">
                              <mx:columns>
                                  <mx:DataGridColumn dataField="name"/>
                                  <mx:DataGridColumn dataField="stores" itemRenderer="{createRendererWithProperties(Renderer2, {storesList:allStores})}"/>
                              </mx:columns>
                          </mx:DataGrid>
                      </mx:FormItem>
                  </mx:Form>
                  
                  <fx:Script>
                      <![CDATA[
                          import mx.collections.ArrayCollection;
              
                          public static function createRendererWithProperties(renderer:Class, properties:Object):IFactory
                          {
                              var factory:ClassFactory=new ClassFactory(renderer);
                              factory.properties=properties;
                              return factory;
                          }
                      ]]>
                  </fx:Script>
              </s:Application>
              1 person found this helpful
              • 5. Re: How populate itemrenderer items with data.
                nikos101 Level 2

                thanks bucpatr1, one of the best answers ever

                • 6. Re: How populate itemrenderer items with data.
                  nikos101 Level 2

                  hi again, what would be the best way to get the selected store for the item renderer in the parent component? Dispatch an event or a signal from the item renderer?

                  • 7. Re: How populate itemrenderer items with data.
                    bucpatr1 Level 2

                    You would have to dispatch a custom event from the renderer to the parent containing whatever data you need.

                    1 person found this helpful
                    • 8. Re: How populate itemrenderer items with data.
                      nikos101 Level 2

                      cool thought that, one more thing, do you know when or where the itemrenderer.data value is set. I can't find it in the adgColumn class

                      • 9. Re: How populate itemrenderer items with data.
                        bucpatr1 Level 2

                        Not sure offf the top of my head but I think its when the renderer is first created and then whenever the underlying data changes. If you want you can override the 'set data(value:Object)' method of the inline item renderer if you want to do something on data change.

                        • 10. Re: How populate itemrenderer items with data.
                          nikos101 Level 2

                          its not before creation complete I think, its a funny one