We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Selection Mode Single still selects multiple

I am using a SfListbox control in my Blazor page, with SelectionMode.Single.  However, when there are more than 1 item in the Listbox, and I click a second item, the first does not deselect, and when I get to the ValueChange event, there is an array of selected items.  I need to have only 1 item selected, and find out in the code which one that is.


What am I doing wrong?

<SfListBox CssClass="e-template-listbox" Value="@SelectedRulesetKey" TValue="string" DataSource="@Rulesets" TItem="RuleSetModel">

<ListBoxFieldSettings Text="RulesetKey"></ListBoxFieldSettings>
<ListBoxSelectionSettings Mode="Syncfusion.Blazor.DropDowns.SelectionMode.Single"></ListBoxSelectionSettings>
<ListBoxEvents TValue="string" TItem="RuleSetModel"
ValueChange="RulesetSelectedAsync"></ListBoxEvents>
<ListBoxTemplates TItem="RuleSetModel">
<ItemTemplate>
<div class=".rset-list-wrapper">
<span class="text">
@if ((context as RuleSetModel).State == "Production")
{
<span>⚙️</span>
}
else
{
<span>🧪</span>
}
</span>
<span class="description">
@((context as RuleSetModel).MajorVersion)
.
@((context as RuleSetModel).MinorVersion)
</span>
<span class="description">
@((context as RuleSetModel).LastModifiedTime.ToShortDateString())
</span>
</div>
</ItemTemplate>
</ListBoxTemplates>
</SfListBox>

3 Replies

YA YuvanShankar Arunagiri Syncfusion Team March 21, 2023 07:40 AM UTC

Hi Coda,


We have attempted to reproduce the issue in our end, but were unable to do so. We have prepared a sample to show how List Box selection works correctly on our end. Could you please share the issue replicable sample or replicate issue in our sample, List box Syncfusion packages version and video demonstration of issue replicable. Based on that we will check and provide you a better solution quickly.


Regards,

YuvanShankar A


Attachment: ContextMenuSample_76eba44.zip


CE Coda Error Analysis March 21, 2023 07:27 PM UTC

I would hate to past the page where we are having the problem, because it is over 1500 lines and has a bunch of SF controls, and requires an API server back end to get data...

But that complexity aside, I also took the basic demo code and am trying to work up to the features we are using, but ran into a page crash when I added an ValueChange event, it crashes.


Code:


@page "/CodaEA/TestPage"


@using Syncfusion.Blazor.DropDowns


<div class="col-lg-12 control-section">
    <div id="listbox-control">
        <h4>Select your favorite car:</h4>
        <SfListBox Value=@value DataSource="@vehicleData" TValue="string[]" TItem="ListItem">
            <ListBoxFieldSettings Text="Text" Value="Id"></ListBoxFieldSettings>
            <ListBoxSelectionSettings Mode="Syncfusion.Blazor.DropDowns.SelectionMode.Single"></ListBoxSelectionSettings>
            <ListBoxEvents TValue="string" TItem="ListItem"
                ValueChange="ValueChangedAsync"></ListBoxEvents>
        </SfListBox>
    </div>
</div>
@code
{
    private string[] value = new string[] { "List-01" };
    private List<ListItem> vehicleData = new List<ListItem>
    {
        new ListItem { Text = "Hennessey Venom", Id = "List-01" },
        new ListItem { Text = "Bugatti Chiron", Id = "List-02" },
        new ListItem { Text = "Bugatti Veyron Super Sport", Id = "List-03" },
        new ListItem { Text = "SSC Ultimate Aero", Id = "List-04" },
        new ListItem { Text = "Koenigsegg CCR", Id = "List-05" },
        new ListItem { Text = "McLaren F1", Id = "List-06" },
        new ListItem { Text = "Aston Martin One-77", Id = "List-07" },
        new ListItem { Text = "Jaguar XJ220", Id = "List-08" },
        new ListItem { Text = "McLaren P1", Id = "List-09" },
        new ListItem { Text = "Ferrari LaFerrari", Id = "List-10" }
    };
    public class ListItem
    {
        public string Text { get; set; } = String.Empty;
        public string Id { get; set; } = String.Empty;
    }


    private async Task ValueChangedAsync(ListBoxChangeEventArgs<string, ListItem> args)
    {
        await Task.Delay(1);
    }
}
<style>
    #listbox-control {
        width: 350px;
        margin: auto;
    }


    @@media screen and (max-width: 590px) {
        #listbox-control {
            width: 100%;
        }
    }
</style>


Crash:


Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Object reference not set to an instance of an object.



System.NullReferenceException: Object reference not set to an instance of an object.
   at Syncfusion.Blazor.DropDowns.ListBoxEvents`2.OnInitializedAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'b8-Ia-qL7g7Vticm8UfeLEF6Quag0ppIxlAlcWJx68A'.


System.NullReferenceException: Object reference not set to an instance of an object.
   at Syncfusion.Blazor.DropDowns.ListBoxEvents`2.OnInitializedAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()


YA YuvanShankar Arunagiri Syncfusion Team March 22, 2023 09:56 AM UTC

Coda,


We have checked your provided code snippet and found an issue in TValue property of Listbox component. Please refer to the below code snippet and attached sample code file.


<SfListBox Value=@value DataSource="@vehicleData" TValue="string[]" TItem="ListItem">

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

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

            <ListBoxEvents TValue="string[]" TItem="ListItem" ValueChange="ValueChangedAsync"></ListBoxEvents>

        </SfListBox>

…….

private async Task ValueChangedAsync(ListBoxChangeEventArgs<string[], ListItem> args)

    {

        await Task.Delay(1);

    }


And we don’t want the entire sample of your project; just share the below details.


  1. Video demonstration of issue replication
  2. Syncfusion package version you are using.
  3. Issue replicable sample with list box codes alone.


Based on that, we will check and provide you with a better solution quickly.


Attachment: Index_265343b7.zip

Loader.
Up arrow icon