Fetch selected items from ListView template sample in EJ2 JavaScript ListView control

1 Mar 20257 minutes to read

Users can select single or multiple items in the ListView control.

By default, the dataSource id and text are mapped in the default rendering of the ListView, which ensures proper data retrieval of selected items. However, in a custom template, the dataSource and the corresponding mappings (text, id, and elements rendered inside the li element) may vary depending on the application’s requirements.

Therefore, it is crucial to map the id attribute to ListView items using the fields of the dataSource to correctly retrieve selected item data when working with custom templates. Refer to the code snippet below for a 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');
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 control
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 control
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/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/30.1.37/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>
  <style>
    #listview {
      display: block;
      margin: auto;
      border: 1px solid;
      border-color: #c3c3c3;
      border-color: rgba(0, 0, 0, 0.12);
    }

    #listview .settings {
      height: auto;
    }

    #listview .e-list-item {
      height: auto;
      padding: 0;
      cursor: pointer;
      box-sizing: border-box;
      border: 0.1px solid #ccc;
    }

    #listview .e-list-header .e-text {
      font-family: sans-serif;
      font-size: 18px;
      line-height: 26px;
    }

    #listview #content {
      margin: 3px;
    }

    #listview .name {
      font-size: 12px;
      line-height: 25px;
    }

    #info {
      line-height: 20px;
      font-size: 12px;
    }

    #postImg {
      margin: 9px;
    }

    #postContainer {
      width: inherit;
      margin: auto;
      display: inline-flex;
    }

    #val {
      margin-top: 10px;
    }
  </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}