PageSize parameter not updated

[Antri Solomou]

Hello,

I 'm using the sfgrid component with paging (version 20.1.47). I change dynamically the pagesize of the grid into Databound event by invoking javascript function but the first time that grid loaded the paging isn't correct (shows the default value of the pagesize and not the number that returned from js function).

For previous versions my solution works fine and in order to fix this i set the IgnoreScriptIsolation property to false which is obsolete. Is there any other solution for this?

Thank you in advance.

Best Regards,

Antri

[Renjith Singh Rajendran]

Hi Antri,

Greetings from Syncfusion support.

We have documented the topic to dynamically update PageSize for grid on initial load. We suggest you to refer to the below documentation and check this from your side.

https://blazor.syncfusion.com/documentation/datagrid/paging

If you are still facing difficulties the following details would be helpful for us to proceed further.

1. Share the complete grid rendering codes and the JS codes and codes you are using to update PageSize.
2. Share a simple issue reproducing sample for us to validate.
3. Share a video demo showing the replication of the problem you are facing.

The provided information will help us analyze the problem, and provide you a solution as early as possible.

Regards,

Renjith R

[Antri Solomou]

Hello Renjith,

Thank you for your reply.

I 've already tried this approach from your documentation but the Height for my grid is percentage (100% for example), and the GridHeight variable not get the correct value.  So the PageSize is always 0.

Any solution for this?

Best Regards,

Antri

[Renjith Singh Rajendran]

Hi Antri,

When set Height as 100% grid will be rendered based on Grid’s parent div element’s height. So based on this scenario, you can use the parent div element’s height and perform PageSize calculation to render the rows in Grid. Please refer the codes below,

 

<div style="height:500px">

    <SfGrid DataSource="@OrderData" @ref="DefaultGrid" Toolbar=@ToolbarItems Height="100%" AllowPaging="true">

        <GridEvents OnLoad="OnLoad" TValue="Order"></GridEvents>

        ...

     </SfGrid>

</div>

 

    public async Task OnLoad()

    {

        var RowHeight = 37; //height of the each row

        GridHeight = 500; //set Grid's parent element height

        var PageSize = (this.DefaultGrid.PageSettings as GridPageSettings).PageSize; //initial page size

        decimal PageResize = ((GridHeight) - (PageSize * RowHeight)) / RowHeight; //new page size is obtained here

        #pragma warning disable BL0005

        (this.DefaultGrid.PageSettings as GridPageSettings).PageSize = PageSize + (int)Math.Round(PageResize);

        #pragma warning restore BL0005

    }

 

Reference :

https://blazor.syncfusion.com/documentation/datagrid/scrolling#responsive-with-parent-container

Please get back to us if you need further assistance.

Regards,

Renjith R

[Antri Solomou]

Hello Renjith,

Thank you for your reply.

In my case the grid's parent element has no fixed height and this is the reason I call js function.

In the following zip you can find snapshots from my code in razor file, razor.cs and js file.

My issue is that the first time that grid loaded the pageSize is not rendered correctly with the returned value from js function and there is a scroll into the grid.

For versions before 20.1.47 my solution works fine and in order to fix this i set the IgnoreScriptIsolation property to false which is obsolete. Is there any other solution for this?

Thank you in advance.

Best Regards,

Antri

Attachment: code_80bdc0fc.zip

[Renjith Singh Rajendran]

Hi Antri,

Thanks for your update.

Query : For versions before 20.1.47 my solution works fine

We suspect that you might have missed adding the breaking changes while upgrading to our latest version. If so, then we suggest you to refer the below reference and ensure the below release notes with the application from your side.

https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changes

If you are still facing difficulties then kindly get back to us with a simple issue reproducing sample based on your scenario for us to further validate on this based on your Grid application layout.

Regards,

Renjith R

[Antri Solomou]

Hello Renjith,

Thank you for your reply.

If I proceed with the way 1 of your documentation the grid does not rendered correctly. If I proceed with the way 2 the grid rendered fine but this is obsolete and this is my issue. If you have another solution to avoid the obsolete way.

Thank you in advance.

Best Regards,

Antri

[Monisha Saravanan]

Hi Antri,

Greetings from Syncfusion support.

Query: “If I proceed with the way 1 of your documentation the grid does not rendered correctly. If I proceed with the way 2 the grid rendered fine but this is obsolete and this is my issue. If you have another solution to avoid the obsolete way.”

We have checked your query and we would like to inform that we have two ways in loading scripts and styles(using CDN and SatisWebAssets).

In both the cases you must need to load both scripts and styles externally. You can use any one of the below method to load styles and scripts. We have prepared an sample for your reference. Kindly check the attached sample.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid839101025.zip

Also kindly refer the below ways for your additional information.

CDN	Scripts- https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference Styles - https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference
Static Web Assets	Scripts - https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets   Styles - https://www.nuget.org/packages/Syncfusion.Blazor.Themes/

Example code snippet:

[layout.cshtml]

 

<link rel='nofollow' href=https://cdn.syncfusion.com/blazor/20.1.50/styles/bootstrap5.css rel="stylesheet"/>

      <script src=https://cdn.syncfusion.com/blazor/20.1.50/syncfusion-blazor.min.js type="text/javascript"></script>

    

Also refer the below release notes for your additional information.

Reference: https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#common

Note:  Need to disable javascript isolation while using the above ways( AddSyncfusionBlazor()).

If still the reported issues is not resolved then kindly get back to us with an issue reproduceable sample or try to reproduce the issue on the above mentioned sample or get back to us with an screensnip of layout/index.html.

Regards,

Monisha

[Antri Solomou]

Hello Monisha,

Please find attached my sample where the issue exists.  If the height is percentage then the pagesize property is not updated correctly.  

Thanks in advance.

Best Regards,

Antri Solomou

Attachment: BlazorServerAppSample_fea0d776.zip

[Renjith Singh Rajendran]

Hi Antri,

Query : then the pagesize property is not updated correctly. 

We checked the shared sample and we could see that 75 is returned from the JavaScript method to set as PageSize and the value(75) is properly set as grid’s page size. We also checked this by modifying this by providing a static page size as 20, which is also set properly to grid. We are attaching a video showing this behavior with your shared sample.

The value assigned to pageSize inside DataBoundHandler method will only be set as page size for grid. So please check this from your side and if we have misunderstood your requirement or if you are facing any difficulties then kindly share with us a detailed explanation of the exact problem and requirement for us to proceed further.

If you need to dynamically update grid’s height when page resizing then we suggest you to refer the below documentation and set grid’s parent height calc as like provided in the documentation.

https://blazor.syncfusion.com/documentation/datagrid/scrolling#responsive-with-parent-container

Regards,

Renjith R

Attachment: Pagesizesetproperly_44bad91f.zip