Utils ReadOnly Binding Utils

These utility functions can be used for bind a master control with another which will be set or unset in read-only depending on the value of master control. Also you can set a value for read-only state.

    export function readonlyOnChange(masterField: Serenity.Widget<any>, cascadeField: Serenity.Widget<any>, valueEnable: any, resetValue?: any): void {
        DialogUtils.conditionalReadOnly(masterField, cascadeField, valueEnable);
        masterField.change(e =>
            {
                DialogUtils.conditionalReadOnly(masterField, cascadeField, valueEnable, resetValue);
            }
        );
    }

    export function conditionalReadOnly(masterField: Serenity.Widget<any>, cascadeField: Serenity.Widget<any>, valueEnable: any, resetValue?: any): void {
        if (Serenity.EditorUtils.getValue(masterField) == valueEnable)
            Serenity.EditorUtils.setReadOnly(cascadeField, false);
        else {
            if (resetValue !== undefined)
                Serenity.EditorUtils.setValue(cascadeField, resetValue);
            Serenity.EditorUtils.setReadOnly(cascadeField, true);
        }
    }

Use this in afterLoadEntity of Dialog.ts

protected afterLoadEntity() {
    super.afterLoadEntity();
    
    DialogUtils.readonlyOnChange(this.form.masterCheckBox, this.childControl, true, 0);
}