Button inside DropdownList Template is not working properly

[Jonas Czeslik]

Hello Syncfusion team, 

I was trying to adapt the Dropdownlist Template to add a button to open further settings for the item. When I tested it, I found out that the click event for the buttons only work in the first cycle of the dropdownlist being open. 

Please refer to the following stackblitz to see that behaviour:

https://stackblitz.com/edit/angular-syncfusion-dropdown-value-gxhtwm?file=app.component.ts,app.component.html

Why do the buttons lose their event listeners after the first dropdown closing and how to evade this?
Is there a best practise for buttons inside Dropdown Template?

Thanks in regard
Jonas C.

[Deepak Ramakrishnan]

Hi Jonas,

We will further validate and update you in two business days (August 11 , 2022).

Thanks,

Deepak R.

[Jonas Czeslik]

Thanks for the update!

Just for the record. I made a workaround by adding event listeners again for all the buttons during each of the open events of the dropdown.

There I also can access the chosen value with the data-value property of the according e-list-item element.

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

Still, it seems that there should be a better solution to this. So, feel free to further investigate in this case!
Jonas!

[Sureshkumar P]

Hi Jonas,

To improve efficiency, we removed the popup element when it was closed. for your prior sample's event to fire for the first time. To fulfill your request, it is suggested that you keep the popup open event's event binding in place. The best way to fulfill your requirement is using this.

Regards,

Sureshkumar P

[Jonas Czeslik]

Hi, if I understood that correctly, I have to keep the reference of the popup in the first closing event and set the popup in the opening event on this reference again to keep the event listeners. I tried that, but that does not work. 

What am I doing wrong here?

https://stackblitz.com/edit/angular-syncfusion-dropdown-value-tvj3ce?file=app.component.ts,app.component.html

[Deepak Ramakrishnan]

Hi Jonas,

We have modified the sample by binding click event to the document and detect the click is made inside the popup using target of the event argument . Please refer to the attached sample and code snippet for reference.

[app.component.html]

<ng-template #itemTemplate="" let-data="">

      <!--set the value to itemTemplate property-->

      <span class="name"> {{ data.Game }}</span

      ><button

        class="{{ data.Id }}"

        style="float: right; margin-top: 8px;"

      >

        ↗

      </button>

    </ng-template>

 

 

  [app.component.ts]

ngOnInit() {

    document.addEventListener('click', function (args) {

      //debugger

      if (args.target.classList[0].indexOf("Game") == 0) {

        console.log(args.target.classList[0]);

      }

    })

  }

Sample link : https://stackblitz.com/edit/angular-syncfusion-dropdown-value-b7gyty?file=app.component.ts,app.component.html

Thanks,

Deepak R.

[Jonas Czeslik]

Thank you!

[Sureshkumar P]

Jonas,

Thanks for your update.

Regards,

Sureshkumar P