Calling a function inside an addEventListener in an itemFormatter function

Calling a function inside an addEventListener in an itemFormatter function

Posted by: david.hettmer on 28 July 2021, 3:04 pm EST

• 

  david.hettmer

  • Post Options:
  • Link
    Copy

  Posted 28 July 2021, 3:04 pm EST

  Hi, i am working on a wijmo grid header checkbox to to trigger a function when clicked. the checkbox was generated via innerHTML called from an itemFormatter. below is the code

  i tried calling it like this

  cb.addEventListener('click', () => {
    flex.beginUpdate();
    for (let i = 0; i < flex.rows.length; i++) {
      flex.setCellData(i, c, cb.checked);
    }
    flex.endUpdate();
    this.updateInvoiceData.bind(this);
  });
  

  but it seems like it’s not calling the function.
  
  i tried decalring the this in to a variable and still not worked, I also tried using time out but it is still not working. Is there a work around for this to work or did i missed out any on the approach I was attempting to resolve the issue?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 29 July 2021, 5:28 am EST

  Hi,

  In the provided code snippet, We could observe that updateInvoiceData() is invoked with bind() but not called after binding the reference. bind() returns a new function. So We need to call the returned function after binding reference with bind() as follows -

   cb.addEventListener('click', e => {
            flex.beginUpdate();
            for (let i = 0; i < flex.rows.length; i++) {
              flex.setCellData(i, c, cb.checked);
            }
            flex.endUpdate();
  
            let update = this.updateInvoiceData.bind(this, 'test');
            update();
          });
  

  For better understanding, you may refer to the below code sample -
  
  https://stackblitz.com/edit/angular-y6ohkr?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  david.hettmer

  • Post Options:
  • Link
    Copy

  Posted 29 July 2021, 9:01 am EST

  Hi, I tried your resolution, but i got an error

  Uncaught TypeError: Cannot read property 'bind' of undefined
  ```   :(
  
  i also followed the same approach from the stacblitz link you attached

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 30 July 2021, 7:29 am EST

  From the provided error message it seems like the method that you are invoking with bind() is not available. Please make sure that the method that you are invoking with bind() is available.

  Moreover, would you please clarify if you are observing this error message in the provided stackblitz sample too? If not, Kindly provide us a code sample that demonstrates the issue so that we could further investigate the issue and assist you accordingly

• 

  david.hettmer

  • Post Options:
  • Link
    Copy

  Posted 30 July 2021, 1:36 pm EST

  Yes. It is also happening with the stakcblitz you attached, below is the code being called from the gird’s itemformatter

  /**
     * @description
     *  Formats each cell upon update events. Called by flexgrid... all the time.
     *  Notably this function adds checkboxes to the first column rows and header
     *
     * @param panel - flexgrid panel
     * @param r - row index
     * @param c - column index
     * @param cell - current flexgrid cell
     */
    public itemFormatter(panel: GridPanel, r: number, c: number, cell: any) {
      // add checkbox to header, sync with checkboxes in column
      if (panel.cellType === CellType.ColumnHeader) {
        const flex = panel.grid;
        const col = flex.columns[c];
  
        // check that this is a boolean column
        if (col.dataType === DataType.Boolean && c === 0 && r === 0) {
          // prevent sorting on click
          col.allowSorting = false;
  
          for (let i = 0; i < flex.rows.length; i++) {
            const intialCheck = flex.getCellData(i, c, false);
            if (typeof intialCheck === 'undefined') {
              flex.setCellData(i, c, false);
            }
          }
  
          // count true values to initialize checkbox
          let cnt = 0;
          for (let i = 0; i < flex.rows.length; i++) {
            if (flex.getCellData(i, c, false) === true) {
              cnt++;
            }
          }
  
          // create and initialize checkbox
          cell.innerHTML = '<input type="checkbox" style="height: 13px !important;">';
  
          const cb = cell.firstChild;
  
          cb.checked = cnt > 0;
          cb.indeterminate = cnt > 0 && cnt < flex.rows.length;
  
          // apply checkbox value to cells
          cb.addEventListener('click', () => {
  
            flex.beginUpdate();
            for (let i = 0; i < flex.rows.length; i++) {
              flex.setCellData(i, c, cb.checked);
            }
            flex.endUpdate();
            const update = this.updateInvoiceData.bind(this);
            update();
          });
        }
      }
    }
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 2:36 am EST

  Please try changing the itemFormatter function to arrow function like:

  public itemFormatter = (panel: GridPanel, r: number, c: number, cell: any) => {
  // TODO
  }
  

  If the issue persists, please share a small working sample replicating the issue so that we could investigate the root cause of the issue and assist you accordingly.