Validate Cell with another variables in angular 8

Tags: #<Tag:0x00007f8b23f98250>
#1

I want to validate cells with the variables which are updated with some api calls.
This is ngOnInit(){

this.minVal = 3;
this.maxVal = 8;

this.columns = [
{
data: ‘month’,
type: ‘numeric’,
validator: this.validateMyCell
},
}],
}

This is the validate function

validateMyCell(value, callback) {
if (this.minValue && this.maxValue) {
if (value >= this.maxValue && value <= this.minValue) {
callback(false);
} else {
callback(true);
}
} else {
callback(true);
}
}

minValue and maxValue are variables which are updated from db. In this method, these values are not updated. Is there any way or other such method to resolve this? Any help is appreciated.

I took reference from this link

Thanks

#2

Welcome @birajdarchetan26

When are you getting the new minValue/maxValue ranges from the server? It is important as we need to know which callback to use.

#3

These will come on page load from an api call to server.
It took a while but I was able to achieve this by modifying validator as below.

data: ‘month’,
type: ‘numeric’,
validator: (value, callback, minValue = this.minValue ,
maxValue = this.maxValue ) => {
callback(this.validateMonth(value, minValue, maxValue ));
}

//And the method
validateMonth(value:any, minValue:any, maxValue:any){
return true;
}

#4

@aleksandra_budnik can you tell me how to add comment on cell if the cell is invalid?

I am trying to use renderer as below which is not working, is there any other way ?

data: ‘month’,
type: ‘numeric’,
validator: (value, callback, minValue = this.minValue ,
maxValue = this.maxValue ) => {
callback(this.validateMonth(value, minValue, maxValue ));
}
renderer: function minValueRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.NumericRenderer.apply(this, arguments);
if (td.style.color == ‘red’) {
cellProperties.comment = ‘Test Comment’;
}
},

#5

Sure. You can use the afterValidate hook to call setCommentAtCell method. Here’s an example https://jsfiddle.net/o3bsqkhj/1/

#6

@aleksandra_budnik Thanks for the reply, I tried this but the comment wasn’t reflecting in the grid, so I tried to add some static comment. Event this did not work, would be the basic problem here ?

@ViewChild(HotTableComponent, { static: true }) hotTableComponent: HotTableComponent;
this.options = {
stretchH: ‘all’,
width: ‘500’,
height: ‘200’,
comments: true,
contextMenu: [
‘row_above’, ‘row_below’, ‘remove_row’
],
cell: [
{ row: 1, col: 1, comment: { value: ‘Some comment’ } },
{ row: 2, col: 2, comment: { value: ‘More comments’ } }
],
afterValidate: (isValid, value, row, prop) => {
const commentsPlugin = this.hotTableComponent.getHandsontableInstance().getPlugin(‘comments’);
if (!isValid) {
commentsPlugin.setCommentAtCell(row, prop, ‘Invalid cell’);
this.hotTableComponent.getHandsontableInstance().render();
}
}
};

This could be the demo link where I need to add comment on invalid cell especially on a particular column.

#7

This method this.hotTableComponent.getHandsontableInstance() does not return the HOT instance. You need to set up a connection to the instance.

Here’s a demo on setting up the reference to the Handsontable instance using Angular https://handsontable.com/docs/8.0.0/frameworks-wrapper-for-angular-hot-reference.html

1 Like
#8