Best way to change flexgrid cell colours

Best way to change flexgrid cell colours

Posted by: zam.abdulvahid on 19 October 2018, 9:58 am EST

• 

  zam.abdulvahid

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 October 2018, 9:58 am EST

  Hi Team,

  What would be an ideal way to change flexgrid cell background colours without affecting performance. Is it inside ItemFormatter itself or any other better way.

  My grid will have around 150-200 columns and 1000’s of rows getting added through lazy loading.

  And my grid will have merged headers using columnprovider

  Best regards,
  
  Zam

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 22 October 2018, 12:44 am EST

  Hi Zam,

  There are several ways to style the flexgrid cells. The best suitable way would depend on the requirement.
  
  • If you are looking to simple style the grid’s cell, you may do so using CSS classes like .wj-cell, .wj-alt:

  .wj-cell{
    background-color: seagreen;
  }
  

  • You may also style cells of a particular row or column using CSS. To do so, you need to set cssClass property of row/column to custom CSS class name and then style using the custom class:
  
  grid.rows[0].cssClass = “custom-class”;
  
  grid.columns[0].cssClass = “custom-class”;
  
  // css
  
  .wj-cell.custom-class{
  
  background-color: “saegreen”;
  
  }
  
  • If you need to apply conditional styling then formatItem/itemFormatter is the way to go.

  Since you are using columnprovider, it is very likely that you will be using conditional styling, so formatItem/itemFormatter suits the requirement.

  There is one more way to apply conditional styling to cells using custom CellFactory. It is not as convenient as itemFormatter but performance is better as compared to itemFormatter.
  
  Please have a look at the following sample to get started with cellFactory: https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/CellFactory

  ~Sharad

• 

  zam.abdulvahid

  • Post Options:
  • Link
    Copy

  Posted 23 October 2018, 5:24 am EST

  custom CellFactory is something Ive never heard of and explored. Shall try the same and get back if I need any more info on the same.

  Thank you Sharad.

  ~Zam