Dual listbox: How to track the item added or removed from the target list box

[Dileep gagan R]

We are using Dual list box in reactive form and patching values on target list box to a control and we want it to happen on add or remove of items from source lilst box . How can we achieve it?

[Saranya Dhayalan]

Hi Dileep, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported query, actionBegin and actionComplete event triggered while user changes the content of the box via the toolbar (moveTo, moveFrom, moveAllTo, moveAllFrom). Please find the below code snippet: 

 

App.component.html 

 

<div class="control-section"> 

    <div class="dual-list-wrapper"> 

        <div class="dual-list-groupa"> 

            <h4>Group A</h4> 

            <ejs-listbox #listbox [dataSource]='dataA' [toolbarSettings]='toolbarSettings' height='330px' scope='#connected-list' [fields]='fields' (actionComplete)="actionComplete($event)"></ejs-listbox> 

        </div> 

        <div class="dual-list-groupb"> 

            <h4>Group B</h4> 

            <ejs-listbox id='connected-list' [dataSource]='dataB' height='330px' [fields]='fields'></ejs-listbox> 

        </div> 

    </div> 

</div> 

 

App.component.ts 

 

 

actionComplete(args) { 

            if (args.eventName === "moveTo" || "moveUp" || "moveDown" || "moveFrom" || "moveAllTo" || "moveFrom") { 

                alert("action complete triggered"); 

            } 

        } 

 

 

For your convenience we have prepared a sample. Please find the below sample link 

 

Sample link: https://stackblitz.com/edit/angular-tmmfyv-hbvyl5?file=app.component.ts 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Saranya D