Cannot get the SfDropDownList to drop-do

[Mark]

Hi All

I must be doing something really stupid here, I tried to use the Dropdown List control in a Blazor EditForm with no luck at all (I also tried the SfComboxBox and had exactly the same issue).

I duplicated the simple getting started example from the docs in the Home.razor page to try and simplify but it still doesn't work. Can someone please tell me what I am doing wrong here, whatever I try the list does NOT drop-down.

@page "/"

@rendermode InteractiveServer


<PageTitle>Home</PageTitle>


<h1>Hello, world!</h1>


<br />


<SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="SelectedGame">
    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>


@code {
    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }


    string? SelectedGame = "Game1";


    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
  };
}

[Kokila Poovendran]

Hi Mark,

 We have carefully reviewed your query. After replicating your code snippet, we were unable to encounter the issue you described.

For your reference, we have created a video illustration demonstrating the correct behavior, which you can view below. It seems to be working as expected in our environment.

Additionally, we suspect that script reference discrepancies might be causing the issue. Please ensure that you are referencing the correct script based on your package setup. When using an individual package, use:

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

However, with the common NuGet, it is sufficient to use:

    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Please make this adjustment in your application and check if it resolves the problem. You can find more details in the documentation: https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app#add-stylesheet-and-script-resources

If the issue persists or if you have any further questions, feel free to reach out with a runnable sample, and we'll be happy to provide you with a prompt solution.

Attachment: BlazorServerProject_f929f337.zip