Add hook for table validation (not a single cell)

[madoar]

I'm currently writing an angular 2 webapp that uses handsontable to display the content of some previously loaded csv file.
On the same page as the handsontable I've added a "continue" button, which should lead the user to the next page after he reviewed the loaded table and when its content is valid. The validity of the content is checked via column validator methods which are passed to the handsontable.

To ensure that the "continue" button is clicked only after the content is valid I want to bind the hidden property of the button to a function that returns if the content of the table is valid.
My question is now if there is such a function that returns true if all fields are valid, and false if not, that I can bind to the hidden property of the button.

[AMBudnik]

Hi @madoar
You can call afterValidate method. It's first argument returns false if any cell in the table is invalid.
Demo: http://jsfiddle.net/4r2vgL5k/

[madoar]

Thanks for the answer.
As far as I understand the afterValidate method it gets called for EVERY SINGLE cell validation.
In my case I call validateCells directly after the creation of my handsontable object, which makes it a bit harder because I need to track which cells were invalid at the beginning (after validateCells was called) and if these cells were "fixed" in an afterValidate function.
Therefore I would like a mechanism that can either tell me if ANY cell is invalid at a given time. Even better would be if I could also query the handsontable object which cells are currently invalid.

[AMBudnik]

Yes, afterValidate is called for each cell (that has any validator, not for text cell type) after change.

afterValidate gives you all needed information. Here http://jsfiddle.net/dqo0whqj/ I log cell coordinates only if I got a false value after validation.

If you want to validate cells after table initialization. You can call validateCells() method, like here http://jsfiddle.net/7d5vs8e2/

Do you need any other piece of information?

[madoar]

Hi thank you for your code samples!
My problem is not how to do it, but how to do it elegantly and efficiently.
To make it more clear what I want, here is what I currently do:

  refreshData() {
    if (this.hot != null) {
      this.hot.destroy();
    }

    this.hot = new Handsontable(this.hotTable.nativeElement, {
      data: this.excelService.processedData,
      rowHeaders: true,
      colHeaders: this.excelService.processedColumnNames,
      contextMenu: true,
      columns: this.excelService.processedValidators,
      afterValidate: (isValid, value, row, prop, source) => {
        if (!isValid) {
          if (!this.invalidFields.has(row)) {
            this.invalidFields.set(row, new Set<number>());
          }
          this.invalidFields.get(row).add(prop);
        } else if (this.invalidFields.has(row)) {
          this.invalidFields.get(row).delete(prop);
          if (this.invalidFields.get(row).size == 0) {
            this.invalidFields.delete(row);
          }
        }
      },
      afterRemoveRow: (index, amount) => {
        console.log(this.invalidFields.size);
        this.invalidFields.delete(index);
        console.log("Deleted row: " + index);
        console.log(this.invalidFields.size);
      }
    });

    this.hot.validateCells();
  }

  hasInvalidElements(): boolean {
    return this.invalidFields.size > 0;
  }

Because it will not be possible to remove columns in my applications I've added no hook for that.
In the prior code snipped you see that I've defined a map containing all invalid fields of a row in a set (rowindex = key, set = value).
After validating a value I'm currently checking if the value is invalid if yes I check if it's already contained in my map and set structure. If it's not I add the cell coordinates to the structure.
If the value is valid I try to remove it from the structure.
To check if the table contains invalid fields I finally wrote the function hasInvalidElements that returns true if the map contains at least one row with at least one invalid field.

What I would like to have is a more elegant and short way to do this. Is there such a way, or is such a way planned for handsontable?

[AMBudnik]

Hi @madoar
I just got a reply from our developer Piotr. He told me that you can use the hot.getCellsMeta. It's not in the docs yet (we need to add it).
It return a flat array of all cells in your grid. You can iterate through it and check which cells are invalid. However... Piotr also told me that the solution you're using is absolutely OK.

[madoar]

@AMBudnik
Thanks for your efforts.
Because I don't like to use nested Map-Set constructs I changed my code to the following:

    interface InvalidField {
      row: number,
      column: number
    }

    private invalidFields = new Set<InvalidField>();

    this.hot = new Handsontable(this.hotTable.nativeElement, {
      data: this.excelService.processedData,
      rowHeaders: true,
      colHeaders: this.excelService.processedColumnNames,
      contextMenu: true,
      columns: this.excelService.processedValidators,
      beforeValidate: (value, row, prop, source) => {
        const column = this.hot.propToCol(prop);

        this.invalidFields.forEach((value, index, set) => {
          if (value.row == row && value.column == column) {
            this.invalidFields.delete(value);
          }
        });
      },
      afterValidate: (isValid, value, row, prop, source) => {
        if (!isValid) {
          const column = this.hot.propToCol(prop);

          this.invalidFields.add({ row: row, column: column });
        }
      },
      afterRemoveRow: (index, amount) => {
        const numberOfColumns = this.hot.countCols();

        for (let row = index; row < index + amount; row++) {
          this.invalidFields.forEach((value, index, set) => {
            if (value.row == row) {
              this.invalidFields.delete(value);
            }
          });
        }
      }
    });

    this.hot.validateCells();
  }

  hasInvalidElements(): boolean {
    return this.invalidFields.size > 0;
  }

In addition to the fact, that I now only need a normal Set without a Map now, I'm now also able to get row and column information of invalid fields quite easily by querying the row and column attributes of the InvalidField objects inside the Set.

I believe it would be quite nice and useful, if you could add a getInvalidFields() method to the Handsontable object, which the user can use to receive a list of all currently invalid fields, similar to what invalidFields in my given code snippet contains.

[AMBudnik]

Wow... that actually sounds like a great improvement @madoar
Thanks for sharing. I am changing the issue status to an improvement suggestion

[AMBudnik]

I'm moving all the improvement suggestions to our wiki section. Please feel free to leave any additional comments and reflections.

Thanks in advance!

[aaronbeall]

It would really help if there was a hook like afterValidateChange(isValid) that would run any time the overall validation state of the table changed. Right now I have to call validateCells(updateIsValid) which is very slow (300 columns, 500 rows). I guess an alternative is presented in this thread to track every single cell validation state over time, but that's quite a pain and maybe fragile.

[AMBudnik]

Hi @aaronbeall

I am sure it can be a pain to check again and again all 300 x 500 cells. That's a lot.
However, there's a light in the tunnel. We are preparing a project that will allow us to rerender only changed cells so the validator will run only for those cells. Fewer calls equals better performance.

I hope that I will be able to update you as soon as possible but if not please check the ZenHub board

[aaronbeall]

For anyone interested I implemented the solution @AMBudnik suggested above to use getCellMeta and it works great (for my purposes) and I found it to perform very well on larger data sets (unlike validateCells() which takes awhile to complete). This was my code:

  function getIsValid(): boolean {
    const rowsCount = hotInstance.countRows();
    for (let row = 0; row < rowsCount; row++) {
      const metaCols = hotInstance.getCellMetaAtRow(row);
      if (metaCols.some(col => !col.valid)) {
        return false;
      }
    }
    return true;
  }

[softwaremills]

I would like to echo that a hook like afterValidateChange(isValid) would be great. Say you want to enable a save button when the table is valid and disable it when it's invalid. The options for how to do that at present seem difficult, unless I'm missing something.

[AMBudnik]

Hi @softwaremills
Yes, that is exactly what we are missing here. Only one hook that will be fired after all of the cells get validated.

[mkhoa1412]

@aaronbeall, col.valid is not working for custom validator
Any update help me solve validateCells performance. In my case i want to validate only 1 row with my custom validator

[AMBudnik]

This feature request is closed. It will be automatically reopened after we attach it to a milestone.
Thank you very much for sharing. I hope that we'll be able to publish it soon.

[AMBudnik]

Hi. Closed issues rarely get new comments, so I hope that this issue will get more attention as a discussion.

See you there for updates and new ideas.

[KiddoV]

Any update on this? It would be nice to have a hook like afterTableValidation so this hook only call once after all cells validated.

[adrianszymanski89]

Hi @KiddoV

I don't have any updates yet, but have you tried any of the proposed solutions in this thread?

[KiddoV]

Those solutions are not work in my case and also required quite a few implementations. I got my own temporary solution for now like this,
Only have to use try-catch block:

[...]
//Hook
afterChange(changes, source) {
    try {
        //Handler when a cell value changed
        console.log(changes, source);
        //This block will call many time based on how many cell you modify.
    } finally {
        //This block will only called **once** after the ``try`` block, so this is what I wanted
        //Handler after all cell changes
        console.log("Should only call once after cells change");
    }
}

Not sure if this is a good way to do it, but it work for now.

[adrianszymanski89]

Hi @KiddoV

Thank you. I am sure it will be helpful for other users looking for this.

[KiddoV]

This is just a temporary solution, would be nice if there is an official hook. 😃