# Insert Progress bar in Grid

**URL:** <https://forum.radzen.com/t/insert-progress-bar-in-grid/13187>\
**Category:** Blazor Server\
**Created:** [February 17, 2023, 6:40pm UTC](https://forum.radzen.com/t/insert-progress-bar-in-grid/13187 "2023-02-17T18:40:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chanhhoathom](https://forum.radzen.com/user_avatar/forum.radzen.com/chanhhoathom/32/13461_2.png) [@Chanhhoathom](https://forum.radzen.com/u/Chanhhoathom)\
**Post date:** [February 17, 2023, 6:40pm UTC](https://forum.radzen.com/t/insert-progress-bar-in-grid/13187/1 "2023-02-17T18:40:13Z")

</div>

I have a blazor server razor page. That page iterates the list with a Radzen progress bar like this:

* * *

## \<Radzen.Blazor.RadzenProgressBar style="height:20px;width:400px;color:darkorchid " ProgressBarStyle=Radzen.ProgressBarStyle.Info Value="@LaterUsePercent" Unit="@item.BlocksCompleted"\>\</Radzen.Blazor.RadzenProgressBar\>

## But this just gives me red squiggles when I try to insert into the radzen grid... how should it be inserted ?

```
<RadzenDataGridColumn TItem="CurrentTest" Property="LaterUsePercent" Title="% Complete">
        <Radzen.Blazor.RadzenProgressBar style="height:20px;width:400px;color:darkorchid " ProgressBarStyle=Radzen.ProgressBarStyle.Info Value="@LaterUsePercent" Unit="@item.BlocksCompleted"></Radzen.Blazor.RadzenProgressBar>
    </RadzenDataGridColumn>

```

* * *

Thanks !

---

<div class="post-metadata">

**Author:** ![korchev](https://forum.radzen.com/user_avatar/forum.radzen.com/korchev/32/4_2.png) [@korchev](https://forum.radzen.com/u/korchev)\
**Post date:** [February 17, 2023, 6:45pm UTC](https://forum.radzen.com/t/insert-progress-bar-in-grid/13187/2 "2023-02-17T18:45:21Z")

</div>

You need to use the Template property of RadzenDataGridColumn. Check this demo: [https://blazor.radzen.com/datagrid-column-template](https://blazor.radzen.com/datagrid-column-template)

---

<div class="post-metadata">

**Author:** ![Chanhhoathom](https://forum.radzen.com/user_avatar/forum.radzen.com/chanhhoathom/32/13461_2.png) [@Chanhhoathom](https://forum.radzen.com/u/Chanhhoathom)\
**Post date:** [February 18, 2023, 11:12pm UTC](https://forum.radzen.com/t/insert-progress-bar-in-grid/13187/3 "2023-02-18T23:12:44Z")

</div>

## Thank you - I was unclear of how data and order was used but decided it must act like a placeholder for the list. Im very pleased with the output

```
    <RadzenDataGridColumn TItem="CurrentTest" Title="% Complete" Width="420px">
        <Template Context="data">
            <Radzen.Blazor.RadzenProgressBar style="height:20px;width:400px;color:darkorchid " ProgressBarStyle=Radzen.ProgressBarStyle.Info Value="@data.LaterUsePercent" Unit="@data.BlocksCompleted"></Radzen.Blazor.RadzenProgressBar>
        </Template>

    </RadzenDataGridColumn>

```

* * *

Thanks -its a world to learn !