When to change Grid Style

  • Grid Cell style can be changed to indicate something significant to the user like a cell with certain value can be indicated in one color etc.

How to Change



  • Specify the custom style classes here.


  • Save the changes.
  • Now goto the page.
  • Customize Page on which the Grid style has to be modified.

  • Select the Grid column on which the style needs to be applied.

  • Use the 'Style Class' attribute in the Property Pallet at the bottom.

Css 4

  • Specify the condition based on which the styles have to be applied.

    

  • Grid Cells are rendered with applicable styles based on the specified condition as shown below

UI Syntax Rule

  • Syntax: #{Attributename}Operator?'One Style Class ':'Another Style Class'.
  • Here Attributename is the attribute on which the condition is checked against. It could be same attribute on which you want to apply the style or could be different attribute.
  • One Style Class is applied when the condition is true.
  • Another Style Class is applied when the condition is false.

UI Rule Example

  • Syntax to change Grid Style: #{Process Completion Date}== null?'mycolumn':'mycss'.
  • In this case the style is being applied to 'Level2 Process Name' column based on the value in Process Completion Date attribute.
  • '#{Process Completion Date}== null' is the condition.
  • mycolumn is the CSS style class applied when the Process Completion Date is null.
  • mycss is the CSS style class applied when the Process Completion Date is not null.

Location

101 California Street, Suite 2710
San Francisco, CA 94111


440 N. Wolfe Rd.
Sunnyvale, CA 94085


Office 11, 5th Floor, Building 9,
Mindspace IT Park
Hyderabad 500081

p: +1 (844) AT CloudIO (844-282-5683)
f: +1 (650) 300-5247 | e: sales@cloudio.io
© 2009, 2017 CloudIO Inc. | Terms of Use | Privacy Policy