Get selected items from ListView

4 Mar 20258 minutes to read

Single or many items can be selected by users in the ListView control. An API is used to get selected items from the list items. This is called as the getSelectedItems method.

Method Usage
getSelectedItems This is used to get the details of the currently selected item from the list items. It returns the SelectedItem or SelectedCollection depending on the selection mode.

The getSelectedItems method returns the following items from the selected list items.

Return type Purpose
text Returns the text of selected item lists
data Returns the whole data of selected list items, i.e., returns the fields data of selected li.
item Returns the collections of list items 
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists

<ejs-listview id="element" dataSource="(IEnumerable<object>)ViewBag.dataSource" showCheckBox="true">
</ejs-listview>
<div id="text">
    <ejs-button id="btn"><e-content-template>Get selected Items</e-content-template></ejs-button>
    <table id="val"></table>
</div>


<style>
    #text {
        margin-left: 10px;
        margin-top: 20px;
    }

    #element {
        max-width: 350px;
        margin: auto;
        margin-top: 10px;
        display: block;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>

<script>

    document.getElementById('btn').addEventListener('click', () => {
        const { data, text } = document.getElementById('element').ej2_instances[0].getSelectedItems();
        const table = document.getElementById('val');
        table.innerHTML = `<tr>
                            <th>Text</th>
                            <th>Id</th>
                            </tr>
                            ${data.map((item, index) => `
                            <tr id="${index}">
                                <td>${text[index]}</td>
                                <td>${item.id}</td>
                            </tr>
                            `).join('')}
                            `;
    });
    </script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ListViewController : Controller
    {
        public IActionResult list()
        {   
           List<object> listdata = new List<object>();
            listdata.Add(new
            {
                text = "Hennessey Venom",
                id = "list-01"

            }); listdata.Add(new
            {
                text = "Bugatti Chiron",
                id = "list-02"

            }); listdata.Add(new
            {
                text = "Bugatti Veyron Super Sport",
                id = "list-03"

            }); listdata.Add(new
            {
                text = "SSC Ultimate Aero",
                id = "list-04"

            }); listdata.Add(new
            {
                text = "Koenigsegg CCR",
                id = "list-05"

            }); listdata.Add(new
            {
                text = "McLaren F1",
                id = "list-06"
            }); listdata.Add(new
            {
                text = "Aston Martin One- 77",
                id = "list-07"
            }); listdata.Add(new
            {
                text = "Jaguar XJ220",
                id = "list-08"
            });
            ViewBag.dataSource = listdata;
            return View();
        }       
    }
}