Using itemFormatter() in flexgrid that has column groups

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

  • Posted 11 September 2019, 1:00 am EST


    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!

  • Replied 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:

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

  • Replied 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 != {
    let percentage = 0;
    percentage = calculatePercentage(Number(gridSales_L.getCellData(r, c, false)), high_month_value);
    if (percentage >= .0001) { = getColorForCell(percentage); = '#000000' //font color
    } else { = null;
  • Replied 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:

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

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels