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 

[GebouwAssistent]

Hello,

Is there a way to have like a custom text. I've created an amount of records based on the size of the content page.

So I want to have an option like "Fit" in the dropdown en when clicked it will activate my function to show amount of records based on the content page.

public List<object> maxRecordsOnPage { get; set; } = new List<object>() { "Fit", 24, 30, 50,"All" };

And when Fit is pressed an OnActionClick function will be kicked. But at the moment "Fit" doesn't even show up.

Kind regards,

[Prathap Senthil]

Hi GebouwAssistent,

Based on your requirements, we regret to inform you that currently not feasible to achieve your requirement . Thanks for your understanding.

Regards,
Prathap Senthil

[GebouwAssistent]

Hello,

Based on the previous question. Is there a way to have the calculated page value added to the list?

 double pageResize = (gridHeight - (pageSize * (rowHeight+1))) / (rowHeight+10);

 Pagesize = pageSize + (int)Math.Round(pageResize);

 maxRecordsOnPage.Add(Pagesize);

  await SfDataGrid.Refresh();

  StateHasChanged();

Because at the moment it will add to the list. But the change will not be visible in the grid itself.

Regards, 

[Prathap Senthil]

Based on your requirement, we suspect that you can dynamically adjust the page size according to the grid's height and row height. To ensure that the calculated page size value is reflected in the DataGrid, we already have documentation on this topic. Kindly refer to the documentation below for more information.

Reference:https://blazor.syncfusion.com/documentation/datagrid/paging#dynamically-calculate-page-size-based-on-element-height

If this does not meet your requirements, please provide more details about your needs. Thank you for your understanding

[GebouwAssistent]

Yes, but the option of going back to the amount of records based on the grid's height and row height is where I am after.

So as stated before. I have a dropdown with 10,15,20,25. But based on the grids''s height and row height. let's say it's 17. I want to have the dropdown as follows: 10,15,20,25,17 (Or in order if possible). So I tried to add my calculation of the grid to my list of int. But the list is not updated within the grid itself.

[Prathap Senthil]

Based on your requirements, we regret to inform you that it is not possible to dynamically add the page size to the built-in paging pagesizes dropdown values.Thank you for your understanding.

Alternatively, you can use the toolbar template feature to render the dropdown component to achieve your requirements. If you would like to explore this solution, please let us know, and we will provide the solution for you.