Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Chris Sworen
935
conditional cell formatting row + column based
posted

I am using AG/IG v 12.3.

My basic use case is a comparison of 2 time-based scenarios with a dynamic horizon (production projections for 2 years starting different time periods). This produces 3 rows (projections_q1'22, projections_q2'22, difference) for each mapping (product at a production facility) within either scenario (they are matched, even when data isn't present in one of the scenarios). The current columns-making process is as follows:

  buildColumns(param:string, shorter:boolean, compareTimePeriods:string[], source:string) {
    let formatColumnData = (value:any) => {
      if (value !== null && value !== undefined) {
        if (param.indexOf('PB') > -1 || param.indexOf('EB') > -1) { return value.toFixed(5); }
        else if (param.indexOf('(%)') > -1) { return (value.toFixed(9) * 100).toLocaleString() + '%'; }
        else { return value; }
      } else { return null; }
    };
    let columns:column[] = [{ field: 'Design', type: GridColumnDataType.String, pinned: true, width: '110' }, { field: 'Family', type: GridColumnDataType.String, pinned: true, width: '80' }, { field: 'Facility', type: GridColumnDataType.String, pinned: true, width: '80' }, { field: 'Process', type: GridColumnDataType.String, pinned: true, width: '75' }];
    if (source !== 'UOM') { columns.unshift({ field: 'Scenario', type: GridColumnDataType.String, pinned: true, width: '250' }); }
    if (param.indexOf('%') < 0 && param.indexOf('(days)') < 0 && param.indexOf('AVG') < 0) { columns.push({ field: 'Total', type: GridColumnDataType.Number, pinned: true, width: shorter ? '90' : '125', formatter: formatColumnData }); }
    compareTimePeriods.forEach(w => columns.push({ field: w, type: GridColumnDataType.Number, pinned: false, width: shorter ? '80' : '115', formatter: formatColumnData }));
    return columns;
  };

Users will now have the option to stitch in data from a third scenario, the actual production values The actual data can be stitched into either or both projection scenarios, and the projection data can start at any workweek within the total horizon (chosen start week within Actual data horizon through last workweek chosen, up to the last workweek of the later projection scenario).

Users would like to see the actual data highlighted in a subdued yellow/orange (background) color. I imagine the logic to decide whether it should be highlighted should look something like this:

scenIndex = rowIndex % 3;
if (columnName < starts[scenIndex] && scenIndex < 2) { cell.highlight(); }

The implementation at the row level seems a bit beyond the available example.