I want a button in a datagrid-header like the example 'DataGrid Custom Header with a button', but the button should be right-aligned

Radzen.Blazor Components
1

I tried to create a right-aligned button like the example ' DataGrid Custom Header with a button', but no chance. The HeaderTemplate doesn't fill 100%, so my button is always in the middle of the row. No style or class available at HeaderTemplate. What can I do?

2

Hi @JimKnopf,

Welcome to the Radzen Community!

Unfortunately I am not sure what you have tried, which example you are referring to, what the problem is or what the desired outcome should be. I suggest checking the forum FAQ which contains tips how to improve your question so the community can help you.

3

Sorry korchev, I corrected my question. Now its better readable.

4

I am afraid I still don't understand what you are after. Maybe somebody else from the community does and would help you.

5

I used the following example:

Here the button is left-aligned, but I want it right-aligned (on the right side of the datagrid).

6

Thank you for the link and clarification. To align the content to the right (including the column picker UI) you can add this CSS to your application (wwwroot/app.css or site.css):

.rz-custom-header {
    flex: 1;
    display: flex;
    justify-content: end;
    padding-right: 1rem;
}

If you want to have finer control you can add this rule:

.rz-custom-header {
    flex: 1;
}

And then use RadzenStack to position the content.

<style>
.rz-custom-header {
    flex: 1;
}
</style>
<RadzenDataGrid Data="@employees" AllowFiltering=true TItem="Employee" ColumnWidth="300px">
    <HeaderTemplate>
        <RadzenStack AlignItems="AlignItems.End">
             <RadzenButton  Text="Toggle EmployeeID column visibility" Click=@(() => EmployeeIDVisible = !EmployeeIDVisible)  />
        </RadzenStack>
    </HeaderTemplate>

align

7

Thx korchev, works like a charm ...

8

Thanks for the solution . but I still have a problem when we have AllowColumnPicking="true" in RadzenDataGrid it still stucks after the button . how could we have both but ColumnPicking at the left and button at the right?