1. Home
  2. Forum
  3. Blazor
  4. Anomolous Line in a Data Grid

Anomolous Line in a Data Grid

I am getting a strange line in a Grid.  After the headers the line is "sfgridh5r5femost%_header_table".  (See the attached file, which is a screen shot.)

The code producing this page is: 

@page "/IncomePage"
<h3>IncomePage</h3>
<h3>Enter Sources of Income</h3>
<SfGrid DataSource="@incomeSources" AllowSorting="true" Width="1200">
    <GridColumns>
        <GridColumn Field=@nameof(IncomeSource.Owner) HeaderText="Owner" TextAlign="TextAlign.Center" Width="125" IsPrimaryKey="true"></GridColumn>
        <GridColumn Field=@nameof(IncomeSource.SourceName) HeaderText="Source Name" TextAlign="TextAlign.Center" Width="125"></GridColumn>
        <GridColumn Field=@nameof(IncomeSource.MonthlyAmount) HeaderText="Monthly Amount" TextAlign="TextAlign.Center" Width="125"></GridColumn>
        <GridColumn Field=@nameof(IncomeSource.COLA_Method) HeaderText="COLA Method" TextAlign="TextAlign.Center" Width="125"></GridColumn>
    </GridColumns>
</SfGrid>
@code {
    List<IncomeSource> incomeSources = new List<IncomeSource>();
    protected override void OnInitialized()
    {
        incomeSources.Add(new IncomeSource { Owner = "John", SourceName = "Salary", MonthlyAmount = 5000, COLA_Method = "Fixed" });
        incomeSources.Add(new IncomeSource { Owner = "Jane", SourceName = "Pension", MonthlyAmount = 2000, COLA_Method = "Fixed" });
        incomeSources.Add(new IncomeSource { Owner = "John", SourceName = "Social Security", MonthlyAmount = 1500, COLA_Method = "Fixed" });
    }
    public class IncomeSource
    {
        public string Owner { get; set; }
        public string SourceName { get; set; }
        public decimal MonthlyAmount { get; set; }
        public string COLA_Method { get; set; }
    }
}

I have loaded the Syncfusion.Blazor.Grid NuGet package and have included the following using statements in _imports.razor.

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Navigations

Attachment: Screenshot_43aaae2f.zip

1 Reply
PS Prathap Senthil Syncfusion Team October 7, 2024 12:55 PM UTC

Hi Dennis,

Based on the reported issue, it appears that the problem seems from the improper definition of script references in the App. razor file . We would like to suggest that you refer to the following script in your App.razor file in order to resolve the issue. We have attached a code snippet and modified 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.


  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/


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.

App.Razor
<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="/" />

    <link rel="stylesheet" rel='nofollow' href="bootstrap/bootstrap.min.css" />

    <link rel="stylesheet" rel='nofollow' href="app.css" />

    <link rel="stylesheet" rel='nofollow' href="BlazorApp3.styles.css" />

    <link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />

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

    <HeadOutlet />

</head>

 

<body>

    <Routes />

 

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

    <!--<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: Getting Started with Blazor DataGrid Component | Syncfusion

Regards,
Prathap Senthil


Attachment: BlazorApp3_dd6840e3.zip

Loader.
Up arrow icon