enable to get data from ListBox2 in dual list box

[Namita]

Hi

I am using dual list box control but not able to find out data from second list(ListBox2)

I also refer following link:-

https://stackblitz.com/edit/angular-vqjkkv?file=app.component.ts

but my datasource is always null.

Here is my code:-

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

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

            <ejs-listbox #listbox1 [dataSource]="Columns" [fields]="chooseColumnfields" height="200px"

                         [toolbarSettings]="Listtoolbar" scope="#listbox2" [allowDragAndDrop]="true"></ejs-listbox>

          </div>

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

            <ejs-listbox #listbox2 id="listbox2" [fields]="chooseColumnfields" height="200px"  [allowDragAndDrop]="true"

                         [dataSource]='List2DataSrc'></ejs-listbox>

          </div>

        </div>

Please help also I need Toolbox click event.

Namita Singla

[Aravinthan Seetharaman]

Hi Namita, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your reported query.  

 

Query1: my datasource is always null. 

 

Ans:  We have checked your query and sample. We cannot reproduce your reported issue in our end. And we suspect that you are trying to get current data items from listbox. We can get dataItems of the listbox by using getDataList method as like in the below code snippet.  

 

 

click() { 

    var data = this.listObj2.getDataList(); 

    console.log(data); 

  } 

 

 

For your reference we have created sample here. 

 

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

 

If you are still facing the issue, kindly share the below details.  

                

·        If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample. 

·        Please share us the video demonstration of this issue. 

 

Query2: I need Toolbox click event. 

 

Ans: In ListBox we have actionBegin and actionComplete events which will be triggered when clicking the toolbar buttons. For your reference we have provided code snippet and sample here.  

 

 

<ejs-listbox [dataSource]="dataA" #listbox1 [toolbarSettings]="toolbarSettings"  

      scope="#connected-list" [fields]="fields" (actionBegin)="actionBegin($event)" 

      (actionComplete)="actionComplete($event)"> 

</ejs-listbox> 

 

… 

actionBegin(args) { 

    console.log(args); 

  } 

  actionComplete(args) { 

    console.log(args); 

  } 

 

For your reference we have created sample here. 

 

Sample: https://stackblitz.com/edit/angular-h4udea-y1bgq1?file=app.component.ts  

 

Could you please check the above details, and get back to us with requested details. Based on that we will check and provide you a better solution quickly. 

 

Regards, 

Aravinthan S 

[Namita]

Hi

GeDataList is returning null

[Aravinthan Seetharaman]

Hi Namita, 

 

Thanks for the update. 

 

We have checked your query with multiple cases, andwe cannot get null while using getDataList method. For your reference we have created video demonstration and sample here. 

 

Demo: https://www.syncfusion.com/downloads/support/directtrac/162364/ze/ListBox_GetDataList-1526955100  

 

Sample: https://stackblitz.com/edit/angular-h4udea-y1bgq1?file=app.component.ts  

 

If you are still facing the issue, kindly share the below details. 

 

·        Please share us the features that you are enabled in ListBox. 

·        Please share the exact use case scenario to reproduce the issue. 

·        If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample. 

·        Please share us the video demonstration of this issue. 

·        Please share us the Essential Studio Product Version. 

 

Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

 

Regards, 

Aravinthan S

[Namita]

Can we use getDataList on actionCompleted event?

[Namita]

OK, I got it but can we pick the data of list2 on actionCompleted event?

[Aravinthan Seetharaman]

Hi Namita, 

 

Thanks for the update. 

 

We have checked your reported query, we can use GetDataList method in actionComplete event to get data form required listbox, as like in the below code snippet. 

 

app.component.html 

 

<ejs-listbox id="connected-list" #listbox2 [dataSource]="dataB" height="330px" [fields]="fields" 

            (actionComplete)="actionComplete($event)"  scope="#connected-list" >   

</ejs-listbox> 

 

 

app.component.ts 

 

actionComplete(args) { 

    var data = this.listObj2.getDataList(); 

    console.log(data); 

  } 

 

 

For your reference we have prepared sample here. 

 

Sample: https://stackblitz.com/edit/angular-h4udea-so2vxy?file=index.html  

 

Could you please check the above details, and get back to us, if you need assistance on this. 

 

Regards, 

Aravinthan S