How to Put An Icon in a Line of a ListBox to Remove the Line from the List?

[Alexandre]

Hello,

I have a ListBox where I put several dates, and I would like to be able to exclude one by one, via a button positioned by its side, in each line.

I have tried this code, but with no success:

What am I doing wrong?

Regards,

Alexanfre

[YuvanShankar Arunagiri]

Hi Alexandra,

We have validated your reported query and prepared the sample based on your provided sample code. Using the removeItem method, we can remove the respect list item from listbox component. Refer to the below code snippet and sample link.

API link: https://ej2.syncfusion.com/javascript/documentation/api/list-box/#removeitem

var listObj= new ej.dropdowns.ListBox({ 

    // Set the info to the data source property.

    dataSource: window.info,

    itemTemplate:  '<div>' + '<button class="remove-btn"><span class="e-icons e-delete-1"></span></button>' + '${text}</span></div>',

    beforeItemRender: onItemRender

});

listObj.appendTo('#listbox');

 

function onItemRender(args) {

    var btnElem = args.element.querySelector('.remove-btn');

    if (btnElem) {

        btnElem.addEventListener('click', onDelClick.bind(null, args.item));

    }

}

 

function onDelClick(item, e) {

    listObj.removeItem(item.text);

}

 

Sample link: https://stackblitz.com/edit/dehqwx?file=index.js

Kindly get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

[Francisco dos Anjos]

Hello  YuvanShankar,

Thanks for your answer, it clarified a lot. But I have a few following questions:

- Is it possible to use Fontawsome icons in the Listbox? Inside a red circle?

- Can it have the look and feel from the image I have sent above, instead of the one provided in your sample?



Regards,

Alexandre

[YuvanShankar Arunagiri]

Hi Alexandra,

Query: Is it possible to use Fontawsome icons in the Listbox?

Yes, we can use the font awesome icon in our Syncfusion Listbox control. Refer to the below code snippet.

 <link rel="stylesheet" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

……

itemTemplate:  '<div>' + '<button class="remove-btn"><i class="fas fa-trash-alt"></i></button>' + '${text}</span></div>',

    beforeItemRender: onItemRender

Query: Can it have the look and feel from the image I have sent above, instead of the one provided in your sample?

We have prepared the sample based on your requirement by using the card and badge component of Syncfusion. Refer to the below code snippet and sample link.

Card demo link: https://ej2.syncfusion.com/demos/#/fluent2/card/basic.html

Badge demo link: https://ej2.syncfusion.com/demos/#/fluent2/badge/default.html

<div style="position: relative;">

            <div tabindex="0" class="e-card" id="basic">

                <div class="e-card-header">

                    <div class="e-card-header-caption">

                        <div class="e-card-header-title">Dias Selecionadas</div>

                    </div>

                </div>

                <div class="e-card-content">

                    <div id="listbox-control">

                        <input id="listbox">

                    </div>

                </div>

            </div>

            <span class="e-badge e-badge-danger e-badge-notification e-badge-overlap e-badge-circle">10</span>

        </div>

Output screenshot:

Sample link: https://stackblitz.com/edit/dehqwx?file=index.html

Kindly get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

[Alexandre]

Hello  YuvanShankar,

Thank you very much for your answer, it was very helpful.

Regards,

Alexand

[YuvanShankar Arunagiri]

You are welcome, Alexandra. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.