Disable/enable dropdowns (select option) in a dialog

[Jawahar Rajan]

Hello
Using a syncfusion dialog (from the ej2-angular-popups library)
The dialog is launched from a grid when user clicks a Modify Link
This code launches the dialog

               <e-column headerText='' width='150'>

                    <ng-template #template let-data>

                        <div class="modifyCancelOrder" >

                            <a (click)="cancelOrder(data)"> Cancel </a>

                            <span> | </span>

                            <a (click)="modifyOrder(data)" id="fake-link-1"> Modify </a>

                        </div>

                    </ng-template>

                </e-column>

modifyOrder code

  modifyOrder(selectedOrder: OrderItem) {

    this.selectedModal = 'Modify';

    this.ixSelectedOrder = selectedOrder;

    this.openModal();

  }

  async openModal() {

    this.dialogObj.show();

  }

  closeModal(val) {

    this.dialogObj.hide();

  }

in the dialog have three dropdown controls (select html tags)
I want to disable them based on if a certain condition is met or not

In the dialog I have another component (just an Angular form) I am setting some values in the form
If I disable a dropdown in the form then close the dialog, then open the dialog again for another record where I do not want the Dropdown to be disabled , however the dropdown in the dialog is still diabaled


Can I destroy the dialog and open it again or how can I force the Dialog to reresh

[Vinitha Jeyakumar]

Hi Jawahar,

You can use NgIf condition to render the dialog based on the condition and also you can make the dropdown enabled in the Dialog open event by checking conditions based on your requirement as like below.

Code snippet:

<ejs-dialog

    *ngIf="condition"

    #Dialog

    [buttons]="dlgButtons"

    [header]="header"

    [animationSettings]="animationSettings"

    [showCloseIcon]="showCloseIcon"

    [target]="target"

    [width]="width"

    (open)="dialogOpen()"

    (close)="dialogClose()"

  >

    <ejs-dropdownlist id="games" #sample [enabled]="enabled"></ejs-dropdownlist>

  </ejs-dialog>

public dialogClose = (): void => {

    document.getElementById('dlgbtn').style.display = '';

    this.condition = false;

  };

  // On Dialog open, 'Open' Button will be hidden

  public dialogOpen = (): void => {

    if (!this.enabled) {

      this.enabled = true;

    }

  };

  public dlgBtnClick = (): void => {

    this.enabled = false;

  };

  public BtnClick1 = (): void => {

    this.Dialog.destroy();

  };

  public BtnClick = (): void => {

    this.condition = true;

      };

Sample: https://stackblitz.com/edit/angular-u9ktmk?file=app.component.html,app.component.ts

Regards,

Vinitha