To implement checkbox inside duallistbox

[Adarsh N P]

Hello Syncfusion Community,
 I'd like to request assistance with a specific task. I'm working with the Syncfusion DualListbox component and I need to include a checkbox within the listbox items. The goal is to enable multiple selection of options at once.

Current Situation: I'm using the EJS (Embedded JavaScript) rendering engine to generate the listbox items. Currently, each item is rendered without a checkbox,


  Requirements: I would like to implement a checkbox within each listbox item, allowing users to select multiple options simultaneously.

 Question: Can anyone please provide guidance on how to integrate a checkbox within the EJS listbox items in the Syncfusion DualListbox component?

 Thanks for your help and time!

[YuvanShankar Arunagiri]

Hi Adarsh,

We have checked your reported query, and using the selectionSettings property of the Listbox component, we can enable the checkbox option with showCheckbox as true. Refer to the below code snippet and links.

Demo link: https://ej2.syncfusion.com/vue/demos/#/tailwind3/list-box/checkbox.html

UG link: https://ej2.syncfusion.com/vue/documentation/list-box/selection#multiple-selection

<ejs-listbox :dataSource="dataA" :fields="fields" :noRecordsTemplate='nTemplate' height="330px" scope="#connected-listbox" :selectionSettings="selectionSettings" :toolbarSettings="toolbarSettings"></ejs-listbox>

…..

// Set the selection settings with showCheckbox as enabled.

            selectionSettings: { showCheckbox: true },

….

provide: {

        // Injecting CheckBoxSelection module

        listbox: [CheckBoxSelection]

    }

Sample link: https://stackblitz.com/edit/fvda4evk?file=src%2FApp.vue

Please get back to us if you need any further assistance with this.

Regards,

YuvanShankar A