4 Replies Latest reply on Feb 19, 2013 7:15 AM by DeanLoganBH

    GridItemRenderer not updating on data refresh

    DeanLoganBH Level 3

      I have a DataGrid with 4 columns, 3 that use GridItemRenderer.  The DataGrid data is split into a number of pages based on the size of the grid and the amount of data.

      The last 2 GridItemRenderers use a custom component that draws a percentage bar with the percentage amount.

       

      PercentageBar.png

       

      When the DataGrid is initially created, the 1st column's GridItemRenderer works great.  It changes color based on a value.

      The last 2 GridItemRenderers do not display anything.  When clicking on the second page, it does display, however the first row doesn't show the text value.  When clicking onto another page, then the previous pages drawing values overwrite the current values.  i.e. it draws the percentage bar based on the previous row values.

       

      Initial Page

      The 3rd column is blank.  I attempted to put the drawing information for the percentage bar directly into the GridItemRenderer, but it only displays for the first row.

      Grid_initial_load.png

       

      Second Page

      When the second page loads, it shows the bars, however, the values are off.  The red in the bar with 100% is for another bar.

      Grid_second_page.png

       

      First Page Reloaded after navigation click

      Navigating back to the first page just gives false results as well.  The first row is missing the percentage value.

      Grid_first_page_reload.png

       

      The GridItemRenderer is fairly straight forward.  I overrid the set data function to add the information.  I even tried a couple of the Invalidate methods to see if that would fix the issue.  It hasn't.

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark"

                          xmlns:mx="library://ns.adobe.com/flex/mx"

                          xmlns:DeanLogic="com.DeanLogic.*"

                          width="100%" height="100%">

          <fx:Script>

              <![CDATA[

       

                  override public function set data(value:Object):void {

                      super.data = value;

                      if(value == null) {

                          return;

                      } else {

                          var thisPercentage:Number = new Number(data["CurrentMonthPercentage"]);

                          monthBar.setBar(Math.floor(this.height * .99), Math.floor(this.width * .99),thisPercentage);

                      }

       

                      super.invalidateDisplayList();

                      super.invalidateProperties();

                  }

       

              ]]>

          </fx:Script>

          <DeanLogic:PercentBar id="monthBar" />

      </s:GridItemRenderer>

        • 1. Re: GridItemRenderer not updating on data refresh
          HarshalB

          <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                              xmlns:s="library://ns.adobe.com/flex/spark"

                              xmlns:mx="library://ns.adobe.com/flex/mx"

                              xmlns:DeanLogic="com.DeanLogic.*"

                              width="100%" height="100%"

                              dataChange="datagriditemrenderer1_dataChangeHandler(event)">

           

             <fx:Script>

                  <![CDATA[

           

                      override public function set data(value:Object):void {

                          super.data = value;

                          if(value == null) {

                              return;

                          } else {

                              var thisPercentage:Number = new Number(data["CurrentMonthPercentage"]);

                              monthBar.setBar(Math.floor(this.height * .99), Math.floor(this.width * .99),thisPercentage);

                          }

           

                          super.invalidateDisplayList();

                          super.invalidateProperties();

                      }

           

                     protected function datagriditemrenderer1_dataChangeHandler(event:FlexEvent):void {

                          if(data)

                                                                 {

                          

                              var thisPercentage:Number = new Number(data["CurrentMonthPercentage"]);

                              monthBar.setBar(Math.floor(this.height * .99), Math.floor(this.width * .99),thisPercentage);

           

                            }

                          super.invalidateDisplayList();

                          super.invalidateProperties();

                     }

           

                   ]]>

              </fx:Script>

              <DeanLogic:PercentBar id="monthBar" />

          </s:GridItemRenderer>

          1 person found this helpful
          • 2. Re: GridItemRenderer not updating on data refresh
            DeanLoganBH Level 3

            Thanks HarshalB.

            That solved most of the data matching issue, but I also had to add the creationComplete call to do the initial load on the first page.

             

             

            <?xml version="1.0" encoding="utf-8"?>

            <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                 xmlns:s="library://ns.adobe.com/flex/spark"

                 xmlns:mx="library://ns.adobe.com/flex/mx"

                 creationComplete="creationCompleteHandler(event)"

                 dataChange="dataChangeHandler(event)"

                 xmlns:DeanLogic="com.DeanLogic.*">

            <fx:Declarations>

              <mx:Sprite id="barBackground" />

              <s:SpriteVisualElement id="spriteHolder" />

              <fx:Number id="thisBarLength">600</fx:Number>

              <fx:Number id="thisBarHeight">100</fx:Number>

            </fx:Declarations>

            <fx:Script>

              <![CDATA[

               import mx.events.FlexEvent;

              

               override public function set data(value:Object):void {

                super.data = value;

                if(value == null) {

                 return;

                } else {

                 var thisPercentage:Number = new Number(data["SevenDayPercentage"]);

                 sevenDayBar.setBar(Math.floor(super.height * .99), Math.floor(super.width * .99), thisPercentage);

                }

               

                super.invalidateDisplayList();

                super.invalidateProperties();

               }

              

               protected function dataChangeHandler(event:FlexEvent):void {

                if( data == null ) {

                 return;

                } else {

                 var thisPercentage:Number = new Number(data["SevenDayPercentage"]);

                 sevenDayBar.setBar(Math.floor(super.height * .99), Math.floor(super.width * .99), thisPercentage);

                }

                super.invalidateDisplayList();

                super.invalidateProperties();

               }

              

               protected function creationCompleteHandler(event:FlexEvent):void

               {

                if( data == null ) {

                 return;

                } else {

                 var thisPercentage:Number = new Number(data["SevenDayPercentage"]);

                 sevenDayBar.setBar(Math.floor(super.height * .99), Math.floor(super.width * .99), thisPercentage);

                }

                super.invalidateDisplayList();

                super.invalidateProperties();

               }

              

              ]]>

            </fx:Script>

            <DeanLogic:PercentBar id="sevenDayBar" />

            </s:GridItemRenderer>

             

            However, I am still having an issue with the first row being blank, regardless of the page.  There is data in that row, but for some reason, the GridItemRenderer won't display.

            Grid_first_page_reload_2.pngGrid_second_page_2.png

             

            • 3. Re: GridItemRenderer not updating on data refresh
              DeanLoganBH Level 3

              It looks as if the first row does not pass in the height and width values to the GridItemRenderer, which is why it doesn't display.

              After putting some debug text in each of the function, it looksl ike on the first row (index 0), the data load function is called twice, but the creation Complete is not called, which is the only function that finds the height and width of the cell.  Since height and width of 0 are being passed in, I can't resize the precentage bar correctly.

               

              dataChange row 0 width = 318 super.height = 0 this.height = 0

              data row 0 width = 318 this.height = 0

              data row 0 width = 318 this.height = 0

               

              dataChange row 1 width = 318 super.height = 0 this.height = 0

              data row 1 width = 318 this.height = 0

              creationComplete row 1 width = 318 super.height = 30 this.height = 30

               

              dataChange row 2 width = 318 super.height = 0 this.height = 0

              data row 2 width = 318 this.height = 0

              creationComplete row 2 width = 318 super.height = 30 this.height = 30

               

              dataChange row 3 width = 318 super.height = 0 this.height = 0

              data row 3 width = 318 this.height = 0

              creationComplete row 3 width = 318 super.height = 30 this.height = 30

               

              Still debugging.

              • 4. Re: GridItemRenderer not updating on data refresh
                DeanLoganBH Level 3

                I decided to settle for using FlexGlobals to fix the issue.

                 

                In the main I set height and width values.  The height is defaulted and the width is found after the screen is sized.

                 

                dataGridColumnWidth = Math.floor(siteDataGrid.width * .25);

                 

                 

                 

                 

                Then, in the DataItemRenderer, I used the FlexGlobals for the height and width.  I left the if else statement in there, just in case there is a solution found.  But, I probably should take it out.

                 

                import mx.core.FlexGlobals;

                 

                override public function set data(value:Object):void {
                      super.data = value;

                      if(value == null) {
                            return;
                     } else {
                            var thisPercentage:Number = new Number(data["SevenDayPercentage"]);
                            if(this.height != 0 && this.width != 0){
                                  sevenDayBar.setBar(Math.floor(this.height * .99), Math.floor(this.width * .99), thisPercentage);
                            } else {
                             sevenDayBar.setBar(Math.floor(FlexGlobals.topLevelApplication.dataGridRowHeight * .99), Math.floor(FlexGlobals.topLevelApplication.dataGridColumnWidth * .99), thisPercentage);
                            }
                 
                      }

                      super.invalidateDisplayList();
                      super.invalidateProperties();
                }