We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Prevent select and close for some items

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


1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team December 6, 2022 06:02 AM UTC

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 listObjDropDownListComponent;

  public fieldsObject = { text: 'Game'value: 'Id' };

  public isBoolboolean = false;

 

  public onSelect(argsany) {

    if (args.itemData.disabled) {

      args.cancel = true;

      this.isBool = true;

    }

  }

 

  public onClose(argsany) {

    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


Loader.
Live Chat Icon For mobile
Up arrow icon