SfGrid control is returning no rows when adding custom columns

[Matt Taylor]

I've added the SfGrid control into my Blazor app and bound it to my datasource correctly. When running this with auto column generation, the columns display correctly based on the properties of the source object.

When defining the grid columns, the grid displays the "No records to display" message.

I've added a custom OnActionFailure method to catch any errors, but this doesn't get hit when the component is rendered.

I've referenced the documentation and the GridColumn looks correct, could somebody advise what I have missed please?

Model.cs:

public class Model
{
    public int ID { get; set; }
    public double Entry { get; set; }
    public DateTime RecordDate { get; set; }
    public DateTime AddDate { get; set; }
}

.razor file:

@using Syncfusion.Blazor.Grids


@if (Model== null)
{
    <p>Loading...</p>
}
else
{
    <SfGrid DataSource="@Models">
        <GridEvents TValue="Model" OnActionFailure="ActionFailureHandler" />
        <GridEditSettings AllowAdding="false" AllowDeleting="false" AllowEditing="false"></GridEditSettings>
        <GridColumn Field=@nameof(Model.ID) HeaderText="ID" Width="120"></GridColumn>
    </SfGrid>
}


.razor.cs file:

public partial class Grid
{
    List<Model>? Models { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Models = new List<Model>()
        {
            new Model() { ID = 1, Entry = 180.5, RecordDate = DateTime.Now.AddDays(-7), AddDate = DateTime.Now.AddDays(-7) },
            new Model() { ID = 2, Entry = 179.0, RecordDate = DateTime.Now.AddDays(-6), AddDate = DateTime.Now.AddDays(-6) },
            new Model() { ID = 3, Entry = 178.5, RecordDate = DateTime.Now.AddDays(-5), AddDate = DateTime.Now.AddDays(-5) }
        };
    }

    public void ActionFailureHandler(FailureEventArgs args)
    {
        string error = args.Error.Message;
    }
}

[Sanjay Kumar Suresh]

Hi Matt Taylor,

Thank you for sharing the code snippet.

Upon reviewing it, we would like to inform you that each GridColumn must be properly nested within the GridColumns directive. In the provided sample, once the GridColumn was placed correctly inside GridColumns, the grid rendered as expected.

Code Snippet:

@if (Models == null)

{

    <p>Loading...</p>

}

else

{

    <SfGrid DataSource="@Models">

        <GridEvents TValue="Model" OnActionFailure="ActionFailureHandler" />

        <GridColumns>

            <GridColumn Field=@nameof(Model.ID) HeaderText="ID" Width="120"></GridColumn>

        </GridColumns>

    </SfGrid>

}

Sample: https://blazorplayground.syncfusion.com/embed/VjhItYiChbvazHsX?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Please check the above sample for more information, feel free to get back to us if you have any concerns.

Regards,

Sanjay Kumar Suresh

[Matt Taylor]

Ah perfect, thank you for your help!

[Sanjay Kumar Suresh]

Hi Matt Taylor,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards,

Sanjay Kumar Suresh