How to customize the grid page size dropdown ?

[chandradev]

Hi 

I was going through this grid document. I have requirement to customize the grid page size dropdown.

https://blazor.syncfusion.com/documentation/datagrid/paging/#pager-with-page-size-dropdown

I did as per as instruction given in above post. But i am getting few issue.

1. Default selected page size not showing
2. All page size option is not coming. It is only showing 5, 10, 15 

My Code snippet as given below

<GridPageSettings PageSizes="@pagesize"></GridPageSettings>

in C# Code

public object[] pagesize = new object[] { 5, 10, 15 };

[Vignesh Natarajan]

Hi Chandradev,  

 

Thanks for contacting Syncfusion support.  

 

Query: “But i am getting few issue. Default selected page size not showing & All page size option is not coming. It is only showing 5, 10, 15 ” 

 

We have analyzed your query and we would like to inform you that when Paging is enabled, Default PageSize of Grid will be 12. So while defining the values for Pager Dropdown, default value will be selected only when it is exist in dropdown value, other wise it will blank during initial rendering.  

 

So we request you to define 12 value in pager dropdown or change the default Grid PageSize to anyone of the value existing in pager dropdown (PageSizes) property. Similarly “All” value needs to be defined in PageSizes property to display in Pager Dropdown.  

 

Refer the below code example.  

 

@using Syncfusion.Blazor.Grids 

  

<SfGrid DataSource="@Orders" AllowPaging="true"> 

    <GridPageSettings PageSizes="@pagesize"></GridPageSettings> 

</SfGrid> 

  

@code{ 

    public List<Order> Orders { get; set; } 

    public object[] pagesize = new object[] { 5, 12 , 10, 15, "All" }; 

 

Or Change the Grid default PageSize 

 

<SfGrid DataSource="@Orders" AllowPaging="true">    <GridPageSettings PageSize="@pagesize" PageSizes="@pagesizes"></GridPageSettings></SfGrid> @code{    public List<Order> Orders { get; set; }    public int pagesize { get; set; } = 5;    public object[] pagesizes = new object[] { 5, 10, 15, "All" };

 

 

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/166711/ze/DataGrid_Server164024731.zip  

 

Please get back to us if you have further queries.       

 

Regards, 

Vignesh Natarajan 

[chandradev]

Thanks Vignesh for sharing exact code snippet.

[Vignesh Natarajan]

Hi Chandradev,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan