Flexgrid Column Group Header Colors changing uncommanded

Flexgrid Column Group Header Colors changing uncommanded

Posted by: joe on 17 July 2019, 2:48 pm EST

• 

  joe

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 July 2019, 2:48 pm EST

  Hi!

  I have a flexgrid with column groups. I’ve set the header background colors as I wish. However, when I press F12 to view the browser console, or I scroll the grid, the background colors of the group headers change. I don’t detect any code running in my app that might be causing it.

  Here is the code I use to set the colors:

      
      let chart_palette = wijmo.chart.Palettes.standard;;
      let color_index = 0;
  
      grid.itemFormatter = function (panel, r, c, cell) {
        if (panel.cellType == wijmo.grid.CellType.ColumnHeader && r == 0) {
  
          for (let i = 0; i < raw_data.all_games.length; i++) {
            if (panel.columns[c].binding == 'games[' + i + '].sold_count') {
              cell.style.setProperty("background-color", chart_palette[color_index]);
              color_index++;
            }
          }
        }
      }
  
  

  I use the standard palette to keep the group header colors consistent with some line charts I use on the same page in order to keep the data more easily visually identifiable for the user. But the changing colors in the headers is ruining my efforts!

  Thanks!

  Joe

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 18 July 2019, 3:06 am EST

  Hi Joe,

  We believe that the issue is arising due the color_index. The value of color_index is stored as a closure for itemFormatter and every time the itemFormatter runs, it uses the last value of color_index and not the initialized value which is 0.
  
  Therefore, when you press F12 or scroll the grid, the itemFormatter runs again but now with the new value of color_index and therefore shows a different color.

  To solve the issue, please try moving the declaration of color_index inside the itemFormatter like this:

  let chart_palette = wijmo.chart.Palettes.standard;;
  grid.itemFormatter = function (panel, r, c, cell) {
        if (panel.cellType == wijmo.grid.CellType.ColumnHeader && r == 0) {
              let color_index = 0;
              for (let i = 0; i < raw_data.all_games.length; i++) {
                    if (panel.columns[c].binding == 'games[' + i + '].sold_count') {
                      cell.style.setProperty("background-color", chart_palette[color_index]);
                       color_index++;
                    }
              }
        }
  }
  

  Also, please refer to the sample below and let us know if this fulfills your requirement:

  https://stackblitz.com/edit/js-4uojy1

  Regards,
  
  Ashwin

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 18 July 2019, 9:59 am EST

  Thanks, again, Ashwin!

  Moving the color_index initialization inside the itemFormatter produced headers that were all the same color (the 0 index color in the palette). No worries. The stackblitz link gave me a different direction to go in to manage the index.

  Problem solved!

  I appreciate your quick and helpful responses!

  Joe

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 July 2019, 7:41 am EST

  Hi Joe,

  Glad to be able to help.