How to change Cell Properties based on other cell Selection

Tags: #<Tag:0x00007f8b23b07e70>
#1

Hi Team,
In My Example if i am selecting status is Yes then next to that cell is Required true and allowEmpty is false.

incase if i select Other than Yes , Remarks is cell is not Mandatory to Enter.

Demo: https://jsfiddle.net/kranthi2210/scefwLo2/16/

image
image.png1186×339 11.2 KB

In above Example B1 I selected yes , so C1 is Mandatory to fill. And B2 is No, so C2 is not Mandatory.

But in my code it is not working. i used setCellMeta functionality but it is not working. Can you please help on this.

After Button click show the mandatory fields in red color.

#2

Hi @kranthikumar.reddy32

I see that it’s a similar topic to Cell Validation Not working Properly (also regarding settings up cell dependencies). I think that in this case you can use afterChange hook and setCellMeta() method.

The are some changes needed in the demo but you took a good approach. the changes[0][3] is the new value, changes[0][4] does not exist.

The setCellMeta() has a different structure, the correct on in your case would be

hot.setCellMeta(changes[0][0], 2, 'allowEmpty', false)
hot.setCellMeta(changes[0][0], 2, 'required', true)

Then we need to call the render() method to attach the cell meta once user does the changes.

But there one additional thing to remember here is to add a validator (it is not yet present in the demo), as the allowEmpty would not work without a cell validator https://handsontable.com/docs/react-data-grid/api/options/#allowempty

Full code

afterChange(changes, source) {
  	if(changes){
      if(changes[0][3] == 'Yes'){
        hot.setCellMeta(changes[0][0], 2, 'allowEmpty', false)
        hot.setCellMeta(changes[0][0], 2, 'required', true)
        hot.render()
      }
  	}
  }
#3

Thanks. It is working.

#4

I am glad to hear that.

We can close the ticket as solved. Feel free to open a new one when needed.

#5