Unable to set page size for grid if data is fetched in async method

[Admir Hodžic]

When data grid loading data in async methods settings page size in Load method does not take effects.

In the attachment is a sample page combination of PageSize sample and WebApi data bindings.

Please can you check that setting the page size of the Load method does not affect the grid.

@page "/TestPageSize"

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Data

<SfGrid TValue="Order" @ref="DefaultGrid" AllowPaging="true" Height="600">

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

    <GridPageSettings PageCount="2"></GridPageSettings>

    <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

@code{

    private SfGrid<Order> DefaultGrid;

    public int GridHeight;

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

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

    public void Load(object args)

    {

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

        Int32.TryParse(this.DefaultGrid.Height, out GridHeight); //datagrid height

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

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

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

    }

}

Attachment: samplePage_52628ab.zip

[Vignesh Natarajan]

Hi Admir,  

 

Thanks for contacting Syncfusion support.  

 

Query: “When data grid loading data in async methods settings page size in Load method does not take effects.” 

 

We have validated the reported issue by preparing a sample using your code example. We suggest you to achieve your requirement using property binding for PageSize property of GridPageSettings. Refer the below code example.  

 

<SfGrid TValue="Order" @ref="DefaultGrid" AllowPaging="true" Height="600"> 

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

    <GridPageSettings PageSize="@Size" PageCount="2"></GridPageSettings> 

    <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager> 

. . . . . . . . . 

</SfGrid> 

  

@code{ 

    private SfGrid<Order> DefaultGrid; 

    public int GridHeight; 

    public int Size { get; set; } 

 

    public void Load(object args) 

    { 

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

        Int32.TryParse(this.DefaultGrid.Height, out GridHeight); //datagrid height 

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

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

        Size = PageSize + (int)Math.Round(PageResize); 

    } 

 

 

Kindly download the sample with modified codes from below  

Sample: https://www.syncfusion.com/downloads/support/forum/157702/ze/DataGrid-1661747164  

 

Please get back to us if you have further queries.  

 

Regards,
Vignesh Natarajan