1. Home
  2. Forum
  3. Blazor
  4. How to track the unselect items in listbox event

How to track the unselect items in listbox event

I want to trach the unselected item in the listbox. Its there any events to track it.

1 Reply 1 reply marked as answer
AS Aravinthan Seetharaman Syncfusion Team June 22, 2021 01:49 PM UTC

 
Thanks for contacting Syncfusion Support. 
 
We have checked your query. In ListBox, we can able to get the selected item by using listbox Value property. And if we need to get the unselected item, then we need to iterate the updated datasource with selected items. Please refer the below code snippet. 
 
 
@using Syncfusion.Blazor.DropDowns 
@using Syncfusion.Blazor.Buttons 
 
<h4>Selected</h4> 
@{ if (selected != null) 
    { 
        var value = this.listObj.GetDataByValue(this.selected); 
        foreach (var item in value) 
        { 
            <p>@item.Text</p> 
        } 
    } 
} 
 
<h4>Unselected</h4> 
@{ if (selected != null) 
    { 
        list = new List<string> { }; 
        var unselected = this.listObj.GetDataList(); 
 
        foreach (var item in unselected) 
        { 
            foreach (var selecteItem in selected) 
            { 
                if (!selected.Contains(item.Id)) 
                { 
                    if (list.Count == 0) 
                    { 
                        list.Add(item.Id); 
                    } 
                    else if (!list.Contains(item.Id)) 
                    { 
                        list.Add(item.Id); 
                    } 
                } 
            } 
 
        } 
        var unselectedvalue = this.listObj.GetDataByValue(list.ToArray()); 
        foreach (var item in unselectedvalue) 
        { 
            <p>@item.Text</p> 
        } 
    } 
} 
 
<SfListBox TValue="string[]" DataSource="@Vehicles" TItem="VehicleData" @ref="listObj" @bind-Value="@SelectItem"> 
     
    <ListBoxFieldSettings Text="Text" Value="Id" /> 
</SfListBox> 
<SfButton OnClick="Click">Get Selected</SfButton> 
@code { 
    public List<VehicleData> Vehicles = new List<VehicleData> { 
        new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" }, 
        new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" }, 
        new VehicleData { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" }, 
        new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" }, 
        new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" }, 
        new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" }, 
        new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" }, 
        new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" } 
    }; 
    SfListBox<string[], VehicleData> listObj; 
    List<string> list = new List<string>(); 
    public string[] selected; 
    public string[] SelectItem = new string[] { "Vehicle-08" }; 
    public class VehicleData 
    { 
        public string Text { get; set; } 
        public string Id { get; set; } 
    } 
    private void Click() 
    { 
        list = null; 
        this.selected = this.listObj.Value; 
    } 
} 
 
 
For your convenience, we have prepared the video demo and sample based on our suggestion. Please find the link below. 
 
 
 
could you please check whether the given details are fulfilling your requirement and get back to us, if you need assistance on this. 
 
Regards, 
Aravinthan S

Marked as answer
Loader.
Up arrow icon