Change style of a single column of a c1-pivot-grid

Change style of a single column of a c1-pivot-grid

Posted by: carlos.almeida on 28 September 2023, 3:04 pm EST

• 

  carlos.almeida

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 28 September 2023, 3:04 pm EST

  Hello,

  We need to change the sytle of a single column of the c1-pivot-grid.

  Our pivot grid uses dates as columns. We want to show weekends and holidays with a different background color

  Is it possible to add a CSSClass to these colums?

  Thanks,

  Carlos

• 

  carlos.almeida

  • Post Options:
  • Link
    Copy

  Posted 28 September 2023, 3:06 pm EST - Updated 28 September 2023, 3:11 pm EST

  

  2509×960 354 KB

• 

  carlos.almeida

  • Post Options:
  • Link
    Copy

  Posted 28 September 2023, 3:06 pm EST - Updated 28 September 2023, 3:11 pm EST

  

  2509×960 354 KB

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 29 September 2023, 12:00 am EST - Updated 29 September 2023, 12:11 am EST

  Hi,

  To accomplish this, you can employ the item formatter to insert your customized CSS class into the cells that require a style modification. Subsequently, you can then apply CSS rules to this class. Please consult the provided code snippet and accompanying sample, which illustrates the process of highlighting cells with even values in the third column.

  // Define a function to format the grid cells
  function pivotItemFormatter(panel, row, col, cell) {
   let binding = panel.columns[col].binding;
      // Check if the cell type is 'Cell'
      if (panel.cellType === wijmo.grid.CellType.Cell) {
          // Get the value from the data source
          let value = panel.grid.collectionView.sourceCollection[row][binding];
          // Check if the column index is 2 and the value is even
          if (col === 2 && value % 2 === 0) {
              // Add a custom class to the cell for styling
              wijmo.addClass(cell, 'custom-class');
          }
      }
  }
  

  Regards,
  
  Avinash

  highlight_cells.zip

• 

  carlos.almeida

  • Post Options:
  • Link
    Copy

  Posted 29 September 2023, 10:13 am EST

  Thanks Avinash,

  It worked!