CellValidation tooltip for error

CellValidation tooltip for error

Posted by: meera.wisniewski on 24 January 2021, 12:10 pm EST

• 

  meera.wisniewski

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 24 January 2021, 12:10 pm EST - Updated 3 October 2022, 5:42 am EST

  Hello,

  I am using gridValidation to show the errors in the cell and the tooltip show the error with the danger icon. i need to show the warning icon when the row has a property set as hasWarning. Currently i am changing the cell background in the itemformatter if the row has the warning and the background is set to orange. but the tooltip still shows the danger icon. How do i change the css class to use the correct style depending on error and warning. Here is the screen shot of the tooltip i need to work.
  
  Thanks.

  

  1406×386 84.8 KB

  

  1410×472 92.7 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 26 January 2021, 5:14 pm EST

  Hi,

  To achieve the required functionality you may handle the mousemove event and update the cssClass property of the grid’s errorTip to add the required warning class. Please refer to the following code snippet and the sample demonstrating the same:

   // handle mouseover event to update tooltip class
    grid.hostElement.addEventListener("mousemove", (e) => {
      let ht = grid.hitTest(e);
      if (!ht.panel || ht.panel.cellType !== wjGrid.CellType.Cell) {
        return;
      }
  
      let dt = ht.panel.rows[ht.row].dataItem;
  
      if (dt.isWarning) {
        // set tooltip class to warning
        grid.errorTip.cssClass = "wj-error-tip warning";
      } else {
        grid.errorTip.cssClass = "wj-error-tip";
      }
    });
  

  .wj-error-tip.warning {
    background-color: orange;
  }
  

  Regards
  
  Sharad

• 

  meera.wisniewski

  • Post Options:
  • Link
    Copy

  Posted 26 January 2021, 9:59 pm EST

  Thanks Sharad for your reply. that worked.