I'm currently working with a DxDataGrid within an Angular Application. Within this particular application, I have the need to input four dates. I've implemented validation rules that work well for each individual field. However, my challenge arises when I need to validate all four fields if any one of them is modified. For instance, if I enter an endDate that precedes the startDate, the expected validation error appears in the endDate field. Yet, if I subsequently adjust the startDate to a time prior to the endDate, the validation error persists in the endDate field because it is not being revalidated.
Below is what I've managed to achieve so far:
<dx-data-grid>
<dxi-column dataField="inPeriodStart" caption="In-Period Start" dataType="date"">
<dxi-validation-rule reevaluate="true" type="custom" message="Both start and end period has to be specified"
[validationCallback]="validateStartAndEndInPeriod"></dxi-validation-rule>
<dxi-validation-rule reevaluate="true" type="custom" message="Start has to be before end." [validationCallback]="validateStartBeforeEnd"></dxi-validation-rule>
<dxi-validation-rule reevaluate="true" type="custom" message="Either In-Period or For-Period has to be specified."
[validationCallback]="validateInOrForSpecified"></dxi-validation-rule>
<dxi-validation-rule type="custom" [validationCallback]="verifyDate" message="In-Period Start must be a valid date"></dxi-validation-rule>
</dxi-column>
<dxi-column dataField="inPeriodEnd" caption="In-Period End" dataType="date">
//same rules
</dxi-column>
<dxi-column dataField="forPeriodStart" caption="For-Period Start" dataType="date">
//same rules
</dxi-column>
<dxi-column dataField="forPeriodEnd" caption="For-Period End" dataType="date">
// same rules
</dxi-column>
</dx-data-grid>
How would you recommend solving this issue? Any suggestions are greatly appreciated!