How can I get the selected item from a Listbox

[Anthony Marler]

I have a simple SfListbox containing an id and value pair. It displays fine. Code below

The lstAddressSuggestions_Onchange code fires fine. But how can I get the id and/or value that has been selected at that point. I expected to be able to put something like below (note that SelectedItem is not a valid option but I'm using it it to indicate my thought process). If I query args here then Value is null?

What am I doing wrong.

Thanks

[Keerthikaran Venkatachalam]

Hi Anthony,

Thank you for reaching out to Syncfusion Support.

We have checked the reported query and to retrieve both the text and ID of the selected item, you can set TValue as VehicleData[] for the ListBox. Please refer to the provided code snippets, screenshots, and samples for assistance.

<SfListBox @ref="ListBoxObj" DataSource="@Vehicles" TValue="VehicleData[]" TItem="VehicleData" @bind-Value="@Value">

    <ListBoxEvents TValue="VehicleData[]" TItem="VehicleData" ValueChange="ValueChange"></ListBoxEvents>

    <ListBoxSelectionSettings Mode="Syncfusion.Blazor.DropDowns.SelectionMode.Single"></ListBoxSelectionSettings>

    <ListBoxFieldSettings Text="Text" Value="Text" />

</SfListBox>

@code {

    SfListBox<VehicleData[], VehicleData> ListBoxObj;

    private void ValueChange(ListBoxChangeEventArgs<VehicleData[], VehicleData> args)

    {

        var Values = args.Value;

    }

}

Sample link: https://blazorplayground.syncfusion.com/BjhpXxCfgRThgsSr

In the ValueChange event, we will return the listbox value property only if the listbox is in single selection mode, where you can get a single value. In multi-select mode, it can return multiple values. Could you please confirm if you require a single value in multi-select mode as well? Once confirmed, we can promptly check and provide an appropriate solution.

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[Anthony Marler]

Thanks KeerthiKaran, 

I'm more than a touch embarrassed because I'd already tried passing AddressSuggestions[] (i.e. my code as per your VehicleData[] example) without success. But I must have made an error somewhere because this now works perfectly following your example!! Thank you for proving I wasn't going completely mad!

Yes I've got single selection working thanks using below. It seems to work fine. Is that what you meant?  

<ListBoxSelectionSettings Mode="Syncfusion.Blazor.DropDowns.SelectionMode.Single"></ListBoxSelectionSettings>

One last thing I notice in your code you have @bind-Value="@Value"   but I guess that is for another purpose as I can't see I need that for my case. I'm familar with @bind-Value for tying data to a control, but have I missed something here?

Thanks again, Anthony

[Keerthikaran Venkatachalam]

Hi Anthony, 

We have validated the reported query, and the @bind-Value property is used to select the listbox item on initial load. After dynamically selecting the listbox item, the selected item is updated in the @bind-Value property.

In single selection mode, the listbox component will return a single value in the ValueChange event. However, in multi-select mode, it will return multiple values in the ValueChange event. Please refer to the attached video demonstration and UG link for reference.

UG link: https://blazor.syncfusion.com/documentation/listbox/selection

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: screencapture_81c2063.zip