How to track the unselect items in listbox event

[JayaPrasad KV]

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

[Aravinthan Seetharaman]

Hi JayaPrasad, 

 

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. 

 

Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/listbox_unselected100599683  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/list_unselect-bind-value1746286302  

 

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