ProgressBar in DataGrid

Hi

Is it possible to have a column show a ProgressBar from the column value (int 0->100)?
If yes, how can it be done?

Thanks

Here is an example:

@if (orderDetails == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <RadzenGrid AllowPaging="true" PageSize="4" AllowSorting="true" Data="@orderDetails" TItem="OrderDetail" ColumnWidth="200px">
        <Columns>
            <RadzenGridColumn TItem="OrderDetail" Property="OrderID" Title="Order ID" />
            <RadzenGridColumn TItem="OrderDetail" Property="OrderID" Title="Product ID" />
            <RadzenGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" Sortable="false" Filterable="false">
                <Template Context="data">
                    <RadzenProgressBar Value="@(data?.Discount * 100)" />
                </Template>
            </RadzenGridColumn>
        </Columns>
    </RadzenGrid>
}

@code {
    IEnumerable<OrderDetail> orderDetails;

    protected override async Task OnInitializedAsync()
    {
        orderDetails = await Task.FromResult(dbContext.OrderDetails);
    }
}

1 Like

Thanks!
BTW - Is this something that can also be done via the Radzen desktop app or only via Visual Studio?

It can be done both using Radzen or Visual Studio. You have template designer for every template including DataGrid columns Template:

Got it, thanks a lot!