Customized dual list box with out right and left arrows

Question

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.

Answer 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