1. Home
  2. Forum
  3. Blazor
  4. Combobox Not Displaying Items

Combobox Not Displaying Items

I am trying to run a simple Combobox using code from the Blazor Documentation. The control is showing, but when I click on the box no data is shown. I'm using Blazor Web App with InteractiveServer Rendering. The javascript link has been added as well as the css link. Here's the code:

Edit: After inspecting the page, the data is in the combobox, but it acts as if it is disabled. 


@page "/"
<PageTitle>Home</PageTitle>


<h1>Hello, world!</h1>
<br />
<br />

<SfComboBox TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
<ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings>
</SfComboBox>

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


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




}

3 Replies
YS Yohapuja Selvakumaran Syncfusion Team March 11, 2025 10:04 AM UTC

Hi Jeffrey,


Thank you for reaching out to us. We have thoroughly investigated the reported issue and attempted to replicate it on our end. However, we were unable to reproduce the problem, as the items are displayed properly when opening the popup.



 

In .NET 8, it's important to apply the 'rendermode' to the project. In case of missing this, it might cause issues related to script functionalities.

 

To implement the render mode across your entire application, consider adding the 'rendermode' attribute within the Route tag in the App.razor file, placed inside the body tag. We have created a simple sample in .net8, kindly check it out in the attachment. Here's an example snippet.

 

[App.razor]


<body>

    <Routes @rendermode="RenderMode.InteractiveServer" />

    <script src="_framework/blazor.web.js"></script>

</body>

 Additionally, if you need to apply it for individual razor page, you can use like below,


[Home.razor]


@rendermode InteractiveServer

For more detailed insights, please visit the following blog and documentation.

 

Blog: https://www.syncfusion.com/blogs/post/blazor-ui-support-dotnet-8.aspx

Documentation: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0

 

Please ensure these adjustments are included in your project. If the issue persists, kindly share a runnable sample with us. This will help us validate the problem you're facing and offer more precise solutions. Thank you for your patience and cooperation.

 

 

 

Regards,

Yohapuja S


Attachment: Combobox_listitem_726cf8eb.zip

LL Lorde Laura June 4, 2025 03:54 AM UTC

  • Inspect the DOM: Use browser DevTools to check if the dropdown <ul> or <div> is present but hidden. Look for styles like display: none or visibility: hidden.
  • Check Console Errors: Look for JavaScript or resource-loading errors in the browser Console tab.
  • Test with Minimal Setup: Create a new Blazor Web App Geometry Dash project, install the Syncfusion.Blazor.DropDowns package, and test the ComboBox with the minimal code above to isolate the issue.
  • Syncfusion Version: Ensure all Syncfusion packages and resources are from the same version (e.g., check Syncfusion.Blazor.Core and Syncfusion.Blazor.DropDowns versions in your .csproj).

    • YA YuvanShankar Arunagiri Syncfusion Team June 4, 2025 11:56 AM UTC

    Hi Lorde,


    We have prepared a sample based on the details you shared in your response. We created a .NET 9 Blazor Web App using Interactive Server mode and included the necessary individual packages such as Syncfusion.Blazor.DropDowns and Syncfusion.Blazor.Core. The required style and script files were referenced properly.

    With the minimal ComboBox component implementation, the interaction is working as expected on our end. Please refer to the attached sample and the video demonstration for reference.


    Style referring UG link: https://blazor.syncfusion.com/documentation/appearance/themes

    Script referring UG link: https://blazor.syncfusion.com/documentation/common/adding-script-references#individual-control-script-reference




    Note: To open the combo box popup, either click on the dropdown icon or type in the combo box input field.


    Kindly get back to us if you need any further assistance on this.


    Regards,

    YuvanShankar A


    Attachment: BlazorAppnet9_20d0ffaf.zip

    Loader.
    Up arrow icon