Prevent select and close for some items

[Daniele MAGLIOCCHETTI]

Would it be possible to prevent selecting some specific items but behave normally on the others?

I have created a sample application where I want the DropDown to prevent selecting disabled items but let the user select enabled items as it would be normally. It is ok when I click an enabled item but when I click a disabled item the component gets stuck and I cannot do anything. Am I missing something?

Here the sample: https://stackblitz.com/edit/angular-syncfusion-dropdown-value-cbzrg5?file=app.component.ts

[UdhayaKumar Duraisamy]

You can prevent selecting an item in Dropdown components by setting the cancel property as true in the arguments of the select event. Also, you can show popup using showPopup method.

<div class="control-section">

  <div class="col-lg-8 content-wrapper">

    <ejs-dropdownlist

      #sample

      id="DDL"

      [dataSource]="sportsData"

      [fields]="fields"

      [placeholder]="autoreactiveplaceholder"

      floatLabelType="Auto"

      (select)="onSelect($event)"

      (close)="onClose($event)"

    >

      <ng-template #itemTemplate let-data>

        <div [ngClass]="{ 'text-danger disabled': data.disabled }">

          <span>{{ data.Game }}</span>

        </div>

      </ng-template>

    </ejs-dropdownlist>

  </div>

</div>

export class AppComponent {

  @ViewChild('sample')

  public listObj: DropDownListComponent;

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

  public isBool: boolean = false;

 

  public onSelect(args: any) {

    if (args.itemData.disabled) {

      args.cancel = true;

      this.isBool = true;

    }

  }

 

  public onClose(args: any) {

    var that = this;

    setTimeout(function () {

      if (that.isBool) {

        that.listObj.showPopup();

        that.isBool = false;

      } else {

        that.listObj.hidePopup();

      }

    }, 300);

  }

}

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