Row level formatting in Wijmo FlexGrid

Row level formatting in Wijmo FlexGrid

Posted by: abusufyan_14 on 31 January 2018, 7:32 pm EST

• 

  abusufyan_14

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 31 January 2018, 7:32 pm EST

  Hi,

  We need to apply row level formatting with some styling(bold, italic etc) like showing in the attached snapshot. How we achieve the goal using AngularJS v1.3.15 with best practices. Any small sample application would be appreciated.

  Thanks,
  
  Sufyan

• 

  abusufyan_14

  • Post Options:
  • Link
    Copy

  Posted 31 January 2018, 9:06 pm EST

  Hi,

  We need to apply row level formatting with some styling(bold, italic etc) like showing in the attached snapshots, some rows are in percentage and some are in decimals. How we achieve the goal using AngularJS v1.3.15 with best practices? Any small sample application would be appreciated.

  Thanks,
  
  Sufyan

  
  
  Row-wise display data
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 1 February 2018, 4:31 pm EST

  Hi Sufyan,
  
  #1
  
  You need to use cssClass property to apply styling for rows. Please refer to the following fiddle for the same:
  
  http://jsfiddle.net/Wijmo5/hak6c27w/

  #2
  
  FlexGrid allows uniform formatting for a Column. If you would like to apply two format in Column, you need to use itemFormatter and change textContent for the cell. Please refer to the following code snippet:

  grid.itemFormatter=function(panel,r,c,cell){
  	if(panel.cellType==1 && r>5 && r<8 && c==2){
  		cell.innerText= cell.textContent+" %";
    	}
  }
  

  Above code will add “%” sign to the third column’s 6th & 7th row cell.

  ~Manish

• 

  abusufyan_14

  • Post Options:
  • Link
    Copy

  Posted 1 February 2018, 9:41 pm EST

  Thanks, Manish

  LoadedRows and itemFormatter are a recommended way to get our desired output or we have any other option to get the output? Actually, we saw this routine on different fiddles but we want something different from this by using Angular or Wijmo best practices. If you have any other option please do share with us.

  Thanks,
  
  Sufyan

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 2 February 2018, 6:09 pm EST

  Hi Sufyan,
  
  You may use wjFlexGridCellTemplate to apply custom styling to the FlexGrid. Please refer to the following fiddle sample:

  http://demos.wijmo.com/5/Angular/CellTemplateIntro/CellTemplateIntro/

  ~Manish