2 Replies Latest reply on Mar 21, 2012 6:11 AM by DeanLoganBH

    Datagrid Item Renderer not displaying correct data

    DeanLoganBH Level 3

      I have a datagrid that displays information from a web service, which is refreshed every 60 seconds.

      When the status is no 0 for a line a corresponding color is used to fill in the background.  I created a Item Renderer to fill in the background color.

      When the table is initially created, the colors are correct.  After the data is refreshed, then the background color value is carried over to the next row.

       

      The Spark DataGrid works better than the MX AdvancedDateGrid or DataGrid.  This was working in Flex 3, but I used an function which replaced the DataGridColumn that doesn't work in Flex 4.

       

      protected function init(event:FlexEvent):void
                  {
                      var showBackground:Boolean = false;
                      var backgroundColor:uint = new uint();
                      var labelTextColor:uint = new uint();
                      
                      var dgListData:DataGridListData = listData as DataGridListData;
                      var dataGrid:DataGrid = dgListData.owner as DataGrid;
                      
                      // comment this out if you want to see the background over the
                      // selection and highlight indicators
                      if (dataGrid.isItemSelected(data) || dataGrid.isItemHighlighted(data))
                      {
                          // clear the background so you can see the selection/highlight colors
                          showBackground = false;
                          return;
                      }
                      
                      
                      switch(data["MessageLevel"])
                      {
                          case 0:
                              showBackground = false;
                              backgroundColor = 0xFFFFFF;
                              labelTextColor = 0x000000;
                              break;
                          case 1: 
                              showBackground = true;
                              backgroundColor = 0x00FF00;  // light green
                              labelTextColor = 0x000000;
                              break;
                          case 2:
                              showBackground = true;
                              backgroundColor = 0x015F00; // dark green
                              labelTextColor = 0xFFFFFF;
                              break;
                          case 3:
                              showBackground = true;
                              backgroundColor = 0xFDFF00; // yellow
                              labelTextColor = 0x000000;
                              break;
                          case 4:
                              showBackground = true;
                              backgroundColor = 0x7F6E3F; // tan
                              labelTextColor = 0xFFFFFF;
                              break;
                          case 5:
                              showBackground = true;
                              backgroundColor = 0xFF8A00; // orange;
                              labelTextColor = 0x000000;
                              break;
                          case 6:
                              showBackground = true;
                              backgroundColor = 0xFFDFE0; // rose
                              labelTextColor = 0x000000;
                              break;
                          case 7:
                              showBackground = true;
                              backgroundColor = 0xFF0000; //red
                              labelTextColor = 0xFFFFFF;
                              break;    
                      }
                      
                      if(showBackground) {
                          var bgFill:SolidColor = new SolidColor();
                          bgFill.color = backgroundColor;
                      
                          dataContainer.setStyle("backgroundColor",backgroundColor);
                          lblData.setStyle("color", labelTextColor);
                      }
      
        • 1. Re: Datagrid Item Renderer not displaying correct data
          DeanLoganBH Level 3

          DataGrid_bgissue.png

           

          Here is an image as an example.  the Column with the number determines the color to display.  Where the color is 0, it shouldn't display any background color and hopefully revert to the standarad grid row color. 

           

          Usually, there is a row that had that color before the grid data is refreshed.

           

          Any ideas?

          • 2. Re: Datagrid Item Renderer not displaying correct data
            DeanLoganBH Level 3

            I added an "else" statement to make sure that a color was always added, even if the level was 0.  I also added a backgroundAlpha style to both, to turn the value off or on.

            So far, this seems to be the solution.

             

             

            if(showBackground) {
            var bgFill:SolidColor = new SolidColor();
            bgFill.color = backgroundColor;
            dataContainer.setStyle("backgroundColor",backgroundColor);
            labelDisplay.setStyle("color", labelTextColor);
            dataContainer.setStyle("backgroundAlpha",1);
            } else {
            dataContainer.setStyle("backgroundColor",backgroundColor);
            labelDisplay.setStyle("color", labelTextColor);
            dataContainer.setStyle("backgroundAlpha",0);
            }
            1 person found this helpful