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
|
[index.html]
<div id="container"> …
<button id="btn">Modify
data</button>
<br /><br />
<button id="btn1">Add
data</button>
</div>
[index.js]
var newData = [
{ text: 'Bugatti Veyron Super Sport', id: '1' },
…
];
document.getElementById('btn').addEventListener('click', function ()
{
listviewInstance.dataSource = newData;
listviewInstance.dataBind();
});
document.getElementById('btn1').addEventListener('click', function ()
{
var addData = {
text: 'NewItem - ' + (Math.random() * 1000).toFixed(0),
id: (Math.random() * 1000).toFixed(0).toString(),
};
listviewInstance.addItem([addData]);
listviewInstance.dataBind();
});
|
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
Regards,
Leo Lavanya Dhanaraj
