Configure the style of row header

Modified on Sat, 6 Feb, 2021 at 10:43 PM

You can configure the styles that are applied to the row header column, for example that the left-border of the row header corresponds to the New Risk Priority Number




Config file

Please follow this article, to learn where is the configuration file located, see:  Configure risksheet columns


Configuration


To configure the row header style, you would need to adjust: 

  1. headers.rowHeader.renderer
  2. cellDecorators
  3. styles

 

...

  "headers":{
   "rowHeader":{
      "renderer":"rowHeaderRpnNew"
   }
  }

  ...
  
  "cellDecorators":{
    ...
    "rowHeaderRpnNew":"function(info){\n var val = info.item['rpnNew'];\n wijmo.toggleClass(info.cell, 'rowHeadRpn1', val>0 && val <= 150 );\n wijmo.toggleClass(info.cell, 'rowHeadRpn2', val>0 && val > 150 && val <= 250);\n wijmo.toggleClass(info.cell, 'rowHeadRpn3', val>0 && val > 250);}"  
    ...
  }
  
  ...
  
  "styles":{
    ...
    ".rowHeadRpn1":"{border-left: 7px solid #B0D444 !important;}",
    ".rowHeadRpn2":"{border-left: 7px solid #FFFE54 !important;}",
    ".rowHeadRpn3":"{border-left: 7px solid #F3AEAC !important;}",    
    ...
  },

The rowHeader.renderer points to javascript function defined in shared cellDecorators section.


So the rowHeaderRpnNew is a function, that  gets as an input the Row Header cell, and sets the style, in this case  when value is smaller to 150 the style "rowHeadRpn1" is assigned.


The style "rowHeadRpn1" is configured in the styles section.


NOTE: configuration file bellow was  cut, so it shows just a relevant parts of the configuration file.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article