Grid Group Header and Header Template

[Ricardo_Silva]

Hello,

I am trying to add a button to the Header Template, but it doesn't play nice with the Group Header.

I added this code for the Header Template:

<HeaderTemplate>
    <RadzenIcon Icon="filter_alt_off" Style="color: dimgrey; cursor: pointer;" onclick=@(() => { radzenRestockGrid?.Reset(); StateHasChanged(); }) />
</HeaderTemplate>

but it aligned the Group text to the right:

I really wanted exactly the opposite. I want the my new button on the right and the group text on the left.

Can I change this?
Also, can I change the text, color, etc.. from the Group Header where it says "Drag a column header....."?

[enchev]

This thread might help you:

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

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…

[yordanov]

<style>
.rz-custom-header {
    order: 1;
}
</style>

Is also an option. It will move the button to a second position in the flex box, aligning it to the right hand side.

Use the rz-group-header-drop class to style the group header placeholder:

.rz-group-header-drop {
    color: red;
}