0

I got a requirement similar to lightning dual list box. But my need is there must not be right and left arrow , instead if we click on the options in left box it has to be moved to the right box and vice versa. And also I need "Add all" button also.

Can you please suggest me to do that.

1 Answer 1

1

This might not be possible with standard lightning Dual box component. But However, you can create a component of your own something like "customDualBox" and design the functionality..

For Example, To implement the onclick selection of an item in the list

.html

<template>
<!-- Available Options List-->
<div class="slds-dueling-list__column slds-dueling-list__column_responsive">
    <spam>Available Options</spam>
    <div class="slds-dueling-list__options">
        <ul class="slds-listbox slds-listbox_vertical">
            <template for:each={options} for:item="lang">
                <li  class="slds-listbox__item" data-value={lang.value} key={lang.value} onclick={handleSelection}>
                    <div data-val={lang.value} class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline">
                      <span class="slds-media__body">
                          <span title="English" class="slds-truncate">{lang.label}</span>
                        </span>
                    </div>
                  </li> 
            </template>
        </ul>
    </div>
</div>

<!-- SELECTED OPTIONS LIST-->
<div class="box-margin slds-dueling-list__column slds-dueling-list__column_responsive">
    <spam>Selected Options</spam>
    <div class="slds-dueling-list__options slds-is-disabled">
        <ul class="slds-listbox slds-listbox_vertical">
            <template for:each={selected} for:item="sel">
                <li  class="slds-listbox__item" data-value={sel.value} key={sel.value} onclick={handleSelection}>
                    <div data-val={sel.value} class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline">
                      <span class="slds-media__body">
                          <span title="English" class="slds-truncate">{sel.label}</span>
                        </span>
                    </div>
                  </li> 
            </template>
        </ul>
    </div>
</div>

.JS

import { LightningElement, track } from 'lwc';

export default class DualListboxSimple extends LightningElement {
@track options = [
        { label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' },
        { label: 'Italian', value: 'it' },
        { label: 'Japanese', value: 'ja' },
    ];
@track selected = [];

handleSelection() {
    this.options.forEach(ele => {
        if(ele.value == event.currentTarget.dataset.value) {
            this.selected.push(ele);
        }
    });

    this.options = this.options.filter(ele => ele.value != event.currentTarget.dataset.value);
}

}

I have created a working sample on playground

Add any additional functionality can also be included similarly

1
  • Thanks a lot Abhijith. You saved my time. I made some more changes and here is the link.Playground Apr 2, 2020 at 4:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.