Search code examples
angularvalidationgridejssyncfusion

Syncfusion Angular ejs-grid toggle validation for e-column when checking/unchecking another e-column


I am using a Syncfusion Angular ejs-grid and I want to make one column required/unrequired when I check/uncheck another checkbox column.

How could I solve this problem?

I set the editparams of the checkbox column and the change field within it so that validationRules of the other column becomes {required: true} or {required: false}. Every time I check or uncheck the checkbox column, the other column validationRules should be updated. But its not working.


Solution

  • Check that the editparams for the checkbox column is set up correctly. It should include a change event that updates the validation rules of the other column like the code below.

    { field: 'checkbox', headerText: 'Checkbox', textAlign: 'Center', editType: 'booleanedit', editParams: { params: { change: (args) => { const otherColumn = args.rowData['otherColumn']; if (args.value) { otherColumn.validationRules = { required: true }; } else { otherColumn.validationRules = { }; } } } } }
    

    The checkbox column is the one that triggers the validation rule change. When the checkbox is checked, the required rule is added to the validationRules of the otherColumn. When it's unchecked, the required rule is removed.

    Check that the change event is firing correctly when the checkbox is checked or unchecked. You can add a console.log statement to the change event to see if it's being called:

    { params: { change: (args) => { console.log('Checkbox changed'); ... } } }
    

    Make sure that the console.log statement is appearing in your browser console when you check or uncheck the checkbox.

    Check that the validationRules of the other column are being updated correctly. After you check or uncheck the checkbox, you can inspect the validationRules of the other column to see if it's being updated correctly. You can use the getColumns method of the ejs-grid to get a reference to the other column:

    const grid = document.querySelector('#grid').ej2_instances[0];
    const otherColumn = grid.getColumnByField('otherColumn');
    console.log(otherColumn.validationRules);
    

    Make sure that the validationRules are being updated as expected when you check or uncheck the checkbox.

    If you're still having trouble, you can post to the Syncfusion forums or support site for further assistance.