Fetch selected items from listview template sample in EJ2 JavaScript Listview control

8 Aug 20235 minutes to read

Single or multiple items can be selected by users in the ListView control.

By default, dataSource id and text is mapped in default rendering of listview, since it returns the selected item data properly. But in the custom template, dataSource and the corresponding mapping (text, id, elements rendered inside li element) will vary as per the application requirement.

So, we need to map id attribute to listview items using fields of dataSource to get the selected item data properly while working with custom templates. Refer to the below code snippet for template sample.

// Initialize ListView control
 let listObj: ListView = new ListView({

    //Set defined data to dataSource property
    dataSource: dataSource,

    //Map the appropriate columns to fields property
    fields: { text: 'Name', id:'Name'},

    //Set customized template
    template: template,

    enableRtl: true,

    //ListView Select event
    select: onSelect

});

//Render initialized ListView control
listObj.appendTo('#listview');

index.js
index.html
var template = '<div class="settings">'
        + '<div id="postContainer"><div id="postImg">'
        + '<img src=${image} style="height:35px;width:35px;border-radius:50%; border: 1px solid #ccc;" /></div>'
        + '<div id="content">'
        + '<div class="name">${Name}</div>'
        + '<div id="info">${contact}</div>'
        + '</div>'
        + '</div>'

    //Define an array of JSON data
    var dataSource = [
    { Name: 'Nancy', contact: '(206) 555-985774', id: '1', image: 'https://ej2.syncfusion.com/demos/src/grid/images/1.png', category: 'Experience' },
    { Name: 'Janet', contact: '(206) 555-3412', id: '2', image: 'https://ej2.syncfusion.com/demos/src/grid/images/3.png', category: 'Fresher' },
    { Name: 'Margaret', contact: '(206) 555-8122', id: '4', image: 'https://ej2.syncfusion.com/demos/src/grid/images/4.png', category: 'Experience' },
    { Name: 'Andrew ', contact: '(206) 555-9482', id: '5', image: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', category: 'Experience' },
    { Name: 'Steven', contact: '(71) 555-4848', id: '6', image: 'https://ej2.syncfusion.com/demos/src/grid/images/5.png', category: 'Fresher' },    ];
  

    // Initialize ListView component
    var listObj = new ej.lists.ListView({

        //Set defined data to dataSource property
        dataSource: dataSource,

        //Map the appropriate columns to fields property
        fields: { text: 'Name', id:'Name'},

        //Set customized template
        template: template,

        enableRtl: true,
        select: onSelect

    });

    //Render initialized ListView component
    listObj.appendTo('#listview');

   function onSelect(){
    var selectedItem = listObj.getSelectedItems();
    document.getElementById('val').innerHTML = 'Selected Item : <b>'+selectedItem.text+'</b>';
   }
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for ListView UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
         <!-- ListView element -->
    <div id="listview" tabindex="1">
    </div>
    <table id="val"></table>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>