We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

SFDataGrid with Paging and Filtering possible?


I'm using the SfDataGrid with paging on a dataset that is about 200 rows in total. It appears in initial testing that the SfDataGrid will only filter the current page (each page has 15 rows) rather than the entire dataset (200 rows and growing).

Is it possible within the SfDataGrid to filter the entire dataset? It seems that the only way to accomplish this is to either:
1 - turn off paging and show/filter the entire dataset
2 - implement a custom solution that filters the dataset and then rebind the SfDataGrid

5 Replies

TP Tamilarasan Paranthaman Syncfusion Team December 29, 2022 01:26 PM UTC

Hi Martin,

Based on the provided information, we suspect that you are overriding the handlePageChange method in the DataGridSource class. If you override the handlePageChange method, then only current page rows are available in the DataGrid, and filtering is processed with those rows alone. You can achieve your requirement by not overriding the handlePageChange in the DataGridSource class. We have prepared a sample for that. Please check the following sample.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1042376945



MA Martin December 29, 2022 05:32 PM UTC

Thank you Tamilarasan,

We are also using the SfDataPager - I'll check the code sample, but it looks like the SfDataPager is not needed in this scenario?

TP Tamilarasan Paranthaman Syncfusion Team December 30, 2022 01:04 PM UTC


To apply sorting or filtering to the entire DataGrid, rather than just the current page, you should not override the handlePageChange method. Instead, you should have access to all of the rows in the DataGrid. For more information, please see the following documentation:


If you want to load the data based on each page, sorting or filtering can only be applied to the current page. This is the current behavior of the DataGrid.

MA Martin December 30, 2022 06:38 PM UTC

Thank you Tamilarasan, that works well for the DataGrid. One thing my testing is showing is that the SfDataPager still maintains the original page count display. Meaning that if there were 100 rows being paged before the filter at 10 rows per page then the SfDataPager will show 10 pages and this works great. 

However, after filtering, let's say there are only 3 rows showing the SfDataPager still will display the page count as if all 100 rows were still available. 

I have looked at the callbacks "onFilterChanged" and "onFilterChanging" but the DataGridFilterChangeDetails doesn't seem to have a way to see the "new" collection of reduced rows after  so that I can then change the SfDataPager to reflect that new page count.

TP Tamilarasan Paranthaman Syncfusion Team January 3, 2023 12:57 PM UTC

Martin, to get the filtered rows in the DataGrid, you can use the DataGridSource.effectiveRows property. This property returns a list of rows that have been filtered based on the current filter conditions. You can then use the length of this list to update the page count in the DataGrid.

In the shared sample that we provided in a previous response, we have already implemented this approach. Please see the following code snippet for an example:


  void _updatePageCount() {

    final rowsCount = _employeeDataSource.filterConditions.isNotEmpty

        ? _employeeDataSource.effectiveRows.length

        : employees.length;

    pageCount = (rowsCount / _rowsPerPage).ceilToDouble();




  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(title: const Text('PageNavigation Demo')),

        body: LayoutBuilder(builder: (context, constraints) {

          return Column(children: [


                height: constraints.maxHeight - 60,

                child: SfDataGrid(

                    allowFiltering: true,

                    onFilterChanged: (details) {

                      setState(() {




                    source: _employeeDataSource,

                    columnWidthMode: ColumnWidthMode.fill,

                    columns: getColumns)),


              height: 60,

              child: SfDataPager(

                  pageCount: pageCount, delegate: _employeeDataSource),





Live Chat Icon For mobile
Up arrow icon