BuildRenderTree() : How to insert value in FluentDataGridCell

[Pascall60]

Hi everyone
I have a problem with FluentDataGridCell.
I can't insert the values ​​into the content?!
If anyone has an idea, it would be a great help to me.
I use FluentDataGrid, FluentDataGridRow and FluentDataGridCell in
BuildRenderTree().
I can correctly generate the header and the column names.
But I can't and can't find how to insert the values ​​into a FluentDataGridCell correctly?!
Here is the rows / columns / values ​​part:

` private void BuildDataRows(RenderTreeBuilder builder)
{
int idx = 0;
foreach (var line in lines)
{
var values = line.Split(',');

        builder.OpenComponent<FluentDataGridRow<string>>(idx++);

        // Create a `RenderFragment` for the data lines
        RenderFragment rowContent = builder2 =>
        {
            for (int i = 0; i < values.Length; i++)
            {
                builder2.OpenComponent<FluentDataGridCell<string>>(idx++);
                builder2.AddAttribute(idx++, "GridColumn", i + 1);

//
// This part generates an exception at runtime.
//
builder2.AddAttribute(idx++, "ChildContent", (RenderFragment)(builder3 =>
{
builder3.AddContent(idx++, values[i]);
}));

//
// And this part does nothing?
//
builder2.AddContent(idx++, values[i]);

                builder2.CloseComponent(); // <FluentDataGridCell>

            }
        };

        builder.AddAttribute(idx++, "ChildContent", rowContent);
        builder.CloseComponent(); // <FluentDataGridRow>
        //idxLine++;
    }
}

`

Thanks.
Kind regards,
Pascal

[rpodevns]

@Pascall60 This is not a FluentBlazor issue. It's a question about RenderTreeBuilder, which should be asked in the Blazor forums.

When working with the RenderTreeBuilder, structure your components the same way as you would with Razor components. When creating Razor components, PropertyColumns are added to the FluentDataGrid, not FluentDataGridRows and FluentDataGridCells.

Example:

<FluentDataGrid Items = "people" >
    <PropertyColumn Property = "@(p => p.Id)" Title = "ID" Sortable = "true" />
    <PropertyColumn Property = "@(p => p.Name)" Title = "Name" Sortable = "false" />
</FluentDataGrid >

@code {
    private readonly IQueryable<Person> people = new[]
    {
        new Person(1, "John Doe"),
        new Person(2, "Jane Smith")
    }.AsQueryable();

    public record Person(int Id, string Name);
}

To accomplish the same with RenderTreeBuilder, a minimal approach might be something like this.

public class GridWithRenderTreeBuilder<T> : ComponentBase
{
    [Parameter]
    public IEnumerable<T> Items { get; set; } = [];

    [Parameter]
    public List<(Expression<Func<T, object>> Property, string Title, bool Sortable)>? Columns { get; set; } = [];
    
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenComponent<FluentDataGrid<T>>(0);
        builder.AddAttribute(1, "Items", Items);

        builder.AddAttribute(2, "ChildContent", (RenderFragment)(gridBuilder =>
        {
            foreach (var (Property, Title, Sortable) in Columns)
            {
                gridBuilder.OpenComponent(0, typeof(PropertyColumn<T, object>));
                gridBuilder.AddAttribute(1, "Property", Property);
                gridBuilder.AddAttribute(2, "Title", Title);
                gridBuilder.AddAttribute(3, "Sortable", Sortable);
                gridBuilder.CloseComponent();
            }
        })); 
        builder.CloseComponent();
    }
}

IMPORTANT: Reset the index when starting a new RenderFragment as shown above to avoid rendering issues, potential errors, and unnecessary workload for the Blazor diffing algorithm. Please refer to the Advanced Scenarios link:

https://learn.microsoft.com/en-us/aspnet/core/blazor/advanced-scenarios?view=aspnetcore-9.0

And, use the sample GridWithRenderTreeBuilder like this:

<GridWithRenderTreeBuilder T="Person" Items="@people" Columns="@columns" />

@code {

    private readonly IQueryable<Person> people = new[]
    {
        new Person(1, "John Doe"),
        new Person(2, "Jane Smith"),
    }.AsQueryable();

    private List<(Expression<Func<Person, object>> Property, string Title, bool Sortable)> columns = new()
    {
        (p => p.Id, "ID", true),
        (p => p.Name, "Name", false),
    };
}

You'll need to decide how you want to pass your Columns and Data to the component.

IMPORTANT: This is not an official FluentBlazor example. The FluentBlazor library has not been tested for this use case, and future releases may introduce breaking changes.

Please refer to the Blazor documentation for additional guidance on using the RenderTreeBuilder.

[vnbaaij]

@rpodevns it is not entirely true you always have to work with PropertyColumn and TemplateColumn. See the manual example on the DataGrid page in the demo site.

@Pascall60 You could try to add the EmitCompilerGeneratedFiles MSBuild property to have the compiler write the temporary compilation files to disk. If you have a razor file with a DataGrid in it (as in a declarative way), you should be able to see the BuildRenderTree code the compiler generated.

Oh, and btw you are still using an incremental value for the individual lines. It is advised to not do that. See the link I posted in the previous discussion.

[Pascall60]

Hi Vincent, Hi Roland
I understand that part (or all) of my problems are related to Asp.Net Core / Blazor.

Thanks Vincent:
Regarding the use of an incremental value, I looked at the documentation, I will modify that as soon as my little two-line example works...
Thanks for the EmitCompilerGeneratedFiles property, I was looking for it and couldn't find it :)

Thanks Roland:
I will look at these examples and also return to the documentation(s) concerning the use of RenderTreeBuilder.
I looked for use cases and I realize that there are not many of us using RenderTreeBuilder().

Regards,
Pascal

PS: Should I close the discussion (and the previous one)?
Or is this automatic?

[vnbaaij]

No, please leave it open so it is available for others to find as well

[rpodevns]

Thanks @vnbaaij. I'm here to learn as well.

[Pascall60]

Thanks @vnbaaij : The EmitCompilerGeneratedFiles Property has been very helpful to me ;)
I found several solutions / answers to my problems, by looking at the generated code!

For now I am very late for the presentation of my mockup and we are starting soon for a new adventure.
I will come back to post examples of my dynamic components.

Thanks again @vnbaaij @rpodevns for the help I found here, even if my questions went beyond the scope ;)