Question about grid text alignment

Radzen.Blazor Components
1

For a column in a grid, is it possible to have different text alignment for the header of the col and the content of the col?

For instance in this example:

image
image306×593 14.5 KB

I might want to have the header centered while the content is left aligned.

I've noticed RadzenDataGridColumn.TextAlign lets me change the alignment of the col text but I'd like to have a different one for the header. For example it'd be great if there was a RadzenDataGridColumn.HeaderAlign

2

You can define custom content for the cel with desired alignment using column Template.

3

I want to be able to control the text alignment of the header of each column. Do you know if it's possible to do this? I see that it's possible to control the alignment of the contents of each column with the Template as you mentioned, however, the HeaderTemplate seems to be defined at the scope of the grid rather than the scope of the column so I'm not sure how I'd distinguish which column I'm at

Example of what I mean:


<RadzenGrid
  ...
>
  <HeaderTemplate>
    <RadzenLabel>Title</RadzenLabel> (here I do not have control over which column I'm at)
  </HeaderTemplate>
  <Columns>
    @foreach... (here I have control over the attributes of the column)
  </Columns>
4

Meant to reply to this message, ^

5

Possible approach will be to find the column using specific property:

grid.ColumnCollection.FirstOrDefault(c => c.Property == “MyProperty”);

6

The issue with the approach you propose is that in my domain there's no extrinsic way to determine a column outside of the column def itself (if that makes sense)

I ended up making this work for my use case in a different way. I'll leave it here in case anyone in the future has the same niche use case and comes across this thread:

Basically I found that for a column RadzenDataGridColumn.TextAlign applies to both the header and the contents. So I leave this property to settle align for both header and cells, then, on the CellRender event I override the cell textalign style using a (somewhat dirty) !important

TextAlign (sets textalign for both header and contents):

<RadzenDataGridColumn
                        TextAlign="@column.Value.HeaderTextAlign"

Part of the CellRender implementation (overrides cell content styles):

<RadzenGrid
                         CellRender="_OnCellRender"
/>

private void _OnCellRender(DataGridCellRenderEventArgs<IDictionary<string, object>> args){
...
        styleComponents.Add($"text-align: {textAlign} !important;");

        // Join all style components and add to attributes
        args.Attributes.Add("style", string.Join("", styleComponents));
}