Tree template as row table

Radzen.Blazor Components
1

I try to use the Tree component as a TreeGrid

I built the template with TR and TD but you put the TreeItem in a LI and DIV so the html is not rendered correct.

Do you have an example how to achieve this kind of result ? I guess with other divs and css

RenderFragment<RadzenTreeItem> TreeTemplate = (context) => builder =>
    {
        builder.OpenElement(1, "tr");

        builder.OpenElement(1, "td");
        builder.AddContent(2, (context.Value as GetItemBOMResult).ProductCode);
        builder.CloseElement();

        builder.OpenElement(1, "td");
        builder.AddContent(2, (context.Value as GetItemBOMResult).ProductDescription);
        builder.CloseElement();

        builder.OpenElement(1, "td");
        builder.AddContent(2, (context.Value as GetItemBOMResult).Umis);
        builder.CloseElement();

        builder.OpenElement(1, "td");
        builder.AddContent(2, (context.Value as GetItemBOMResult).Qty.ToString("N0"));
        builder.CloseElement();

        builder.CloseElement();
    };

diba
diba1537×627 116 KB

2

Hi @SandroRiz,

We don’t have such example.

3

if someone need this trick too...

RenderFragment<RadzenTreeItem> TreeTemplate = (context) => builder =>
    {
        builder.OpenElement(1, "div");
        builder.AddAttribute(2, "class", "table");

            builder.OpenElement(1, "div");
            builder.AddAttribute(2, "class", "tr");
    
                builder.OpenElement(1, "div");
                builder.AddAttribute(2, "class", "td-code");
                builder.AddContent(2, (context.Value as GetItemBOMResult).ProductCode);
                builder.CloseElement();

                builder.OpenElement(1, "div");
                builder.AddAttribute(2, "class", "td-descr");
                builder.AddContent(2, (context.Value as GetItemBOMResult).ProductDescription);
                builder.CloseElement();

                builder.OpenElement(1, "div");
                builder.AddAttribute(2, "class", "td-umis");
                builder.AddContent(2, (context.Value as GetItemBOMResult).Umis);
                builder.CloseElement();

                builder.OpenElement(1, "div");
                builder.AddAttribute(2, "class", "td-qty");
                builder.AddContent(2, (context.Value as GetItemBOMResult).Qty.ToString("N0"));
                builder.CloseElement();

            builder.CloseElement();
        builder.CloseElement();
    };

and some css (BTW you must put in the main css not in the "isolated" -same name as component- because it is not seen by the rendered engine)

.table {
    display: table;
    width: 650px;
    border-bottom: 1px dotted silver;
}

.tr {
    display: table-row;
}

.td-code {
    display: table-cell;
    width:150px;
}
.td-descr {
    display: table-cell;
    width: 400px;
}
.td-qty {
    display: table-cell;
    width: 50px;
    text-align:right;
}
.td-umis {
    display: table-cell;
    width: 50px;
}
1 Like