Cannot clear the Selected Items in SfListBox control

[Chris Marshall]

We have created an SfListBox control below, however, we are not able to clear the selection we have tried several different options regardless of what we do the list doesn't clear correctly.

We also have found that the selected items do not change if we pass in a new list (however) if a previous option wasn't selected it will be selected but entries that should no longer be selected do not clear.

<SfButton @onclick="TestClear">Test Clear</SfButton>

<SfListBox Value="@CurrentUserModel.SelectedLocations" DataSource="@AvailableLocations" TItem="LocationModel" TValue="List<int>" Height="250px" HtmlAttributes="@AssignedLocationsHtmlAttributes">

    <ListBoxSelectionSettings ShowCheckbox="true" ShowSelectAll="true"></ListBoxSelectionSettings>

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

</SfListBox>

@code {

     [Parameter]

     public UserModel CurrentUserModel { get; set; }

     private IEnumerable<LocationModel> AvailableLocations { get; set; }

    protected override void OnInitialized()

    {

        base.OnInitialized();

        AvailableLocations = DataService.GetLocations();

    }

     private void TestClear()
    {

        // First attempt

        CurrentUserModel.SelectedLocations.Clear();

        StateHasChanged();

        // Second attempt

        CurrentUserModel.SelectedLocations = new List<int>();

        StateHasChanged();

        // Third Attempt

        CurrentUserModel = new UserModel();

        StateHasChanged();

    }

}

[Chris Marshall]

I found a way to do this, I added a @ref to the SfListBox control and used the following code

ListBoxObj.SelectItems(FullItemList, false);

[Gayathri KarunaiAnandam]

Hi Chris, 

We have checked your reported query. We can get the SelectItems in listbox by using value property. We can select/unselect the list item by using the SelectItems method. Please check the below code snippet. 

 

<SfListBox TValue="string[]" TItem="VehicleData" DataSource="@Vehicles" @ref="ListBoxObj"> 

    <ListBoxSelectionSettings ShowSelectAll="true" ShowCheckbox="true"></ListBoxSelectionSettings> 

     

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

</SfListBox> 

 

<SfButton OnClick="onclick"> Clear </SfButton> 

 

@code { 

    SfListBox<string[], VehicleData> ListBoxObj; 

    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" } 

    }; 

 

    public class VehicleData 

    { 

        public string Text { get; set; } 

        public string Id { get; set; } 

    } 

 

    public void onclick() 

    { 

        

        ListBoxObj.SelectItems(ListBoxObj.Value, false); 

 

    } 

 

} 

For your reference, we have prepared a sample based on this scenario. Please check the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/164792/ze/BlazorApp160841675 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K