Datagrid HeaderTemplate style

Radzen Studio Blazor Server
1

Hello!
Please help with Datagrid columnt header template.
Need to center content.
I'm trying like this:

<HeaderTemplate>
   <div class="row" style="margin: 0">
      <div class="col d-flex justify-content-center" style="padding: 0">
         <RadzenIcon Icon="add_circle_outline"
                     Style="color: limegreen; vertical-align: middle; display: inline-block; cursor: pointer; 
                      font-size: 1.5rem" data-toggle="tooltip" data-placement="right" title="Add Stock"
                     @onclick="@(() => AddWarehouse(stockView))" />
      </div>
   </div>
</HeaderTemplate>

But it doesnt work..

code

2

Hi @fr_geshock,

You can try setting the width of the outer <div> to the Width of the column in pixels.

3

Did not quite understand. Can you give an example?
In general, it would be logical that setting the column property TextAlign = "TextAlign.Center" affected the header.

4

Try something like this:

<RadzenGridColumn Width="100px">
 <HeaderTemplate>
   <div style="text-align: center; width: 100px; margin-left: -12px">
         <RadzenIcon Icon="add_circle_outline"
              Style="color: limegreen; vertical-align: middle; display: inline-block; cursor: pointer; 
              font-size: 1.5rem" data-toggle="tooltip" data-placement="right" title="Add Stock"
         />
   </div>
 </HeaderTemplate>
</RadzenGridColumn>
1 Like
5

Thank you for help, but this still not working...
It would be great to see in future releases that the TextAlign property for a column also affects the header.

6

Works as expected here ...

image
image2146×1104 176 KB

7

This works if the table has at least one column without a fixed width.
In my case, all columns have a given width, since the row is quite long. If you do not specify the Width property for a some column in a long row, then this column simply will not be displayed. Therefore, you have to set the width value either for all columns, or for none.
Why is the usual css definition justify-content-center not working in the header?

8

The example I have provided has ColumnWidth="200px" specified. Which means that all columns have width Set.

Why is the usual css definition justify-content-center not working in the header?

You can use your browser's developer tools to inspect the CSS of the DataGrid header and find out what is causing this.

1 Like