1. Home
  2. Forum
  3. Blazor
  4. Grid creates some odd text when rendered

Grid creates some odd text when rendered

I get a strange line of text from a Grid component.  It is "sfgridk)oucjwfreo_hearder_table" and appears just below the header as shown in the following image:


What is causing this line of text?

The codes for this grid is:

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@Indicators" AllowPaging="true">
                <GridPageSettings PageSize="10"></GridPageSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(TableData.Date) HeaderText="Date" IsPrimaryKey="true" Width="150" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" TextAlign="TextAlign.Center"></GridColumn>
                    <GridColumn Field=@nameof(TableData.Close) Format="N2" HeaderText="Close" Width="100" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" TextAlign="TextAlign.Center"></GridColumn>
                    <GridColumn Field=@nameof(TableData.SMA) Format="N2" HeaderText="SMA" Width="100" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" TextAlign="TextAlign.Center"></GridColumn>
                    <GridColumn Field=@nameof(TableData.EMA) Format="N2" HeaderText="EMA" Width="100" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" TextAlign="TextAlign.Center"></GridColumn>
                    <GridColumn Field=@nameof(TableData.RSI) Format="N0" HeaderText="RSI" Width="75" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" TextAlign="TextAlign.Center"></GridColumn>
                    <GridColumn Field=@nameof(TableData.MACD) Format="N1" HeaderText="MACD" Width="75" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" TextAlign="TextAlign.Center"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>
<style>
    .e-attr{
        border: 1px;
        border-color: black;
        border: solid;
    }
</style>
@code{
    [Parameter]
    public List<TableData>? Indicators { get; set; }
}

I have the following usings in _imports.razor:

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Charts.Chart.Internal
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data

1 Reply
PS Prathap Senthil Syncfusion Team August 2, 2024 11:54 AM UTC

Hi Dennis Imbro,

Based on the reported issue, it appears that the problem stems from improper definition of theme and script references in the App.Razor or _Host.cshtml file. We would like to suggest that you refer to the following script in your App.razor or_ Host.cshtml  file in order to resolve the issue. We have attached a code snippet and sample for your reference, which should provide you with clear guidance on how to implement this solution. Kindly refer to the attached code snippet and sample for your reference.


<head>

   

 

   @* Need to import Syncfusion.Blazor.Themes while using the below style*@

 

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.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/26.1.40/styles/bootstrap5.css rel="stylesheet" />

 

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

 

 

</head>

 



  1. CDN
 
Scripts- https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference
Styles - https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference

 
  1. 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/


Or If you are using Syncfusion.Blazor single NuGet. If this is the case, we recommend referring to the attached code snippet and our documentation for further assistance.
Note:If you are  Syncfusion.Blazor single NuGet you don’t need to install the Syncfusion.Blazor.Themes  Nuegt.

<html lang="en">

 

<head>

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

 

    <!--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" />

 

 

</head>

 

<body>

------------


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

 

    <!--Use below script reference if you are using Syncfusion.Blazor Single NuGet-->

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

</body>

 

</html>


Documentation: https://blazor.syncfusion.com/documentation/datagrid/getting-started


Regards,
Prathap Senthil


Attachment: BlazorApp1_48dde96d.zip

Loader.
Up arrow icon