Column ID displayed along with text _header_table

[Ken]

Just getting started and ran into this problem with testing. Following SF YouTube example.

Using sample code from "Fetchdata .

Results are as follows with column ID shown in browser..

sfgridq5zms0dxz3h_header_table

temp F	temp c	Date	Summary

80	27	5/20/2021	Hot
29	-2	5/21/2021	Warm
40	5	5/22/2021	Bracing
96	36	5/23/2021	Hot
0	-18	5/24/2021	Balmy

Here is what raw html output looks like

Code:

@page "/fetchdata"

@using demofordatagrid.Data

@inject WeatherForecastService ForecastService

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Spinner

Weather forecast

   

       

           

               

                   

                   

                   

                   

               

           

       

   

What am I doing wrong? Is this a CSS problem?

Using DotNet 5.0

Thank you.

[Rahul Narayanasamy]

Hi Ken, 

Greetings from Syncfusion. 

We have validated your query and we suspect that the CSS reference is not property referred in your application. Could you please refer the below styles in your application and ensure the reported problem at your end? 

If you are using Syncfusion.Blazor NuGet then refer the below styles. 

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> 

(Or) 

If you are using Syncfusion.Blazor.Grid (Individual NuGet reference) package then refer the below styles. 

<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" /> 

Reference: 

https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli/#installing-syncfusion-blazor-packages-in-the-application  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Dieter Buchmann]

I have the same Error.

I tried to use your solution but no chance to resolve the problem

I attached an image. Can somebody help me.

THANKS

This is my code

@using Syncfusion.Blazor.Grids

<h3>Lagerbestand Nur 100</h3>

@if (response.Success == false)

{

    <div class="alert alert-danger">

        <h4>@response.Message</h4>

    </div>

}

 @if (Artikels == null)

{

    <div class="alert alert-info">

        <h4>Lade Daten...</h4>

    </div>

}

else

{

    <a class="btn btn-primary" rel='nofollow' href="/nurLager100/export"><span class="oi oi-arrow-right" aria-hidden="true"></span>Exportieren</a>

    <br />

    <SfGrid ID="Grid" @ref="DefaultGrid" DataSource="Artikels" AllowPaging="true" AllowResizing="true" Height="1000px" AllowSorting="true" Toolbar="@(new List<string>() { "ExcelExport" })" AllowExcelExport="true" AllowFiltering="true">

        <GridPageSettings PageSizes="true" PageSize="38" ></GridPageSettings>

        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

        <GridColumns >

            <GridColumn Field=@nameof(LagerNur100ReadOnlyDto.Id) HeaderText="LfnNr." TextAlign="TextAlign.Left" Width="20" AllowFiltering=false></GridColumn>

            <GridColumn Field=@nameof(LagerNur100ReadOnlyDto.Bez) HeaderText="Bezeichnung" TextAlign="TextAlign.Right" Width="300"></GridColumn>

            <GridColumn Field=@nameof(LagerNur100ReadOnlyDto.Bez2) HeaderText="Bezeichnung 2" TextAlign="TextAlign.Center" Width="300"></GridColumn>

            <GridColumn Field=@nameof(LagerNur100ReadOnlyDto.Lb) HeaderText="Lagerbestand" TextAlign="TextAlign.Right" Width="100">

           

            </GridColumn>

            <GridColumn Field=@nameof(LagerNur100ReadOnlyDto.TeileGruppen) HeaderText="Teilegruppen" TextAlign="TextAlign.Right" Width="300"></GridColumn>

        </GridColumns>

    </SfGrid>

[Prathap Senthil]

Hi Dieter,

Based on the reported issue, it appears that the problem is due to incorrect theme references. If you refer to the proper style reference, it won't show the caption in the UI. We would like to inform you that if you are using the Syncfusion.Blazor single NuGet package. If this is the case, we recommend referring to the attached code snippet and our documentation for further assistance.

<head>

   

    <!--Refer theme style sheet as below if you are using Syncfusion.Blazor Single NuGet-->

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />

 

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

@*Or you can use the below CDN*@

 

@*

    <link rel='nofollow' href=https://cdn.syncfusion.com/blazor/24.2.3/styles/bootstrap5.css rel="stylesheet" />

 

    <script src=https://cdn.syncfusion.com/blazor/24.2.3/syncfusion-blazor.min.js type="text/javascript"></script>*@

 

 

</head>

 

CDN	Scripts- https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference Styles - https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference
Static Web Assets	Scripts - https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets   Styles - https://www.nuget.org/packages/Syncfusion.Blazor.Themes/

If still issue persists. So, further proceeding with the reported problem, kindly share the issue's reproducible simple sample. This will help us check the reported issue and provide a prompt update.

Regards,
Prathap S