Handle grid validations by using itemFormatter

Handle grid validations by using itemFormatter

Posted by: weide.zhu on 2 August 2021, 9:41 pm EST

• 

  weide.zhu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 August 2021, 9:41 pm EST

  we are not using the default ‘getErrors’ grid validations provided by wijmo due to the size of the grid (with 1000+columns), for performance reason.

  we what I did is something like:

  itemFormatter(p: wjcGrid.GridPanel, rowIdx: any, columnIdx: any, cell: any) {
  
  if (p.cellType === wjcGrid.CellType.Cell) {
  
  if (some condition) {
  
  cell.classList.add(‘wj-state-invalid’);
  
  }
  
  }
  
  }

  now I can see the red board, however I am not sure how to show the error message while use mouse hovers the cell, can you help on this?

  Thanks,

  Weid

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 4 August 2021, 12:43 am EST

  Hi,

  To achieve the required functionality, You may handle mouseover event to show/hide tooltip on hover on invalid cells as follows -

  theGrid.hostElement.addEventListener('mouseover', e => {
      let ht = theGrid.hitTest(e);
      console.log(ht);
      if (tt.isVisible) {
        tt.hide();
      }
      if (ht.cellType !== CellType.Cell) {
        return;
      }
  
      switch (theGrid.columns[ht.col].binding) {
        case 'id':
          if (theGrid.getCellData(ht.row, ht.col) < 2) {
            tt.show(e.target, 'Number is less than 2');
          }
          if (theGrid.getCellData(ht.row, ht.col) > 3) {
            tt.show(e.target, 'Number is greater than 3');
          }
          break;
        case 'country':
          if (theGrid.getCellData(ht.row, ht.col) == 'US') {
            tt.show(e.target, 'country should not contain US');
          }
          break;
      }
    });
  

  For better understanding, you may refer to the below code sample -
  
  https://stackblitz.com/edit/js-uorrxk?file=index.js

  Regards

• 

  weide.zhu

  • Post Options:
  • Link
    Copy

  Posted 4 August 2021, 1:29 am EST

  great, that works, thanks for your help!