RadzenDataGrid Style Pagination and Filter Popup

Radzen.Blazor Components
1

Hi there
how can i style

  1. pagination: colors and apearance of the selected page
  2. filter popup: colors
    grafik
    grafik
    grafik286×375 3.83 KB
2

You can observe applied styles using your browser dev tools inspector and apply custom styling using the same rules:

image
image1920×1080 244 KB

image
image1920×1080 248 KB

3

I tried that and was at least 90 % successful, only for the font size of pagination pagination_first, pagination_prev, pagination_next, pagination_last I couldn't find a solution
grafik

4

@grsgrs, you can try with the following:

<style>
.rz-pager-element .rzi {
    font-size: 1rem;
    height: 1rem;
    line-height: 1rem;
    width: 1rem;
</style>

Additionally, the density property might be useful - https://blazor.radzen.com/datagrid-density

5

It is .rz-paginator-element .rzi, but that works. But is there anything of docs for that. I mean it's hard to find the proper css, if youre not a CSS guy but a developer that wants to be productive

6

As of Radzen.Blazor v5.0 .rz-paginator-* is renamed to .rz-pager-*. See https://blazor.radzen.com/changelog.

In terms of documentation - you can see the generated CSS classes in either the components source code or via the browser's devtools. If you don't want to deal with CSS to such an extent, Radzen Blazor Studio covers most of the theme adjustment and styling scenarios via the Appearance and Style panels - Style Components | Radzen Blazor Studio Docs