# Tree template as row table

**URL:** <https://forum.radzen.com/t/tree-template-as-row-table/11488>\
**Category:** Radzen.Blazor Components\
**Created:** [August 8, 2022, 3:11pm UTC](https://forum.radzen.com/t/tree-template-as-row-table/11488 "2022-08-08T15:11:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![SandroRiz](https://forum.radzen.com/user_avatar/forum.radzen.com/sandroriz/32/10073_2.png) [@SandroRiz](https://forum.radzen.com/u/SandroRiz)\
**Post date:** [August 8, 2022, 3:11pm UTC](https://forum.radzen.com/t/tree-template-as-row-table/11488/1 "2022-08-08T15:11:45Z")

</div>

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

```auto
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](https://forum.radzen.com/uploads/default/original/2X/2/26cfabecc5ae90cff40fd1f6481963b09ac08198.jpeg)

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [August 8, 2022, 3:49pm UTC](https://forum.radzen.com/t/tree-template-as-row-table/11488/2 "2022-08-08T15:49:00Z")

</div>

Hi @SandroRiz,

We don’t have such example.

---

<div class="post-metadata">

**Author:** ![SandroRiz](https://forum.radzen.com/user_avatar/forum.radzen.com/sandroriz/32/10073_2.png) [@SandroRiz](https://forum.radzen.com/u/SandroRiz)\
**Post date:** [August 9, 2022, 1:20pm UTC](https://forum.radzen.com/t/tree-template-as-row-table/11488/3 "2022-08-09T13:20:20Z")

</div>

if someone need this trick too...

```auto
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)

```auto
.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;
}

```