How to add GridColumn definitions to SfGrid[T] using RenderTreeBuilder

[Cristobal]

Hello,

I am using RenderTreeBuilder to programmatically generate some Blazor components. When rendering a SfGrid<T>, I can bind the DataSource successfully and see rows appear — but only if I don’t define any columns manually.

When I add GridColumn components via ChildContent, there is an infinite loop generated; if I add the columns as a parameter "Columns", the columns show up in the header, but no data appears in the grid.

Example structure:

builder.OpenComponent(typeof(SfGrid<>).MakeGenericType(tItem), seq++);
builder.AddAttribute(seq++, "DataSource", myData);

builder.AddAttribute(seq++, "ChildContent", (RenderFragment)(gridBuilder =>
{
    gridBuilder.OpenComponent(typeof(GridColumns), seq++);
    foreach (var col in myColumnDefs)
    {
        gridBuilder.OpenComponent(typeof(GridColumn), seq++);
        gridBuilder.AddAttribute(seq++, "Field", col.Field); // e.g., "Name"
        gridBuilder.AddAttribute(seq++, "HeaderText", col.HeaderText);
        gridBuilder.AddAttribute(seq++, "AutoFit", true);
        gridBuilder.CloseComponent();
    }
    gridBuilder.CloseComponent(); // GridColumns
}));
builder.CloseComponent(); // SfGrid

Questions:

• Is this the correct way to define GridColumn components via RenderTreeBuilder?

• Are there any required attributes or steps to ensure proper data binding?

Thanks in advance,
Cristobal.

[Jawad ul Hassan]

You're close! The issue is likely caused by wrapping GridColumn components inside a GridColumns component — that's not needed and can cause problems. Instead, add GridColumn components directly inside the ChildContent:

csharp
CopyEdit
builder.OpenComponent(seq++, typeof(SfGrid<>).MakeGenericType(tItem));
builder.AddAttribute(seq++, "DataSource", myData);
builder.AddAttribute(seq++, "ChildContent", (RenderFragment)(gridBuilder =>
{
    foreach (var col in myColumnDefs)
    {
        gridBuilder.OpenComponent(seq++, typeof(GridColumn));
        gridBuilder.AddAttribute(seq++, "Field", col.Field);
        gridBuilder.AddAttribute(seq++, "HeaderText", col.HeaderText);
        gridBuilder.AddAttribute(seq++, "AutoFit", true);
        gridBuilder.CloseComponent();
    }
}));
builder.CloseComponent();

Make sure col.Field matches your data model property names exactly. That should fix the issue!

[Prathap Senthil]

Hi Cristobal,

Based on your query, we have prepared a sample using RenderTreeBuilder to create the Grid component. Please refer to the attached sample to create the Grid component on your side. Thank you.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicGrid

Regards,
Prathap Senthil

[Cristobal]

Thank you both.

I now have a basis to work from. If I encounter any other issues, I'll make sure to let you know.

Regards,

Cristobal.

[Prathap Senthil]

Thanks for the update. We are happy to hear that the provided information was helpful.

Please feel free to get back to us if you have any further queries.