Zero control on PageCount of Pager

[TiQ Industry]

I am trying to achieve a simple thing: manually edit the pager PageCount property.

I have a custom component (generic) with inside a SFGrid, which loads data from a WebAPI endpoint.

Data loads correctly, but instead of showing max page as 2, the grid shows 1 and I am unable to fetch next page.

This is the custom component implementation:

@typeparam TValue
<SfGrid @ref="_Grid"
        ID="Grid"
        DataSource="Rows"
        AllowSelection="AllowSelection"
        AllowFiltering="AllowFiltering"
        AllowPaging="AllowPaging"
        AllowSorting="AllowSorting"
        AllowGrouping="AllowGrouping"
        AllowReordering="true"
        AllowResizing="true"
        ShowColumnChooser="true"
        AllowPdfExport="true"
        AllowExcelExport="true"
        FrozenRows="FrozenRows"
        Toolbar="_ToolbarItems"
        Width="100%"
        Height="100%">


    <GridSelectionSettings Type="SelectionType"></GridSelectionSettings>


    <GridFilterSettings Type="FilterType.Menu"></GridFilterSettings>


    <GridPageSettings PageSize="PageSize"
                      PageCount="LastPage"
                      CurrentPage="CurrentPage"></GridPageSettings>


    <GridSortSettings>
        <GridSortColumns>
            @foreach (TQGridColumn column in Columns.Where(x => x.SortDirection.HasValue).OrderBy(x => x.SortOrder))
            {
                <GridSortColumn Field="@column.Field"
                                Direction="@column.SortDirection.Value"></GridSortColumn>
            }
        </GridSortColumns>
    </GridSortSettings>


    <GridGroupSettings ShowDropArea="ShowGroupArea" Columns="Columns.Where(x => x.IsGrouped).Select(x => x.Field).ToArray()"></GridGroupSettings>


    <GridEditSettings AllowAdding="AllowAdding"
                      AllowEditing="AllowEditing"
                      AllowDeleting="AllowDeleting"
                      ShowDeleteConfirmDialog="true"
                      Mode="EditMode"></GridEditSettings>


    <GridEvents OnActionBegin="OnActionBegin"
                OnActionComplete="OnActionComplete"
                OnToolbarClick="OnToolbarClick"
                RowDataBound="OnRowDataBound"
                QueryCellInfo="OnQueryCellInfo"
                OnRecordDoubleClick="OnRecordDoubleClick"
                TValue="TValue"></GridEvents>


    <GridColumns>


        @if (SelectionType == SelectionType.Multiple)
        {
            <GridColumn Type="ColumnType.CheckBox"
                        AllowEditing="false"
                        Width="50"></GridColumn>
        }


        <GridColumn Type="ColumnType.Number"
                    HeaderText="#"
                    AllowFiltering="false"
                    AllowEditing="false"
                    AllowSorting="false"
                    TextAlign="TextAlign.Right"
                    Width="50">
            <Template>
                @GetRowNumber(context as TValue)
            </Template>
        </GridColumn>


        @foreach (TQGridColumn column in Columns)
        {
            <GridColumn Field="@column.Field"
                        IsPrimaryKey="column.IsPrimaryKey"
                        Type="column.ColumnType"
                        Format="@column.Format"
                        TextAlign="column.TextAlign"
                        Visible="column.Visible"
                        IsFrozen="column.IsFrozen"
                        AllowAdding="column.AllowAdding"
                        AllowEditing="column.AllowEditing"
                        AllowFiltering="column.AllowFiltering"
                        AllowGrouping="column.AllowGrouping"
                        AllowReordering="column.AllowReordering"
                        AllowResizing="column.AllowResizing"
                        AllowSearching="column.AllowSearching"
                        AllowSorting="column.AllowSorting"
                        ShowInColumnChooser="column.ShowInColumnChooser"
                        Width="@(column.Width <= 0 ? null : column.Width.ToString())">


                <HeaderTemplate>
                    @if (column.Visible)
                    {
                        <div class="d-flex align-center">
                            <MudIcon Icon="@column.Header.Icon"
                                     Size="Size.Small"
                                     Class="mr-2"></MudIcon>
                            @column.Header.Text
                        </div>
                    }
                </HeaderTemplate>


            </GridColumn>
        }


        @if (AllowEditing || AllowDeleting)
        {
            <GridColumn HeaderText="@localization.All.ManageColumnHeader" Width="100">
                <GridCommandColumns>
                    @if(AllowEditing)
                    {
                        <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn>
                    }


                    @if(AllowDeleting)
                    {
                        <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn>
                    }
                </GridCommandColumns>
            </GridColumn>
        }
    </GridColumns>


</SfGrid>

public async Task Refresh(TValue filter = null)
        {
            LastPage++;
            StateHasChanged();
            Rows.Clear();


            if(filter == null)
            {
                filter = new TValue();
            }


            APIRequest<TValue> payload = new APIRequest<TValue>
            {
                DTO = filter,
                Pagination = new APIPagination
                {
                    Page = CurrentPage,
                    RowsPerPage = PageSize
                }
            };


            APIResponse response = await APIClient.Send(Services.APIClient.Method.GET, APIGetUrl, payload, true);


            List<TValue> result = JsonConvert.DeserializeObject<List<TValue>>(response.DataString);


            foreach (TValue r in result)
            {
                Rows.Add(r);
            }


            _Grid.Refresh();
        }

How I am supposed to do it?

Thanks

[Vignesh Natarajan]

Hi TiQ Industry, 

 

Thanks for contacting Syncfusion support.  

 

Query: “Data loads correctly, but instead of showing max page as 2, the grid shows 1 and I am unable to fetch next page.” 

 

We have analyzed your query and we understand that you are facing issue with the Grid pager (not being populated properly). We would like to inform that Grid pager component will be developed based on the total size of Grid DataSource only. Since you have defined only the current page records, grid pager is developed based on that count.  

 

To resolve your query, we suggest you to pass total record count as a parameter to Grid component and assign that value to Grid’s TotalItemCount property in OnDataBound event. Refer the below code example.  

 

@typeparam TValue 

  

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" AllowFiltering="true"> 

    <GridPageSettings CurrentPage="CurrentPage" PageCount="lastPage" PageSize="PageSize"></GridPageSettings> 

    <GridEvents OnDataBound="BeforeDataBound" TValue="TValue"></GridEvents> 

    <GridColumns> 

        @foreach (var prop in typeof(TValue).GetProperties()) 

        { 

            <GridColumn Field="@prop.Name" IsPrimaryKey="@(prop.Name == "OrderID")" AllowEditing="@prop.CanWrite"></GridColumn> 

        } 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<TValue> Grid { get; set; } 

    [Parameter] 

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

    [Parameter] 

    public int PageSize { get; set; } 

    [Parameter] 

    public int lastPage { get; set; } 

    [Parameter] 

    public int CurrentPage { get; set; } 

    [Parameter] 

    public int TotalItemCount { get; set; } 

    public void BeforeDataBound() 

    { 

        // enitre datasource count from the API service must be defined.  

        Grid.TotalItemCount = TotalItemCount; 

    } 

 

 

Kindly refer the below sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170472/ze/DataGrid_Server168186643.zip 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan