Grid itemFormatter manual raise event

Grid itemFormatter manual raise event

Posted by: paul.jeremiah.go on 4 October 2018, 11:25 am EST

• 

  paul.jeremiah.go

  • Post Options:
  • Link
    Copy

  Posted 4 October 2018, 11:25 am EST

  Hi,

  Would there be a ts code that can manually trigger the itemFormatter func?

  We have a requirement that after a particular action ran, we need to apply cell formatting.

  this.grid.itemFormatter = (panel, r, c, cell) => {
  
  if (cell && r >= 0 && panel.rows[r].dataItem) {
  
  	const matches = this.list.filter((x) => {
  	
  		return panel.rows[r].dataItem[this.Key] &&
  			x.field === panel.rows[r].dataItem[this.Key];
  	});
  	if (matches.filter((w) => { return w.Code === "A" }).length > 0) {
  		cell.classList.add("a-class");
  	}
  	else if (matches.filter((w) => { return w.Code === "B" }).length > 0) {
  		cell.classList.add("b-class");
  	}
  }
  

  We already applied the formatting but we would still need to move the horizontal scroll bar before itemformatter get called and the customize color bindings would apply.

  Thanks,
  
  Paul

• 

  paul.jeremiah.go

  • Post Options:
  • Link
    Copy

  Posted 4 October 2018, 1:30 pm EST

  this.grid.refresh(false)https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html#refreshCells does the job, sorry

• 

  meera.wisniewski

  • Post Options:
  • Link
    Copy

  Posted 21 June 2020, 12:13 pm EST

  this.grid.itemFormatter = (panel, r, c, cell) => {

  if (cell && r >= 0 && panel.rows[r].dataItem) {

  const matches = this.list.filter((x) => {
  
  	return panel.rows[r].dataItem[this.Key] &&
  		x.field === panel.rows[r].dataItem[this.Key];
  });
  if (matches.filter((w) => { return w.Code === "A" }).length > 0) {
  	cell.classList.add("a-class");
  }
  else if (matches.filter((w) => { return w.Code === "B" }).length > 0) {
  	cell.classList.add("b-class");
  }
  

  }

  is there an example on how to unit test this itemformatter with the cell.classList.add ? Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 June 2020, 6:35 pm EST

  Hello Meera,

  In the test spec, you can find the first row that matches the this.Key condition. You can use any random data as this.Key. Once you will get the row, create a className variable and assign it according to the Code.
  
  After this, get the cell element and check whether the class list has the appropriate class.
  
  Please refer to the sample attached.

  Regards,
  
  Ashwin

  itemformatter test.zip

• 

  meera.wisniewski

  • Post Options:
  • Link
    Copy

  Posted 21 June 2020, 9:06 pm EST

  Thanks Ashwin.