5 Replies Latest reply on Jan 21, 2010 6:40 AM by Gregory Lafrance

    Datagrid and multiple ItemRenderer

    CantThinkOfAName22 Level 1

      What I would like to do and haven't been successful is add a column to a Datagrid at runtime.  Each cell in that column is going to be different based upon user data. The first column is populated based upon a user query then another query (i.e. RESTful query) is made to mashup some data.

       

      I wanted a button (mashup data) to appear in the column enabled if data was available and disabled if data was not available.

       

      I was doing something like this:

       

      My MXML file has this:

              <mx:DataGrid id="dg" dataProvider="{ModelLocator.getInstance().list}" itemClick="itemClickHandler(event)" left="10" right="0" bottom="0" top="50" editable="true" >
                  <mx:columns>
                      <mx:DataGridColumn headerText="Name" dataField="name" editable="true" />
                       <mx:DataGridColumn headerText="Data" dataField="someData" itemRenderer="ActionButtonItemRenderer" />
                  </mx:columns>
              </mx:DataGrid>

       

      ActionButtonItemRenderer.as file:

          public class ActionButtonItemRenderer extends Button
          {
              public function ActionButtonItemRenderer()
              {
                  super();

                  label = "Show Data";
              }
             
              override public function set data(value:Object):void {
                  if (null == value.myData) {
                      label = "";
                      this.enabled = false;
                  }
              }

       

              // Handle the search button event.
              override protected function clickHandler(event:MouseEvent):void
              {

                  // Code omitted here...

              }

        }

       

      It works but when I use my mouse wheel to scroll through the records the buttons get all hosed up and the enabled buttons become disabled.  It's weird.

       

      Thanks!

        • 1. Re: Datagrid and multiple ItemRenderer
          Gregory Lafrance Level 6

          The reason you are having problems is because Flex recycles itemRenderers for controls like datagrid.

           

          So in your actionscript class, instead of the code changing the properties of the itemRenderer instance itself, you must mae changes to the data itself in the dataProvider. That's the only way to do it.

           

          If this post answers your question or helps, please mark it as such.


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex / AIR Development, Training, and Support Services

          1 person found this helpful
          • 2. Re: Datagrid and multiple ItemRenderer
            CantThinkOfAName22 Level 1

            I am not sure I understand.  My data is different.  The data either exists or doesn't exist.  If the data exists make the button enabled.  If the data doesn't exist then disable the button.  The end result would be a column that has cells with enabled or disabled buttons.

             

            How else can I do this if not in the code?

             

            One more thing I don't think you can create a button in the data provider.  It has to be done in the itemRenderer.

             

            Thanks!

            • 3. Re: Datagrid and multiple ItemRenderer
              Gregory Lafrance Level 6

              You create an ArrayCollection or XMLListCollection and populate it initially with perhaps data that would represent "no data".

               

              Then if your queries return real data, the dataProvider object now "has data".

               

              The itemRenderer does the appropriate thing if there is not is no data.

               

              You don't generate the button in the dataProvider, you just get the label and visible property value etc. from the dataProvider.

               

              If this post answers your question or helps, please mark it as such.


              Greg Lafrance - Flex 2 and 3 ACE certified

              www.ChikaraDev.com

              Flex / AIR Development, Training, and Support Services

              1 person found this helpful
              • 4. Re: Datagrid and multiple ItemRenderer
                CantThinkOfAName22 Level 1

                "Then if your queries return real data, the dataProvider object now "has data"."

                We are doing this now.  The field either has data or doesn't have data.  We can populate the field that doesn't have data with a "no data available".

                 

                "The itemRenderer does the appropriate thing if there is not is no data."

                How does the itemRenderer do the appropriate thing?  Aren't we doing that by checking for a null condition?

                 

                "You don't generate the button in the dataProvider, you just get the label and visible property value etc. from the dataProvider."

                Correct.  Isn't this what we are doing now?  Instead of the visible property we are setting the enabled property.

                • 5. Re: Datagrid and multiple ItemRenderer
                  Gregory Lafrance Level 6

                  I'll try this one more time.

                   

                  You must use a dataProvider object. You cannot change the properties of components in the itemRenderer directly. You must change the data in the dataProvider and then your changes will be reflected in the itemRenderer control as appropriate.

                   

                  http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_7.html

                   

                  If this post answers your question or helps, please mark it as such.


                  Greg Lafrance - Flex 2 and 3 ACE certified

                  www.ChikaraDev.com

                  Flex / AIR Development, Training, and Support Services