How to get selecteditems of the listviews?

[Ed]

Hi,

I'm new in React and still trying to learn it together with Syncfusion. 

Im trying to follow your documentation and also explored the demo but still I could not figure out how to access the selected items. based from this documentation , it is stated that I can access the selected items of the listview by calling the getSelectedItems method. Can you give an example on how do you actually call the method? I know there are a lot of ways to access the DOM and get the selected items, but I want to follow what is in your documentation.

Thank you!

- Ed

[Subha Shree Ramanathan]

Hi Ed, 

Thanks for contacting Syncfusion support. 

The getSelectedItems method is used to get the details of the currently selected item from the list items. It uses two interface, SelectedItem for flat-list and SelectedCollection for check-list.  

The getSelectedItems  returns below three parameters of selected items.  

  

• data array
• HTML element array
• text array.

Refer to the below code snippet for how to get the reference of ListView Component and how to get the selected items using getSelectedItems method by using the reference. 

  render() { 

        return ( 

            <div> 

                {/* ListView component is rendered in DOM and taking reference of ListView Component as listobj. */} 

                <ListViewComponent id='list' dataSource={this.data} showCheckBox={true} ref={(list) => { this.listobj = list; }} ></ListViewComponent>  

. . . 

. . . 

            </div> 

        ); 

    } 

 

. . . 

. . . 

let selecteditem = this.listobj.getSelectedItems(); // It returns the selected item data from list items 

 

For your convenience we have prepared a sample and attached below. Refer to the below sample link. 

Sample 

We suggest you to refer our below demo link and getting started links to explore more about our ListView Component. 

Demo link :  https://ej2.syncfusion.com/react/demos/#/material/listview/default 

Documentation link : https://ej2.syncfusion.com/react/documentation/list-view/getting-started.html 

API link: https://ej2.syncfusion.com/react/documentation/list-view/api-listViewComponent.html 

Resources: 

We also recommend you to refer our Syncfusion Succinctly free e-book to learn ReactJS. 

Please let us know if you need further assistance on this. 

Thanks, 

Subha Shree D.R 

 

[Ed]

Hi Subha, 

Thank you for a very detailed answer. I am now able to proceed with my task.

Regards,

Ed 

[Subha Shree Ramanathan]

Hi Ed, 

We are happy to hear that the provided information helps you to work with our Essential JS 2 ListView React component. 

Please let us know if you need further assistance on this. We are always happy to assist you. 

Thanks, 

Subha Shree D.R