enabling reclick of the selected item in listview

[Aditya Murthy]

    Hi All,

I have a requirement where i am using a list view component to display a list of items.

And upon click of an item in list view , i display the relavent details in another component.

But I have noticed that once any item is clicked on the listview, it cannot be re selected or re -clicked.

Until I choose another item on the list.

Is there a way to enable re-click on the same list item so as to refresh the data on the display section of another component?

Regards,

Aditya

[Sowmiya Padmanaban]

Hi Aditya Murthy,  

 

Greetings from Syncfusion support. 

 

We suspect that your requirement is to trigger click event on clicking the same LI item, multiple times. By default, the select event will not be triggered for an item which is already selected. However, we can achieve your requirement by removing “e-active” class in the selected Li by using mousedown event.   

  

Bind mousedown event for ListView through actionComplete event which will be triggered once ListView items are rendered.  

 

Refer the below code snippet. 

 

 

<ejs-listview 

      id="listview" 

      [dataSource]="data" 

      (select)="select($event)" 

      (actionComplete)="actioncomplete($event)" 

    ></ejs-listview> 

 

select() { 

  console.log("select event triggered"); 

} 

actioncomplete() { 

      document.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 during mouse down  

        }  

    });  

} 

 

For your reference, we have prepared a sample. Refer the sample link below. 

 

https://stackblitz.com/edit/angular-gqodzd?file=app.component.ts 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Aditya Murthy]

Hi Aditya Murthy,  

 

Greetings from Syncfusion support. 

 

We suspect that your requirement is to trigger click event on clicking the same LI item, multiple times. By default, the select event will not be triggered for an item which is already selected. However, we can achieve your requirement by removing “e-active” class in the selected Li by using mousedown event.   

  

Bind mousedown event for ListView through actionComplete event which will be triggered once ListView items are rendered.  

 

Refer the below code snippet. 

 

 

<ejs-listview 

      id="listview" 

      [dataSource]="data" 

      (select)="select($event)" 

      (actionComplete)="actioncomplete($event)" 

    ></ejs-listview> 

 

select() { 

  console.log("select event triggered"); 

} 

actioncomplete() { 

      document.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 during mouse down  

        }  

    });  

} 

 

For your reference, we have prepared a sample. Refer the sample link below. 

 

https://stackblitz.com/edit/angular-gqodzd?file=app.component.ts 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

HI Sowmiya,

Thanks for the mentioned solution. It works perfectly

Regards,

Aditya

[Sowmiya Padmanaban]

Hi Aditya,  

  

We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 

  

Regards,  

Sowmiya.P