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

showing list outside component

I having problem with Dropdown list to show itens.

I created a demo to test e show the issue . The list itens are showing outside component.

The code of Blazor Page :

@page "/counter"

@using System.Text.Json

@using System.Text.Json.Serialization

@inject IHttpClientFactory ClientFactory



<h1>Machine List</h1>

<span class="container-fluid">

    <SfDropDownList id="1" TValue="string" TItem="variaveis" Width="300px" PopupHeight="500px" Placeholder="Selecione uma Máquina" CssClass="e-custom" DataSource="@list_machines">

        <DropDownListFieldSettings Value="serial" Text="machine_name"></DropDownListFieldSettings>



@code {

private IEnumerable? variaveisJson = Array.Empty();

private IEnumerable? list_machines = Array.Empty();

private IEnumerable? stopped = Array.Empty();

protected override async Task OnInitializedAsync()


var request = new HttpRequestMessage(HttpMethod.Get, "https://web.cncmonitor.com.br/api/v1/XXXXX/XXXXX/summary?start_time=2023-02-27T05:00:00Z&end_time=2023-02-27T23:30:00Z&tagid=99&changedonly");

var request_machine = new HttpRequestMessage(HttpMethod.Get, "https://web.cncmonitor.com.br/api/v1/VH41X62QGCI7MBX/Z8QQFGZS5OBF6XE/info");

var client = ClientFactory.CreateClient();

var response = await client.SendAsync(request);

var response_machine = await client.SendAsync(request_machine);

if (response.IsSuccessStatusCode)


using var responseStreamMachine = await response_machine.Content.ReadAsStreamAsync();

list_machines = await JsonSerializer.DeserializeAsync>(responseStreamMachine);


if (response.IsSuccessStatusCode)


using var responseStream = await response.Content.ReadAsStreamAsync();

variaveisJson = await JsonSerializer.DeserializeAsync>(responseStream);

stopped = from a in variaveisJson where a.old_value == "STOP" select a;



public class variaveis


public string? serial { get; set; }

public string? machine_name { get; set; }

public string? sector { get; set; }

public string? area { get; set; }

public string? manufacturer { get; set; }

public string? line { get; set; }

public string? model { get; set; }

public bool changed { get; set; }

public string? command { get; set; }

public string? tag_id { get; set; }

public string? tagid { get; set; }

public DateTime timestamp { get; set; }

public string? tag { get; set; }

public string? value { get; set; }

public string? old_value { get; set; }

public int value_elapsed_time { get; set; }

public int old_value_elapsed_time { get; set; }

// #### variaveis de tempo

public double today { get; set; }

public double yesterday { get; set; }

public double last24hours { get; set; }

public double past24hours { get; set; } // //ultimas 48hs

public double last7days { get; set; }

public double past7days { get; set; } // ultimos 14 dias

public string? Total_Turno_Grafh { get; set; }

public string? Nome_Turno_Grafh { get; set; }

public string? Total_Diario_Grafh { get; set; }

public string? Color { get; set; }

public DateTime DataHoje { get; set; }



2 Replies

SP Sureshkumar P Syncfusion Team March 8, 2023 10:48 AM UTC

Hi José,

We have validated your shared information and in our Volume 1- 2022. Release onwards we need to refer the script and themes filed manually in the application. So, we suggest you refer the theme and script files in the Pages/_Layout.cshtml file to load the component correctly into your application.

To know more about script reference. Please refer to the documentation: https://blazor.syncfusion.com/documentation/common/adding-script-references

To know more about the breaking changed on the Volume-1 release. Please refer to the release notes here: https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changes

Find the sample in the attachment with latest changes.


Sureshkumar P

JC José Carlos replied to Sureshkumar P March 8, 2023 11:39 AM UTC

Tks Sureshkumar , you solved my problem .

Live Chat Icon For mobile
Up arrow icon