Dual ListBox undefined on dialog

[Davi Braga]

I am using the Dual ListBox in a dialog but I need to refresh the listbox when I close and open another one.

I can't use the refresh function because the listbox remains undefined and I can't find a solution.

HTML

<ng-template #content>

<div class="control-section">

<select class="form-select-sm" style="border-color: rgb(197, 201, 204); width: 97%; display: block; margin: 10px auto;" [formControl]="privilegioFiltrar" (change)="filtrarPrivilegios()">

<option [selected]="true" selected>SELECIONE UMA CATEGORIAoption>

<option *ngFor="let prv of privilegiosAgrupados | keyvalue" [value]="prv.key"> {{ prv.key }}option>

select>

<div class="dual-list-wrapper d-flex m-2">

<div style="width: 50%; margin: 1em;">

<h2>Privilegios Disponíveish2>

<gs-caixa-de-pesquisa (textChanged)="selectedFilterText = $event">gs-caixa-de-pesquisa>

<ejs-listbox #listBox1 (actionBegin)='clickHandlerAdicionar($event)' [dataSource]='privilegiosDisponiveis | listFilter: selectedFilterText:dummy' [toolbarSettings]="toolbarSettings" height='330px' scope="#listBox2" [fields]='fields'>ejs-listbox>

div>

<div style="width: 50%; margin: 1em;">

<h2>Privilegios Selecionadosh2>

<gs-caixa-de-pesquisa (textChanged)="selectedFilterText = $event">gs-caixa-de-pesquisa>

<ejs-listbox #listBox2 id="listBox2" (actionBegin)='clickHandlerRemover($event)' [dataSource]='privilegiosSelecionados | listFilter: selectedFilterText:dummy' [fields]='fields' height='330px'>ejs-listbox>

div>

div>

div>

ng-template>

TS

import { CdkDragDrop, moveItemInArray, transferArrayItem } from "@angular/cdk/drag-drop"

import { DialogComponent } from '@syncfusion/ej2-angular-popups';

import { FieldSettingsModel, ListBox, ToolbarSettingsModel } from '@syncfusion/ej2-angular-dropdowns';

import { ListBoxComponent } from "@syncfusion/ej2-angular-dropdowns"

@Component({

selector: 'gs-form-usuario',

templateUrl: './form-usuario.component.html',

styleUrls: ['./form-usuario.component.scss'],

encapsulation: ViewEncapsulation.None

})

export class FormUsuarioComponent implements OnInit, AfterViewInit {

privilegiosDisponiveis: SistemaPrivilegio[] = [];

privilegiosSelecionados: SistemaPrivilegio[] = [];

fields: FieldSettingsModel = { text: 'privilegio'};

toolbarSettings: ToolbarSettingsModel = { items: [ 'moveTo', 'moveFrom', 'moveAllTo', 'moveAllFrom'] }

@ViewChild('listBox1') listBox1: ListBoxComponent;

@ViewChild('listBox2') listBox2: ListBoxComponent;

viewHeight = window.innerHeight;

viewWidth = window.innerWidth;

@Output() atualizaTable: EventEmitter<any> = new EventEmitter<any>();

@Output() proximoRegistro: EventEmitter<any> = new EventEmitter<any>();

@Output() registroAnterior: EventEmitter<any> = new EventEmitter<any>();

constructor(

) { }

ngOnInit(): void {

}

novoUsuario = (event: any): void => {

this.usuario = new Usuario();

this.editar(0);

this.ejDialog.show();

this.refresher();

};

// Open Dialog on edit

editar(id: number){

this.ejDialog.show();

this.refresher();

}

// Handler to add item

clickHandlerAdicionar(args: any) {

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

for (let i = 0; i < args.items.length; i++) {

this.usuario.privilegios.push(args.items[i]);

}

}

this.refresher();

}

// Handler to remove item

clickHandlerRemover(args: any) {

console.log(args)

if (args.eventName == "moveFrom" || args.eventName == "moveAllFrom") {

for (let i = 0; i < args.items.length; i++) {

this.privilegiosDisponiveis.push(args.items[i])

const updated = this.usuario.privilegios.filter(privilegio => privilegio.id !== args.items[i].id);

this.usuario.privilegios = updated;

}

console.log(args)

console.log(this.usuario.privilegios)

this.refresher();

}

}

refresher() {

this.listBox1.refresh();

this.listBox2.refresh();

console.log("List1: "+this.listBox1 +" List2: "+this.listBox2)

}

[YuvanShankar Arunagiri]

Hi Davi,

We have attempted to replicate the issue on our end but were unable to do so. We have prepared a sample based on your provided code snippet and to show how ListBox component refresh correctly on our end.

Sample link: https://stackblitz.com/edit/angular-jkiqj5?file=src%2Fapp.component.ts

If you still facing the issue, could you please share the issue replicable sample or replicate issue in our sample and video demonstration. Based on that we will check and provide you a better solution quickly.

Regards,

YuvanShankar A

[YuvanShankar Arunagiri]

Sample link: https://stackblitz.com/edit/angular-jkiqj5-a3r8y9?file=src%2Fapp.component.ts