ListView navigate to url without affecting checkbox

[Spyros]

Hello,

1. I have a ListView component with checkboxes and template with anchor tag so that I can navigate to other pages when clicking it.

2. if I click on the link, the box gets checked instantly and it remains selected.

I would like to achieve the following logic:

1. Check box only gets selected if I ONLY click on the checkbox itself.

2. if I click on the link, it redirects me to the defined url.

here is some code:

<ListViewComponent
    select={args => listItemSelectHandler(args)}
    id='itemsList'
    dataSource={visibleItems}
    fields={{ id: 'id', text: 'Description', groupBy: 'isChecked' }}
    showCheckBox={true}
    sortOrder='Descending'
    template={anchorTemplate}
/>

const anchorTemplate = (data) => {
    return (<a target='_blank' rel='nofollow' href={`http://localhost:3000/item/${data.id}`} rel='noreferrer'>{data.Description}</a>);
}

I tried to solve it, but I could not manage to do so.

Thank you in advance.

[Keerthana Rajendran]

Hi Spyros, 

 

Thanks for contacting Syncfusion support. 

 

We checked your requirement to prevent the checkbox selection when an anchor tag is clicked in the ListView item. Currently, the checkbox will be checked when an item is clicked. 

 

You can get the event target details in the select event and uncheck the item when it is an anchor tag. 

 

const listItemSelectHandler = (args) => { 

    if (args.event.target.tagName == 'A') { 

      listObj.uncheckItem(args.item); 

    } 

  }; 

 

 

Sample: https://stackblitz.com/edit/react-functional-component-test-wn7wot?file=index.js 

 

API link: https://ej2.syncfusion.com/react/documentation/api/list-view/#uncheckitem 

 

UG link: https://ej2.syncfusion.com/react/documentation/listview/check-list/ 

 

Please let us know if you need any further assistance. 

 

Regards, 

Keerthana R. 

[Spyros]

Dear Keerthana,

Thank you for your quick reply!

Indeed your solution is working great, I took a similar approach by checking the tab's visibility and toggling the checkbox because when you click the link, a new tab is set to open (with ​target='_blank'). Your solution is way more robust though!

For anyone that might want to achieve this as well, the provided solution accounts only for unchecked items, in order to account for checked too you need to toggle the checkbox rather than uncheck it always with something like this:

args.isChecked ? listObj.uncheckItem(args.item) : listObj.checkItem(args.item)

Have a great day!

Best regards.

[Keerthana Rajendran]

Hi Spyros, 

Thanks for the update. We are happy to hear that your requirement is achieved with the shared code. Please get back to us if you need any further assistance. We will be happy to assist you. 

Regards, 

Keerthana R.