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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get Selected Items in ListView

Platform: JavaScript - EJ 2 |
Control: ListView |
Published Date: September 18, 2018 |
Last Revised Date: September 18, 2018

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

Sample

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile