How to filter content when using Paged data

[Tim]

Your paging Documentation says  to '  fetch only a pre-defined number of records from the data source.' but none of your examples do that, they all grab the entrie db, therefore i;m having some trouble figuring out how to Filter and Sort when I have an actual Paged datasource.

Please let me know if there's a better way of doing this?  Much appreciated.

<div class="col-lg-12 control-section sb-property-border">

    <SfGrid @ref="@grid" DataSource="@_data" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" AllowSorting="true" AllowFiltering="true">

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

        <GridEvents Filtering="FilteringHandler" TValue="Models.Country"></GridEvents>

            <GridColumns>

                <GridColumn Field="Id" HeaderText="ID" IsIdentity="true" IsPrimaryKey="true" Width="10"></GridColumn>

                <GridColumn Field="Name" HeaderText="Name" ValidationRules="@(new ValidationRules{ Required=true})" Type="ColumnType.String" Width="150"></GridColumn>

            </GridColumns>

    </SfGrid>

    <SfPager @ref="@Page" PageSize=@TakeValue NumericItemsCount=5 TotalItemsCount=@_count ItemClick="Click">

    </SfPager>

</div>

@code {

    #nullable disable

    SfPager Page;

    SfGrid<Models.Country> grid;

    IEnumerable<Models.Country> _data;

    int SkipValue;

    int TakeValue = 10;

    int _count;

    bool isAdmin = false;

    Models.User CurrentUser;

    string Filter = string.Empty;

    CountryService CountryService;

    protected override async Task OnInitializedAsync()

    {

        base.OnInitialized();

        CountryService = (CountryService)ScopedServices.GetService(typeof(CountryService));

        await LoadData();

    }

    async Task Click(PagerItemClickEventArgs args)

    {

        SkipValue = (args.CurrentPage * Page.PageSize) - Page.PageSize;

        TakeValue = Page.PageSize;

        await LoadData();

    }

    async Task LoadData()

    {

        var resp = await CountryService.List(SkipValue, Filter);

        _data = resp.Results;

        _count = resp.RowCount;

    }

    public async Task FilteringHandler(FilteringEventArgs args)

    {

        // Filter = args.ToString();

        // How do I convert this to a query that I can pass onto my GET

        await LoadData();

    }

[Prathap Senthil]

Hi Tim,

Based on your query, we would like to clarify that when using the Sfpager component, you must define the total items count. Based on your requirement, we suggest using a custom adapter to achieve your needs. When utilizing the custom adapter, specify the skip and take values based on the data to be displayed. Kindly refer to the documentation below for further information.

https://blazor.syncfusion.com/documentation/datagrid/custom-binding
Use the FilteringHandler method to pass the filter values to the Query property to achieve your requirements. Please refer to the API link below for more information

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query

Related forums:

Query for List<Guid> Value | Blazor Forums | Syncfusion

Regards,
Prathap S

[Tim]

This was very straightforward to implement, thank you!

[Prathap Senthil]

Thanks for the update,

We are happy to hear that the provided solution was helpful. We are closing the thread now.