Cancel and save button in MultiSelect popup in Javascript

[Durai]

Hi Team,

Provide some sample with save and cancel button in dropdown popup like below. Could you please suggest some other dropdown controls also?

[UdhayaKumar Duraisamy]

Hi Durai,

We are validating the requirement. We will update the further details in two business days (20^th October 2022).

Regards,

Udhaya Kumar D

[Durai]

Hi Team,

Query 2:

How to recognize the action in Select Event, when user click SelectAll option in MutliSelect control.

[Durai]

Waiting for solution

[UdhayaKumar Duraisamy]

Hi Durai,

Query 1:

Cancel and save button in MultiSelect popup in Javascript

Based on the shared information we suspect that you are trying add custom buttons in the footer section of the popup. The MultiSelect has options to show a footer element at the bottom of the list items in the popup list. Here, you can place any custom element as a footer element using the footerTemplate property.

Please refer to the below documentation for more information.

https://ej2.syncfusion.com/javascript/documentation/multi-select/templates/#footer-template

Query 2:

How to recognize the action in Select Event, when user click SelectAll option in MutliSelect control.

The MultiSelect component has a selectedAll Event. The selectedAll event triggers when the select all is clicked.

Documentation : https://ej2.syncfusion.com/javascript/documentation/api/multi-select/#selectedall

Kindly try the above suggestion and let us know if this meets your requirement. If we misunderstood the requirement, we request you to provide exact requirement details. This will help us validate the requirement further and provide you with a better solution.

Regards,

Udhaya Kumar D

[Durai]

Hi Team,

Sorry for the late response.

I have added buttons in multiselect footer. But i can't be able to bind the click event of the footer buttons.
Please suggest any event to bind the click event of footer buttons.
 
Workaround Sample:  N1thbk (forked) - StackBlitz

[UdhayaKumar Duraisamy]

You can't get the button elements right away when you open the popup. You can resolve the problem by using the setTimeOut function.

open: function (args) {

    setTimeout(function () {

      if (document.getElementById('multiselok') != null) {

        document

          .getElementById('multiselok')

          .addEventListener('click', function () {

            window.alert('Ok');

          });

      }

      if (document.getElementById('multiselcancel') != null) {

        document.getElementById('multiselcancel').onclick = function () {

          window.alert('Cancel');

        };

      }

    }, 50);

  },

 

Sample : https://stackblitz.com/edit/j52xe6?file=index.html,index.ts