How to customise Blazor Grid paging template

1 Answer 27 Views
Grid Pager
CJ
Top achievements
Rank 2
Iron
CJ asked on 10 Apr 2025, 06:54 AM | edited on 17 Apr 2025, 01:05 AM
We want to customise the controls inside the Grid's pager. 

With the following settings it's generating what's in the actual.png.  We would like to achieve the template in required.png.

Is it possible to move the controls and change the content inside the pager?

    <GridSettings>
        <GridPagerSettings InputType="PagerInputType.Input"
                           PageSizes="@PageSizes"
                           ButtonCount="5"
                           Adaptive="true"
                           Position="PagerPosition.Bottom">
        </GridPagerSettings>
    </GridSettings>

1 Answer, 1 is accepted

Sort by
0
Accepted
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
answered on 11 Apr 2025, 08:01 AM | edited on 11 Apr 2025, 09:04 AM

You can customize the Grid's pager using custom CSS or by applying a theme. However, reordering the built-in pager controls is not supported.

If you'd like a more customized pager, you can use a custom pager template, which is supported. You can find an example here: https://www.telerik.com/blazor-ui/documentation/components/grid/templates/pager. Keep in mind, though, that using a custom pager template means you'll need to handle most of the work yourself.

As for the issue with the Pager dropdown width, you can apply the fix outlined here: https://www.telerik.com/blazor-ui/documentation/knowledge-base/pager-dropdown-width


Regards,
Anislav Atanasov
Tags
Grid Pager
Asked by
CJ
Top achievements
Rank 2
Iron
Answers by
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Share this question
or