1. Home
  2. Forum
  3. Angular - EJ 2
  4. In a dropdownlist before changing the value we need to show a confirmation popup if clicked on ok in that popup we need to change value if clicked on

In a dropdownlist before changing the value we need to show a confirmation popup if clicked on ok in that popup we need to change value if clicked on

Hi Team,

In a dropdownlist after selecting before changing the value we need to show a confirmation popup if clicked on 'OK' in that popup we need to change value if clicked on 'NO' we need to revert that change.

this is the sample code snippet 

configMetricTypeParam() {
    this.metricTypeParams = {
      create: () => {
        this.metricTypeElem = document.createElement('input');
        return this.metricTypeElem;
      },
      read: () => {
        return this.metricTypeObj.text;
      },
      destroy: () => {
        this.metricTypeObj.destroy();
      },
      write: (args: any) => {
        let currentScope = this;
        this.metricTypeObj = new DropDownList({
          dataSource: this.metricTypeDropdown,
          fields: { value: 'id', text: 'name' },
          value: args.rowData['metricType'] !== null ? args.rowData['metricType'] : '',
          text: args.rowData['metricType'],
          enabled: true,
          allowFiltering: true,
          placeholder: '',
          floatLabelType: 'Never',
          showClearButton: true,
          select: (e: any)=>{
            if(!e.itemData.name.includes("Average") && (args.rowData.historicalMappingId || args.rowData.financialMappingId) && args.rowData.reverseCalculation !== ''){
              const dialogue = currentScope.dialog.open(InfoComponent, { disableClose: true, data: 'MetricDataValidation' });
              dialogue.afterClosed().subscribe(async (response: any) => {
                if (response === 'YES') {
                  this.metricTypeChangeIfRcal(e,args);
                } else{
                  e.cancel = true;
                }
              });
            }
          },
          change: (e: any) => {
            this.metricTypeChangeIfRcal(e,args);
            if(args.rowData.financialMappingId || args.rowData.historicalMappingId){
              if(e.itemData.name.includes('Average')) {
                args.row.children[10].children[0].children[2].classList.remove('iconDisabled');
              } else {
                args.row.children[10].children[0].children[2].classList.add('iconDisabled');
              }
            }
          },
          filtering: (e: any) => {
            e.text = e.text.trim();
            let query: Query = new Query();
            query = e.text !== '' ? query.where('name', 'contains', e.text, true) : query;
            e.updateData(this.metricTypeObj.dataSource, query);
          }
        });
        this.metricTypeObj.appendTo(this.metricTypeElem);
      }
    }
  }


Can you please provide me a solution for this issue.


Thank you,

Lahari Navudu


1 Reply
UD UdhayaKumar Duraisamy Syncfusion Team September 20, 2022 11:50 AM UTC

Hi Lahari,


We can show a confirmation popup while we select any item in the DropDownList popup using the select event and confirm() method. The confirm() method displays a dialog box with a message, an OK button, and a Cancel button. The confirm() method returns true if the user clicked "OK", otherwise false. Based on the confirmation we can prevent the selection of an item on the DropDownList component.


export class AppComponent {

  @ViewChild('sample')

  public listObj: DropDownListComponent;

  public sportsData: Object[] = [

    { Id: 'Game1', Game: 'American Football' },

    { Id: 'Game2', Game: 'Badminton' },

    { Id: 'Game3', Game: 'Basketball' },

    { Id: 'Game4', Game: 'Cricket' },

  ];

  public fields: Object = { text: 'Game', value: 'Id' };

  public height: string = '220px';

  public waterMark: string = 'Select a game';

  public value: string = '';

  public onSelect(args) {

    let text = 'Click OK to Confirm the Change';

    if (confirm(text) == false) {

      args.cancel = true;

    }

  }

}


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


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Regards,

Udhaya Kumar D


Loader.
Up arrow icon