How to get Selected Items in ListView
Single or many items can be selected by the user in ListView. In ListView control, we have an API to get currently selected item details from ListView which is getSelectedItems method.
The API getSelectedItems returns the SelectedItem | SelectedCollection object with the below parameters.
Parameter | Purpose |
text | It will return the text of selected item lists |
data | It will return the whole data of selected list items. i.e., it returns the fields data of selected li. E.g. text, id, etc.. |
item | It will return the collections of list items |
Refer the below code snippet to render and get the selected items from ListView. Here we have mapped dataSource text and id in fields property.
@using Syncfusion.EJ2.Lists @using Syncfusion.EJ2.Buttons @Html.EJS().ListView("MyList").ShowHeader(true).HeaderTitle("Year").DataSource((IEnumerable<object>)ViewBag.RightSecondList).ShowCheckBox(true).Fields(new ListViewFieldSettings { Text = "text", Id = "id" }).Render() @Html.EJS().Button("element").Content("Get Selected Items").Render() <div id="val"></div> |
Refer to the below code snippet to display the fetched details in a div element. Here we fetched the checked items through a button click using getSelectedItems method. It returns text, data and item (collection of element).
<script> document.getElementById('element').addEventListener('click', function () { let selecteditem = document.getElementById('MyList').ej2_instances[0].getSelectedItems(); let valEle = document.getElementById('val'); valEle.innerHTML = ""; for (let i = 0; i < selecteditem["data"].length; i++) { let listData = document.createElement('p'); listData.innerHTML = "<b>Text : </b>" + selecteditem["text"][i] + " , " + "<b>Id : </b>" + selecteditem["data"][i].id; valEle.append(listData); } }); </script> |
Refer to the below link for sample
