Grid column picker position

[benghaner]

Hi all,

Any tips on setting a consistent column picker position? By default, the position is on the left. However, when adding content to the header via HeaderTemplate then the column picker moves to the right. I'm not sure how to configure a global style so that column picker is always on the left (or the right).

Any suggestions?

Here is the HTML for column picker:

<div class="rz-group-header">
	<div class="rz-column-picker"></div>
</div>

Here is the HTML for column picker + additional HeaderTemplate

<div class="rz-group-header">
	<div class="rz-custom-header"></div>
	<div class="rz-column-picker"></div>
</div>

Given the HTML structure and the CSS property justify-content: space-between for the .rz-group-header the behavior makes sense. When there's only one child element (the column picker), it stays on the left. But when there's additional content, the column picker, being the second element, gets pushed to the right.

Thanks,
Ben

[enchev]

@benghaner

When there's only one child element (the column picker), it stays on the left. But when there's additional content, the column picker, being the second element, gets pushed to the right.

Yes, that’s intentional by design, still you can define different rules for the same classes. Check for example this thread:

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…