datagrid: JSON API (sync) + Pagination causes repeated re-build of tab

[pavitrakumar78]

Hi,

I'm trying to combine the examples you have for async JSON API and pagination, but this is resulting in a tab that keeps refreshing continously because handlePageChange is constantly called.

The way I'm approaching this is: the FutureBuilder's future i.e the get data method returns a list of rows + the total no. of rows. I use this to initialize the table with the total rows and the row data itself.

However, this keeps calling the handlePageChange once the first page is rendered.

Are these 2 methods/approaches not compatible? or can you please provide a paginated AJAX async example?

Thank you!

[Tamilarasan-Paranthaman]

Hi @pavitrakumar78,

As per your requirement, we have prepared the DataGrid pagination sample. In that sample, we have loaded the data from the JSON to DataGrid. Also, we are unable to reproduce the reported issue in that sample. It’s working fine on our end. Please check the following sample.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-798975941

The configuration that we have:

DataGrid Version: 20.2.39 Flutter Channel: Stable Flutter Version: 3.0.5

Please check the above sample and let us know if you are still facing the same issue. We will be happy to assist you.

Regards, Tamilarasan

[pavitrakumar78]

Hi Tamilarasan,

Thank you for your quick response. It seems the problem was that I was using async for pagination and also updated the main row list instead of the paginated row list.

Your example helped sort this out. I would suggest adding the async+pagination example to your main website because it's a common use case.

On a side note, since we are on the topic of pagination, is it possible to listen to sort events (a callback?) and reset pagination back to the first page? Also, is it possible to edit the color of the numbers/text in the pagination (that appears at the bottom)? I'm using a dark theme and finding it a bit hard to style each SyncFusion widget.

Thank you!

[Tamilarasan-Paranthaman]

Hi @pavitrakumar78,

Regarding Query: I would suggest adding the async+pagination example to your main website because it's a common use case.

We will add the sample i.e., async + pagination, to our website in the future. We appreciate your patience until then.

Regarding Query: is it possible to listen to sort events (a callback?) and reset pagination back to the first page?

Currently, DataGrid doesn’t have the callback for the sort events. You can achieve your requirement by calling the DataPagerController.firstPage method in the DataGridSource.sort method. Please check the following code snippet.

In the DataGridSource:

DataPagerController dataPagerController = DataPagerController();

class EmployeeDataSource extends DataGridSource {

  @override
  void sort() {
    super.sort();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      dataPagerController.firstPage();
    });
  }

}

In DataPager:

     SfDataPager(
         pageCount: pageCount,
         direction: Axis.horizontal,
         controller: dataPagerController,
         delegate: _employeeDataSource),

Regarding Query: is it possible to edit the color of the numbers/text in the pagination (that appears at the bottom)? I'm using a dark theme and finding it a bit hard to style each SyncFusion widget.

You can change the color of the number/text by setting the style in the SfDataPagerThemeData.itemTextStyle property. Also, DataGrid provide the support to loading the Text widget with the font color in the pageItemBuilder. Please check the following code snippet.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('PageNavigation Demo')),
        body: LayoutBuilder(builder: (context, constraints) {
          return Column(children: [
            SizedBox(
                height: constraints.maxHeight - 60,
                child: buildDataGrid(constraints)),
            SizedBox(
                height: 60,
                child: SfDataPagerTheme(
                    data: SfDataPagerThemeData(
                        itemTextStyle: const TextStyle(color: Colors.pink)),
                    child: SfDataPager(
                        pageCount: pageCount,
                        controller: dataPagerController,
                        delegate: _employeeDataSource)))
          ]);
        }));
  }

Also, we have already provided examples of customizing the appearance of the data pager in our UG documentation. Please go through this,

UG Documentation: https://help.syncfusion.com/flutter/datagrid/paging#appearance

We hope this helps. Please let us know if you require any further assistance on this.

Regards, Tamilarasan

[pavitrakumar78]

@Tamilarasan-Paranthaman Thank you for the detailed reply.

I found an issue: when switching between pages rapidly or when the server loads quickly (as when testing with localhost), there seems to be an issue of repeated rendering of the table. This might be related to what the user posted in #825.

I've attached a video of this. Try loading the product and rapidly clicking on pages.

The same happens with sort.

The reason you are probably not able to reproduce this easily is if you operate the interface with sufficient slowness or delay, it won't occur, but it should be able to handle higher speed of usage so that's why this is an issue - most mobile users are not slow and this can cause significant issues with server usage if the infinite calls start to happen.

Is there a workaround? I would prefer not to use approaches like delay or anything that adds more bottleneck to the UI (other than the server response time).

https://user-images.githubusercontent.com/5354407/181356266-9f0f3890-d824-4925-a905-69819c6b295a.mp4

[Tamilarasan-Paranthaman]

Hi @pavitrakumar78,

We have followed your replication steps and tried to reproduce the reported issue. But we are unable to reproduce the reported issue. It’s working fine on our end. We have tested the following sample with the below configuration,

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-588247805

https://user-images.githubusercontent.com/93904422/181776692-b6bfb98e-dc1c-4783-b799-dcab06ea4dab.mp4

• DataGrid Version: 20.2.40

• Flutter Channel: Stable

• Flutter Version: 3.0.5

• Device: Samsung Galaxy S6 (SM-G9201)

Please check the above sample. If you are still facing the same issue, please provide the following details to check further.

• Provide a sample that is reproducible or modify the above sample to be reproducible.

• The Data Grid Version in which you have faced an issue.

It will be helpful for us to check on it and provide you with the solution at the earliest.

Regards, Tamilarasan

[pavitrakumar78]

@Tamilarasan-Paranthaman

Can you try with this code: https://pastebin.com/jc4hhCFe

I have added an await delay before the API fetch to simulate a real server delay. Now you can try the same fast clicking and you should be able to notice that the continuous looping starts.

Note: I'm running this version: syncfusion_flutter_datagrid: ^20.2.40

[Tamilarasan-Paranthaman]

Hi @pavitrakumar78,

Currently, we are analyzing the reported issue. We will validate and update you with the details in two business days. i.e., August 03, 2022. We appreciate your patience until then.

Regards, Tamilarasan

[Tamilarasan-Paranthaman]

Hi @pavitrakumar78,

We have checked your reported issue and logged this as a bug. We will include the changes in our weekly pub release which is scheduled to be rolled out on August 16, 2022. We will let you know once it gets rolled out. We appreciate your patience until then. You can follow up with the below feedback for further details,

Feedback Link: https://www.syncfusion.com/feedback/36797/handlepagechange-method-is-called-infinite-times-when-switch-between-pages-so-fast

Until we include the fix in weekly pub release, you can return false when both indexes are the same in the handlePageChange to overcome this issue for now. Please check this code snippet,

@override
  Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {
    print(
        'Handle PageChange called and  oldPageIndex: $oldPageIndex  newPageIndex: $newPageIndex');

      if (oldPageIndex == newPageIndex) {
      return false;
    }

…

}

Regards, Tamilarasan

[pavitrakumar78]

@Tamilarasan-Paranthaman Thank you for the fix. I will leave this issue open - you can close it now or after the patch has been pushed.

[Tamilarasan-Paranthaman]

Hi @pavitrakumar78,

We are glad to inform you that the fix for the handlePageChange method called infinite times when switching between pages so fast through the page item has been included in our weekly pub release. Please update the DataGrid package to version 20.2.45.

We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you require any further assistance.

Regards,
Tamilarasan

[pavitrakumar78]

Thank you!