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.

Parents
  • 620
    Offline posted

    Hello Chris,

    Thank you for your patience while I was looking into this matter for you.

    I have been looking into your question and what I could say is that applying conditional cell styling based both on information of the row and column is possible using either of the two IgxGrid’s properties - cellClasses or cellStyles.

    Both input properties accept an object literal, containing key-value pairs, where the key is the name of the CSS class/style properties, while the value is either a callback function that returns a boolean, or boolean value. The callback signature for both properties looks like the following:

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean

    This provides different information regarding the cell (i.e., the data for the respective row, the column field, the value of the cell, and the row index) which allows defining custom rules based on one or many parameters, depending on the scenario.

    Having this in mind, I have prepared a small sample, demonstrating how such behavior could be achieved. In the attached sample I have included five IgxGrids, each of which demonstrates how the different parameters could be used for custom styling, where the last example includes styling based on the row index and the column filed.

    Additionally, you have mentioned that the “actual data can be stitched into either or both projection scenarios” and that the “users would like to see the actual data highlighted”. What I could say is that if you are referring to the data being added dynamically and this change should be reflected (i.e., the added data should be highlighted), then using either cellClasses or cellStyles would be quite helpful for achieving this as the styling is applied immediately if the cell meets the condition of the styling.

    Furthermore, since I was not sure how and when these changes are applied on your side, I have used a button in the first IgxGrid (i.e., “ADD UNITS IN STOCK”) and when clicking it, new values are added in the “Units In Stock” column for the first and fourth records of the grid, which initially are not present, and respectively the custom styling is applied only for the first cell, as it meets the condition.

    However, if you are referring that the data (i.e., “data from a third scenario, the actual production values”) could be present anywhere in the grid and should be highlighted, then I believe that you would find the third example “Grid #3 – cellValue based style” quite helpful, as in this example I am applying styling to all cells whose values are present in a predefined data set (i.e., _cellValues in the .ts file).

    Here could be found my sample for your reference. Please test it on your side and let me know if you need any further assistance.

    If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce it.

    Looking forward to hearing from you. 

    Sincerely,
    Riva Ivanova
    Entry Level Software Developer

Reply Children
No Data