MrPrez
March 16, 2023, 5:03pm
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?
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
MrPrez
March 16, 2023, 7:16pm
3
Hi @korchev ,
Thank you for your quick and detailed response
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
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
In DropDownDataGrid there is a ValueTemplate as well:
{
<div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" @onfocus="@((args) => OnFocus(args))"
style="@Style" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" id="@GetId()" @onclick="@(args => OpenPopup("ArrowDown", false, true))" @onclick:preventDefault @onclick:stopPropagation
@onkeydown="@((args) => OnKeyPress(args))" @onkeydown:preventDefault="@preventKeydown">
<div class="rz-helper-hidden-accessible">
<input tabindex="-1" disabled="@Disabled" style="width:100%" aria-haspopup="listbox" readonly="" type="text" id="@Name"
name="@Name" aria-label="@(!Multiple && internalValue != null ? PropertyAccess.GetItemOrValueFromProperty(internalValue, TextProperty) : EmptyAriaLabel)" @attributes="InputAttributes" />
</div>
@if (ValueTemplate != null && selectedItem != null)
{
<span class="rz-dropdown-label rz-inputtext" style="width:100%;" @onkeydown:stopPropagation>
@ValueTemplate(selectedItem)
</span>
}
else if (Template != null && selectedItem != null)
{
<span class="rz-dropdown-label rz-inputtext" style="width:100%;" @onkeydown:stopPropagation>
@Template(selectedItem)
</span>
Hi
Indeed...it's my omission.
It works perfectly.
Thanks