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

Syncfusion Blazor Grid not loading correctly


Im trying to create a project using Syncfusion.Blazror.Grid NuGet package ( I have created a simple table that should be displayed in gridcolumns. 

@page "/"

@using TheContactList.Shared

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Contacts">


        <GridColumn Field=@nameof(Contact.ContactId) HeaderText="ID"></GridColumn>

        <GridColumn Field=@nameof(Contact.FirstName) HeaderText="Imię"></GridColumn>

        <GridColumn Field=@nameof(Contact.LastName) HeaderText="Nazwisko"></GridColumn>

        <GridColumn Field=@nameof(Contact.Email) HeaderText="Email"></GridColumn>




    public List<Contact> Contacts { get; set; }

    protected override void OnInitialized()


        Contacts = LoadData();


    private List<Contact> LoadData()


        //Dodaje paru pracowników w ramach testu

        Contact c1 = new Contact


                ContactId = 1,

                FirstName = "Anna",

                LastName = "Nowak",

                Email = "anowak@gmail.com",

                Password = "sfsfgg",

                DateOfBirth = new DateTime(2003, 07, 10),

                CategoryType = 1, 

                PhotoPath = "images/anna.png",

                PhoneNumber = 546645123


        Contact c2 = new Contact


                ContactId = 2,

                FirstName = "Adrian",

                LastName = "Rutkowski",

                Email = "aRutkowski@gmail.com",


                DateOfBirth = new DateTime(2001, 10, 18),

                CategoryType = 2,

                PhotoPath = "images/adi.png",

                PhoneNumber = 32245671


        Contact c3 = new Contact


                ContactId = 3,

                FirstName = "Mikołaj",

                LastName = "Cegła",

                Email = "mCegla@gmail.com",

                DateOfBirth = new DateTime(2003, 07, 10),

                CategoryType = 1,

                PhotoPath = "images/mickey.png",

                PhoneNumber = 566788111


        return new List<Contact> { c1, c2, c3 };



However when i fire up the project it displays like this:

As you can see the GridColumn has failed to load. I already tried installing the full Sf Blazor package and added

<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" /> to wwwroot/index.html. What else can i do to solve this problem?

1 Reply

PS Prathap Senthil Syncfusion Team October 14, 2022 10:30 AM

Hi Szymon,

Greetings from Syncfusion support.

Based on your update, we assume that the theme and scripts are not referred properly that's why you are facing an error. So, kindly refer the attached code snippet and UG documentation for your reference. Before that Kindly make ensure to include script and themes in your project.


    <meta charset="utf-8" />

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


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

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

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

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

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

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


If you are referencing themes or scripts from CDN, can you please ensure to change the version of reference.




Prathap S

Attachment: BlazorApp2_4fb0efa5.zip

Live Chat Icon For mobile
Up arrow icon