How to add click event in JavaScript ListView items?

Description

In the JavaScript ListView component, there are multiple events such as actionBegin, actionComplete, actionFailure and select to interact with ListView.

You can interact with the ListView items using the select event that will trigger when you select a list item. The select event will not be triggered for an item, which is already selected.

Usecase scenario

Click the already selected list items in the ListView component.

Solution to achieve the requirement

You can achieve this requirement by removing the “e-active” class from the already selected Li item using the mousedown event. Bind mousedown event for ListView using the actionComplete event that will trigger once ListView items are rendered. 

Code snippet

Index.tsx
 
<ListViewComponent id="listview" dataSource={flatList} ref={list => this.ListInstance = list} select={this.onSelect.bind(this)} actionComplete={this.onComplete.bind(this)}></ListViewComponent> 
onComplete(args) 
{ 
    this.ListInstance.getElementById("listview").addEventListener("mousedown", e => { 
       let SelectedElement = e.target.closest("li"); 
       if(SelectedElement.classList.contains("e-active")) 
       { 
           SelectedElement.classList.remove('e-active'); // remove the active class in the mouse down 
        } 
    }); 
} 

Sample link:

https://stackblitz.com/edit/react-nusav6-m1da9q?file=index.js

Conclusion

I hope you enjoyed learning about how to add click event in JavaScript ListView items.

You can refer to our JavaScript ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript ListView example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!