Dual list box orientation

[Namita]

Hi

I am using dual list box orientation. My requirement is I want to show Group B just below the Group A instead of side by side.

Can we do that?. Kindly help.

Regards,

Namita

[Gayathri KarunaiAnandam]

Hi Namita, 

We have checked your reported query. We can achieve your requirement by using the CSS style. Please check the below code snippet. 

[HTML] 

 

<div class="control-section"> 

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

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

            <h4>Group A</h4> 

            <ejs-listbox [dataSource]='dataA' height='330px' scope='#connected-list' [fields]='fields' 

                [allowDragAndDrop]="true"></ejs-listbox> 

        </div> 

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

            <h4>Group B</h4> 

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

                scope='#connected-list' [allowDragAndDrop]="true"></ejs-listbox> 

        </div> 

    </div> 

</div> 

[TS] 

 

export class AppComponent { 

  public dataA: { [key: string]: Object }[] = [ 

    { Name: 'Australia', Code: 'AU' }, 

    { Name: 'Bermuda', Code: 'BM' }, 

    { Name: 'Canada', Code: 'CA' }, 

    { Name: 'Cameroon', Code: 'CM' }, 

    { Name: 'Denmark', Code: 'DK' }, 

    { Name: 'France', Code: 'FR' }, 

    { Name: 'Finland', Code: 'FI' }, 

    { Name: 'Germany', Code: 'DE' }, 

    { Name: 'Hong Kong', Code: 'HK' } 

  ]; 

  public dataB: { [key: string]: Object }[] = [ 

    { Name: 'India', Code: 'IN' }, 

    { Name: 'Italy', Code: 'IT' }, 

    { Name: 'Japan', Code: 'JP' }, 

    { Name: 'Mexico', Code: 'MX' }, 

    { Name: 'Norway', Code: 'NO' }, 

    { Name: 'Poland', Code: 'PL' }, 

    { Name: 'Switzerland', Code: 'CH' }, 

    { Name: 'United Kingdom', Code: 'GB' }, 

    { Name: 'United States', Code: 'US' } 

  ]; 

  public fields: FieldSettingsModel = { text: 'Name' }; 

} 

[CSS] 

 

.control-section .dual-list-wrapper { 

  width: 60%; 

  margin: 0 auto 10px; 

} 

.dual-list-groupa, 

.dual-list-groupb { 

  width: 50%; 

} 

Sample: https://stackblitz.com/edit/angular-3p9qdn?file=app.component.html 

Please check the sample and get back to us, if you need further assistance. 

Regards, 

Gayathri K