Skip navigation
Currently Being Moderated

GridItemRenderer not updating on data refresh

Feb 15, 2013 7:32 AM

Tags: #flex #datagrid #flex4.6 #griditemrenderer

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>

 
Replies
  • Currently Being Moderated
    Feb 15, 2013 10:32 PM   in reply to DeanLoganBH

    <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>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points