Using itemFormatter() in flexgrid that has column groups

Using itemFormatter() in flexgrid that has column groups

Posted by: joe on 11 September 2019, 1:00 am EST

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 11 September 2019, 1:00 am EST - Updated 3 October 2022, 10:25 am EST

  Hi!

  I have a flexgrid that I use column groups in (see attached image). The number of columns per group is always 4 but the number of groups can vary from 1 - n. I want to color code cells in the grid based on max values for each column. But I find the itemFormatter() doesn’t work the same way in a grid with column groups as it does in grids without them. In my case, the itemFormatter() is called only 3 times despite there being well over 200 cells in the grid. Is there an override for itemFormatter() to use for formatting cells in grids with column groups? What’s the secret chant to get it to work?

  In the code below, the cosole log shows (r = 0, c = 0), (r = 0, c = 0), and (r = 0, c = 1).

      myGrid.itemFormatter = function (panel, r, c, cell) {
        console.log('r = ' + r);
        console.log('c = ' + c);
      }
  
  

  Thanks for your help!

  Joe

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 September 2019, 6:34 pm EST

  Hi Joe,

  We are sorry but we were not able to replicate the issue at our end. Please refer to the sample below that we used to replicate the issue:

  https://stackblitz.com/edit/js-axrrz7

  Could you please tell us whether we are missing something in order to replicate the issue? Or you may also modify the sample accordingly.

  Regards,
  
  Ashwin

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 12 September 2019, 12:06 am EST

  Thanks for your quick reply!

  I wasn’t clear. I can style the headers themselves. I can’t style the data cells. Ultimately, I want the data cells to be color coded based on the value of the number in the cell where the higher values get darker colors and the lower values get lighter colors. In a regular flexgrid that doesn’t have column groups I have acheived this (see picture below). When I put the same console.log() calls in the item formatter of a regular flexgrid without column groups (see code below) I can see r and c iterate through all rows and all columns in the grid so that each cell gets indexed (1,1), (1,2), (1,3), …, (2,1), (2,2), (2,3)…and so on. In the grid with column groups I see the behavior I described above where the itemFormatter() is only getting called 3 times: (r = 0, c = 0), (r = 0, c = 0), and (r = 0, c = 1). To me this means the regular data cells in the grid are not being “seen” by the itemFormatter() and that’s why they’re not getting formatted. So, the method I’m using to format the cells in a flexgrid that doesn’t have column groups (see code below and see image below) isn’t working in a grid that has column groups and I don’t understand why.

      myGridWithNoColumnGroups.itemFormatter = function (panel, r, c, cell) {
  
        if (wijmo.grid.CellType.Cell == panel.cellType && panel.columns[c].header != config.app.LOCALE.TEXT_LOCATION) {
          let percentage = 0;
          percentage = calculatePercentage(Number(gridSales_L.getCellData(r, c, false)), high_month_value);
          if (percentage >= .0001) {
            cell.style.background = getColorForCell(percentage);
            cell.style.color = '#000000'  //font color
          } else {
            cell.style.background = null;
          }
        }
      }
  
  ```[img]https://gccontent.blob.core.windows.net/forum-uploads/file-fa6347f6-5f35-4621-ae35-c428ea52f2f9.jpg[/img]

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 September 2019, 2:57 pm EST

  Hi Joe,

  I was still not able to replicate the issue at my end. Please refer to the updated sample below:

  https://stackblitz.com/edit/js-m7s4dz

  Could you please modify the sample so that it replicates the issue or you may provide your sample so that I can investigate further.

  ~regards