How would you customize a datagrid column based on context value?

Radzen.Blazor Components
1

Hi there,

I just picked up Radzen Blazor and I've ran into a problem..

Using the RadzenDataGrid component, I want to style the first column based on current object data, if the object is active or archived.

I've tried the following without luck..

<RadzenDataGrid Data="_customers">
    <Columns>
        <RadzenDataGridColumn TItem="Customer" Property="Name">
            <Template style="@(context.Archived ? "td-archived" : "td-active")">
                @context.Name
            </Template>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

<RadzenDataGrid Data="_customers" Context="context">
    <Columns>
        <RadzenDataGridColumn TItem="Customer" Property="Name" title="Name" style="@(context.Archived ? "td-archived" : "td-active")" />
    </Columns>
</RadzenDataGrid>

Any suggestions?

2

Hi @MrPrez,

The only valid attribute of all Template properties is Context.

You can style the datagrid content like this:

<RadzenDataGridColumn TItem="Customer" Property="Name">
     <Template >
          <span class="@(context.Archived ? "td-archived" : "td-active")">@context.Name</span>
     </Template>
</RadzenDataGridColumn>

You can also use the RowRender event.

Here are some demos for you to check:

Templates and RowRender: Blazor DataGrid conditional template
Templates: Blazor DataGrid custom appearance via column templates

1 Like
3

Hi @korchev,

Thank you for your quick and detailed response :smiling_face_with_three_hearts:

The RowRender option was exactly what I was looking for as I wanted to style the first <td> element in each row.

Best regards,
Prez

PS. This was my first time here and my first post, do I mark it as solved or anything like that?

1 Like
4

Hi.
I need to add a delete icon before the text for both RadzenDropDown and RadzenDropDownDataGrid (both for the items in the list and for the selected value).
For RadzenDropDown I use

RadzenDropDown>
Template Context="data">
...
Template>
ValueTemplate Context="data">
...
ValueTemplate>
RadzenDropDown>
and it works perfectly.

For RadzenDropDownDataGrid I only have the Template for RadzenDataGridColumn and it works. How can I also add a delete icon before text for the selected value in RadzenDropDownDataGrid?

Thanks

5

In DropDownDataGrid there is a ValueTemplate as well:

6

Hi
Indeed...it's my omission.
It works perfectly.

Thanks