OnClick navigate to

[Daniel Salyi]

Hello,

1. I have a ListView with rel='nofollow' href elements in it, with checkboxes.

2. if I click on the item (not on the link, but on the card), 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 it's self.

2. if I click on the card, it redirects me to the rel='nofollow' href.

here is some code:

<SfListView DataSource="@Lessons" ShowCheckBox="true"> 

                    <ListViewFieldSettings Text="Title"></ListViewFieldSettings>

                    <ListViewTemplates TValue="LessonPage">

                        <Template>

                            <a style="color: black" rel='nofollow' href="/lessons/@((context as LessonPage).Title)">@((context as LessonPage).Title)</a>

                        </Template>

                    </ListViewTemplates>

                </SfListView>

I tried to solve it, but I could not manage. Thanks in advance.

[Muthukrishnan Kandasamy]

 

Hi Daniel, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirements in Syncfusion Blazor ListView component. Selected event will trigger, whenever we select any item in the ListView component. When we select the item, e-active class will be added in the selected item to maintain the selection state in ListView. We need to remove the e-active class from the selected item in the ListView component, if we click the area except the checkbox element. 

 

For this requirement, we need to use the JS interop to get the target DOM element of ListView. Please refer to the below link to know more about interop in Blazor.  

  

https://www.syncfusion.com/faq/blazor/javascript-interop/is-there-a-way-to-access-dom-in-blazor  

 

Please refer to the below code block.  

 

[Index.razor] 

 

 

@using Syncfusion.Blazor.Lists 

@inject IJSRuntime jsRuntime 

@using Newtonsoft.Json; 

 

<div id="container"> 

    <div id="sample"> 

        <SfListView ID="list" DataSource="@DataSource" ShowCheckBox="true"> 

            <ListViewFieldSettings Id="Id" Text="Name"></ListViewFieldSettings> 

            <ListViewEvents Selected="@OnSelected" TValue="ListDataModel"></ListViewEvents> 

            <ListViewTemplates TValue="ListDataModel"> 

                <Template> 

                    <a target='_blank' rel='nofollow' href="@((context as ListDataModel).Url)"> 

                        @((context as ListDataModel).Name) 

                    </a> 

                </Template> 

            </ListViewTemplates> 

        </SfListView> 

    </div> 

</div> 

 

@code 

{ 

    List<ListDataModel> DataSource = new List<ListDataModel>() { 

        new ListDataModel { 

            Id = "1", 

            Name = "Google", 

            Url = "https://www.google.com" 

        }, 

       … 

…. 

        new ListDataModel { 

            Id = "5", 

            Name = "AOL.com", 

            Url = "https://www.aol.com" 

        } 

    }; 

 

    public async Task OnSelected(SelectEventArgs<ListDataModel> args) 

    { 

        //serailize the select event arg 

        var value = JsonConvert.SerializeObject(args.Event); 

        Dictionary<string, dynamic> eventParameters = JsonConvert.DeserializeObject<Dictionary<string, dynamic>>(value); 

 

        // serialize selected item data 

        var data = JsonConvert.SerializeObject(args.Data); 

        Dictionary<string, dynamic> argsData = JsonConvert.DeserializeObject<Dictionary<string, dynamic>>(data); 

 

        await jsRuntime.InvokeAsync<string>("accessDOMElement", eventParameters, argsData); 

    } 

… 

.. 

} 

 

[_Host.cshtml] 

 

<script> 

        function accessDOMElement(args, data) { 

            // get listview component instance 

            var listObj = document.getElementById("list").ej2_instances[0]; 

            var elem = document.elementFromPoint(args.clientX, args.clientY); 

            if (elem.classList.contains("e-list-text")) { 

                // remove the active and focus class 

                elem.parentElement.parentNode.classList.remove("e-active", "e-focused"); 

                // uncheck the item 

                listObj.uncheckItem(elem.parentElement.parentNode); 

            } else if (elem.classList.contains("e-text-content")) { 

                 // remove the active and focus class 

                elem.parentElement.classList.remove("e-active", "e-focused"); 

                // uncheck the item 

                listObj.uncheckItem(elem.parentElement); 

            } 

            // navigate to the url 

            document.location.rel='nofollow' href = data.Url; 

        } 

    </script> 

 

We have attached a sample for your convenience, which can be downloaded from the following link. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewTemp-2023515196 

 

Description	Link
Getting started	https://blazor.syncfusion.com/documentation/listview/getting-started/
Data Binding	https://blazor.syncfusion.com/documentation/listview/data-binding/
Selected items	https://blazor.syncfusion.com/documentation/listview/how-to/get-selected-items-from-listview/
API reference	https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Lists.SfListView%601_members.html

 

 

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

 

Regards, 

Muthukrishnan K