1. Home
  2. Forum
  3. Blazor
  4. How to get clicked item

How to get clicked item

Hello dear support.
I have checked the previous similar questions, but they are now not working since the recent changes in the components.
As well the examples provides does not fit the basic requirement of getting the actual clicked item.
( or at least I am failing to understand how ). so..

If I have a data model let say CompanyDataModel, and on
<ListViewEvents TValue="CompanyDataModel" Clicked="@( o => changeCompany( o.ItemData ) )"  />

public void changeCompany( CompanyDataModel o )
{
}

The method triggers but the argument is always null.

I would like to receive the data object of the clicked item.
Please help. 

9 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team December 2, 2020 08:48 AM UTC

Hi Yordan,  
 
Greetings from Syncfusion support. 
 
We have checked your requirement with ListView component. You can get the clicked item details in event arguments of Clicked event of ListView component using the following depicted code sample. 
 
Please, refer the below code snippet. 
 
@using Syncfusion.Blazor.Lists 
<SfListView @ref="listview" DataSource="@DataSource" > 
    <ListViewEvents TValue="DataModel" Clicked="Click"></ListViewEvents> 
    <ListViewTemplates TValue="DataModel"> 
        <Template> 
                <span class="e-list-item-header">@((context as DataModel).Text)</span>         
        </Template> 
    </ListViewTemplates> 
    <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings> 
</SfListView> 
 
@code { 
    SfListView<DataModel> listview; 
    public string HeaderTitle = "Listview"; 
 
    List<DataModel> DataSource = new List<DataModel>() 
{ 
        new DataModel { Id = "1", Text = "1", Type = "Odd"}, 
        new DataModel { Id = "2", Text = "2", Type = "Even"}, 
        new DataModel{ Id = "3", Text = "3", Type = "Odd"}, 
        new  DataModel{ Id = "4", Text = "4", Type = "Even"}, 
    }; 
 
    public class DataModel 
    { 
        public string Id { get; set; } 
        public string Text { get; set; } 
        public string Type { get; set; } 
    } 
 
    public void Click(ClickEventArgs<DataModel> args) 
    { 
        var clicked_list = args.ItemData; 
    } 
} 
 
Please, refer the below screenshot. 
 
 
 
 
Please, refer the below sample link. 
 
 
Please refer to the below links to know more about the ListView component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


YO Yordan December 2, 2020 09:14 AM UTC

First of all - thank You for Your kind and fast support! :)
Anyway I still receiving NULL :'|



SP Sowmiya Padmanaban Syncfusion Team December 3, 2020 09:32 AM UTC

Hi Yordan,  
 
We have checked your attached screenshot. We suspect your reported problem might have arisen due to incorrect mapping of field settings to the ListView component. 
 
Could you please check that you have mapped the field settings correctly to the ListView component. 
 
Please, refer the below code snippet with proper field settings. 
 
 
@using Syncfusion.Blazor.Lists 
<SfListView @ref="listview" DataSource="@DataSource" ShowHeader="true"> 
    <ListViewEvents TValue="CompanyDataModel" Clicked="Click"></ListViewEvents> 
    <ListViewTemplates TValue="CompanyDataModel"> 
        <Template> 
                <span class="e-list-item-header">@((context as CompanyDataModel).name)</span>         
        </Template> 
    </ListViewTemplates> 
    <ListViewFieldSettings TValue="CompanyDataModel" Id="id" Text="name" GroupBy="group"></ListViewFieldSettings> 
</SfListView> 
 
@code { 
    SfListView<CompanyDataModel> listview; 
    public string HeaderTitle = "Listview"; 
 
    List<CompanyDataModel> DataSource = new List<CompanyDataModel>() 
{ 
        new CompanyDataModel { id = "1", name = "1", group = "Odd"}, 
        new CompanyDataModel { id = "2", name = "2", group = "Even"}, 
        new CompanyDataModel{ id = "3", name = "3", group = "Odd"}, 
        new  CompanyDataModel{ id = "4", name = "4", group = "Even"}, 
    }; 
 
    public class CompanyDataModel 
    { 
        public string id { get; set; } 
        public string name { get; set; } 
        public string group { get; set; } 
    } 
 
    public void Click(ClickEventArgs<CompanyDataModel> args) 
    { 
        var clicked_list = args.ItemData; 
    } 
} 
 
 
Please, refer the below sample link: 
 
 
If the issue still persist, could you please share the following details to us 
 
1.     Share the code snippet your data source of ListView component. 
 
2.     Share the Syncfusion.Blazor package version you have used in your application. 
 
3.     Are you using client or server side Blazor application. 
 
4.     If possible, replicate the issue in attached sample. 
 
This information help us to find the cause of your reported problem and to provide you the prompt solution. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
YO Yordan December 3, 2020 10:34 AM UTC

Good lords. 
Seems like a DataModel without { get; set; } in the fields which is used for data mapping in the components is not working.
My class was like this :
    public class CompanyDataModel
    {
        public string group;
        public string name;
        public string realName;
        public string id;

        public CompanyDataModel( JObject o )
        {
            this.id = o.Value( "id" );
            this.realName = o.Value( "realname" ); 
            this.name = o.Value( "name" );
            this.group = "Main";
        }

    }

and then i've put  { get; set; }
    public class CompanyDataModel
    {
        public string group { get; set; }
        public string name { get; set; }
        public string realName { get; set; }
        public string id { get; set; }

        public CompanyDataModel( JObject o )
        {
            this.id = o.Value( "id" );
            this.realName = o.Value( "realname" ); 
            this.name = o.Value( "name" );
            this.group = "Main";
        }

    }

Thank You. Now it is working.
I've never expected this to cause this much troubles.

SP Sowmiya Padmanaban Syncfusion Team December 4, 2020 06:36 AM UTC

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


RE Remi July 15, 2021 01:50 PM UTC

It helps me.I want to add put only setter and getter on POCO objetcs.


public class FileItem

{

    public int id { get; set; } // Use get/set else ListViewEvents/Clicked returns null

    public string name { get; set; }

    public Geideon.FileInfo fileRef; // Don't use get/set else get json serialisation error

}




KR Keerthana Rajendran Syncfusion Team July 16, 2021 11:03 AM UTC

Hi Remi, 
 
We are glad to hear that the provided suggestion helped you. Please get back to us if you need any further assistance.  
 
Regards, 
Keerthana R.  


ÁN Ángel February 9, 2025 03:24 AM UTC

Hello, 

Sorry to reopen this thread but, i'm getting same issue with empty data after clicked event

I'm using .Net 9 and Sync version 28.1.33

I have verified that the properties has de get/set stuff

Many thanks for your support

Regards


LD LeoLavanya Dhanaraj Syncfusion Team February 10, 2025 12:36 PM UTC

Hi Angel,


We have checked the Clicked event issue with the Blazor ListView component in the reported version(28.1.33) and framework(.NET 9). However, we were unable to replicate the issue on our end. We tested this issue in different browsers, both during the initial rendering and after interacting with the component, and we received the correct list data details for the clicked item. For your reference, we have included the validated sample and an output screenshot.


We suggest that you check the shared sample on your end. If the issue persists, please provide the steps to replicate the issue and any relevant code snippets. This information will help us better understand your situation and provide a timely resolution.


Regards,

Leo Lavanya Dhanaraj


Attachment: ListView_88e1a196.zip

Loader.
Up arrow icon