We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

listview add data

1 Reply

LD LeoLavanya Dhanaraj Syncfusion Team March 10, 2023 03:33 PM UTC

Hi Lakshminarayanan,

Greetings from Syncfusion support.

From the details you shared, we understand that you wish to add and modify list items in the JavaScript ListView component. In response to your request, we have prepared and included a ListView sample. In this sample, we added a new list item and modified the ListView component's datasource using the component instance inside a button click.

Check out the below mentioned code snippets for further assistance.

Sample : https://stackblitz.com/edit/scvzob-frbapd?file=index.js,index.html,index.css


<div id="container"> …

  <button id="btn">Modify data</button>

  <br /><br />

  <button id="btn1">Add data</button>




var newData = [

  { text: 'Bugatti Veyron Super Sport', id: '1' },




document.getElementById('btn').addEventListener('click', function () {

  listviewInstance.dataSource = newData;




document.getElementById('btn1').addEventListener('click', function () {

  var addData = {

    text: 'NewItem - ' + (Math.random() * 1000).toFixed(0),

    id: (Math.random() * 1000).toFixed(0).toString(),





Also, refer the below links for further assistance.

Documentation : https://ej2.syncfusion.com/javascript/documentation/listview/how-to/add-and-remove-list-items-from-listview/

API reference : https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/listview/default.html


Leo Lavanya Dhanaraj

Live Chat Icon For mobile
Up arrow icon