How to validate a cell is required/mandatory on load and on Save?

Tags: #<Tag:0x00007efc654eae68>
#1

Hi,

We are using HandsonTable with Angular. and
We are getting cell settings from external json, like below.

{
“columns”:
[
{
“name”:“test”,
“age”:“23”
},
{
“name”:“test”,
“age”:“23”
}
],
settings:[
“name”:{
“type”:string,
“isRequired”:true,
“length”:30
},
“age”:{
“type”:numeric,
“isRequired”:true,
}
]
}

From the above seetings, we are try to validate our cells on load and on save.

Now, we need to validate the cells is required/mandatory on load and save also…

is beforeCellValidate hook is right place to write those validation?

or do we need to write custom renderer method?

Kindly suggest,

If any sample code is available, Please provide those samples.

Thank you
Prabu Kuppusamy

How to validate columns
#2

Hi

a custom validator should do the job and before saving you can call the validateCells method.

Here https://handsontable.com/blog/articles/2018/10/advanced-data-validation-in-handsontable is a blog post with examples of code that should help you to acheive the goal.

#3

Hi… I have went through the give sample code, I think, I’m having different scenario.

What if this ‘data: ‘discount_available’,’ column we are not using, so this method won’t help ‘this.instance.getDataAtRowProp(this.row, ‘discount_available’)’ , am i correct?

So, From my sample data, I can mark name column only mandatory, not age column, How can I achieve this? Kindly suggest me.

Since I cannot create column like this ‘name_required, age_required’

I Hope you understood my scenario.

#4

If you need to have data in a column (it is mandatory) you should use the allowEmpty: false. Have you already tried it?

#5

Hi… I have tried the allowEmpty in our hottable, seems not working,
and I have tried with few examples from jsfiddle, there also not working.

I have tried with below one.

https://jsfiddle.net/api/post/library/pure/

hotSettings: Handsontable.GridSettings = {
startRows: 5,
columns: [
{
editor: CustomEditor,
allowEmpty: false
}
],
colHeaders: true,
colWidths: 200
};
}
So, On the load the cells should be in (Red) Invalid cells, Am i correct? Seems not working.

Kindly mention, How to use allowEmpty and Please provide any samples in jsfiddle/stackblitz if you have.

Thank you
Prabu Kuppusamy

#6

Can you update the example? The link is broken and the settings printed in the post are missing the editor logic and data.

#7

I took that jsfiddle url from this example page.

https://handsontable.com/docs/7.2.0/frameworks-wrapper-for-angular-custom-editor-example.html

if this link is also not working… Kindly provide any other example which is used the allowEmpty.

Regards,
Prabu Kuppusamy

#8

Hey Prabu,

JSFiddle unfortunately does not update the demo automatically. Each time you click edit

image
on our demos and a demo appears you need to use save

image

and then it generates a new link to share.

When it comes to the allowEmpty option it is used as an extension for a validator so it can be used for all cell types excluding text.

I have used the example from that website and created this example https://jsfiddle.net/sv852hL4/

columns: [
        {
          type: 'numeric',
          allowEmpty: false,
          editor: CustomEditor
        }
      ]

columns have been given a type (other than text) and the allowEmpty: false settings.
Now when you edit the cell and leave it blank it will turn red.

#9

Hi,

Thanks for the response,

I have created a sample application in Stackblitz, please find in below link.

Is it possible to check the mandatory on Load?

Kindly help.

Thank you
Prabu Kuppusamy

#10

Yes you can. Here’s the twist in 33-35 lines https://jsfiddle.net/pLcekvjr/

#11