SFDataGrid pagination with SFDataPager not working

0 votes

I am a beginner in flutter mobile development. I am currently using a Package in flutter called syncfusion_flutter_datagrid, I am having a problem where the SFDataPager, which is used for pagination, is not working and the SFDataGrid is still scrolling and not divided into pages, although the pageCount is working and does have 2 pages (I currently have 15 items for the data table) because it only does calculations, but the rowsPerPages is not working because the data table still has 15 items and is still scrollable. I do not know if there is anything missing in my code especially in the DataGridSource class because both the SFDataGrid and SFDataPager is connected to the DataGridSource.

Here is my widgets in the view class:

              AppDataGrid(
                dtrHistoryData: _controller.historyData.value,
                columns: _controller.columns,
              ),
              SizedBox(
                height: dataPagerHeight,
                width: double.maxFinite,
                // color: Colors.white,
                child: Center(
                  child: SfDataPager(
                    pageCount: ((_controller.historyData.value.timeData
                                    ?.length ??
                                1) /
                            10)
                        .ceilToDouble(),
                    delegate: DTRHistoryDataGridSource(
                        dtrHistoryData: _controller.historyData.value),
                    direction: Axis.horizontal,
                  ),
                ),
              ),

This is the SFDataGrid (AppDataGrid):

import 'package:flutter/material.dart';
import 'package:puncher_app/app/global/constants/colors.dart';
import 'package:puncher_app/app/models/dtr_history_data.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

import '../../data/table/history_table2_data.dart';

class AppDataGrid extends StatelessWidget {
  final DTRHistoryData dtrHistoryData;
  final List<GridColumn> columns;

  const AppDataGrid({
    super.key,
    required this.dtrHistoryData,
    required this.columns,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Card(
        clipBehavior: Clip.antiAliasWithSaveLayer,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        color: transparent,
        elevation: 0,
        child: SfDataGridTheme(
          data: SfDataGridThemeData(
            headerColor: secondaryColor,
          ),
          child: SfDataGrid(
            rowsPerPage: 11,
            verticalScrollPhysics: const ClampingScrollPhysics(),
            horizontalScrollPhysics: const ClampingScrollPhysics(),
            headerGridLinesVisibility: GridLinesVisibility.none,
            gridLinesVisibility: GridLinesVisibility.horizontal,
            source: DTRHistoryDataGridSource(
              dtrHistoryData: dtrHistoryData,
            ),
            columns: columns,
          ),
        ),
      ),
    );
  }
}

And here is the DataGridSource:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:puncher_app/app/global/constants/colors.dart';
import 'package:puncher_app/app/global/constants/styles.dart';
import 'package:puncher_app/app/global/widgets/app_text.dart';
import 'package:puncher_app/app/models/dtr_history_data.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

class DTRHistoryDataGridSource extends DataGridSource {
  late List<DataGridRow> _dtrHistoryDataGridRows;
  late DTRHistoryData _dtrHistoryData = DTRHistoryData();

  DTRHistoryDataGridSource({required DTRHistoryData dtrHistoryData}) {
    _dtrHistoryData = dtrHistoryData;
    buildDataGridRows();
  }

  void buildDataGridRows() {
    final dateFormat = DateFormat('hh:mm a');
    _dtrHistoryDataGridRows = _dtrHistoryData.timeData
            ?.map<DataGridRow>(
              (timeData) => DataGridRow(
                cells: [
                  DataGridCell<String>(
                    columnName: 'Date',
                    value: timeData.date,
                  ),
                  DataGridCell<String>(
                    columnName: 'Time In',
                    value: timeData.timeIn?.isNotEmpty == true
                        ? dateFormat.format(
                            DateTime.parse(timeData.timeIn!),
                          )
                        : '--',
                  ),
                  DataGridCell<String>(
                    columnName: 'Time Out',
                    value: timeData.timeOut?.isNotEmpty == true
                        ? dateFormat.format(
                            DateTime.parse(timeData.timeOut!),
                          )
                        : '--',
                  ),
                  DataGridCell<String>(
                    columnName: 'Duration',
                    value: timeData.duration != null
                        ? formatDuration(timeData.duration!)
                        : '--',
                  )
                ],
              ),
            )
            .toList() ??
        [];
  }

  String formatDuration(String duration) {
    final parts = duration.split(' ');
    final hours = parts[0];
    final minutes = parts[2];

    return '${hours}h${minutes}m';
  }

  @override
  List<DataGridRow> get rows => _dtrHistoryDataGridRows;

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return Container(
          alignment: Alignment.center,
          // padding: const EdgeInsets.all(16.0),
          child: AppText(
            text: dataGridCell.value.toString(),
            textColor: secondaryColor,
            style: kRegTextBlack,
            alignment: TextAlign.center,
          ));
    }).toList());
  }

  @override
  Object getValue(int rowIndex, String columnName) {
    final TimeData timeData = _dtrHistoryData.timeData![rowIndex];
    switch (columnName) {
      case 'Date':
        return timeData.date!;
      case 'Time In':
        return timeData.timeIn!;
      case 'Time Out':
        return timeData.timeOut!;
      case 'Duration':
        return timeData.duration!;
      default:
        return '';
    }
  }
}

Apr 12, 2023 in Flutter by sarit
• 1,830 points
931 views

1 answer to this question.

0 votes

Looking at the code snippets you provided, it seems like the pagination logic is implemented correctly, but there might be an issue with the data source for the SFDataGrid. Here are a few things you can try to get the pagination working:

  1. Update rowsPerPage property of SfDataGrid widget to 10, which is the number of rows to display per page, to match with rowsPerPages property of SfDataPager.
SfDataGrid(
  rowsPerPage: 10,
  // rest of the properties
)
  1. In your DataGridSource implementation, update the rows getter to only return the number of rows that should be displayed on the current page. This can be done by calculating the starting and ending index based on the pageIndex and rowsPerPage properties provided by the SfDataPager.
class DTRHistoryDataGridSource extends DataGridSource {
  // rest of the implementation
  
  @override
  List<DataGridRow> get rows {
    final startIndex = _pageIndex * _rowsPerPage;
    final endIndex = startIndex + _rowsPerPage;
    return _dtrHistoryDataGridRows.sublist(startIndex, endIndex);
  }
  
  // rest of the implementation
}
  1. Make sure that you are using the DTRHistoryDataGridSource instance created in the SfDataPager widget as the source for your SfDataGrid.
SfDataGrid(
  source: _dataGridSource, // use the same instance as SfDataPager
  // rest of the properties
)

With these changes, you should be able to get the pagination working as expected.

answered Apr 12, 2023 by vishalini

Related Questions In Flutter

0 votes
1 answer

Flutter Like Button Animation Not Working After Adding Method

It seems like the issue might be ...READ MORE

answered Apr 12, 2023 in Flutter by Tanishqa
• 1,170 points
620 views
0 votes
1 answer
0 votes
1 answer

How can I change the app display name build with Flutter?

Yes, you can change the app display ...READ MORE

answered Mar 21, 2023 in Flutter by venky
1,844 views
0 votes
1 answer

How to make a TextField with HintText but no Underline?

You can achieve this by using the ...READ MORE

answered Mar 21, 2023 in Flutter by Anushi
1,345 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,189 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
761 views
0 votes
1 answer

flutter run: No connected devices

Hi@akhtar, To prepare to run and test your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,823 views
0 votes
1 answer

How to create a function in Dart language?

Hi@akhtar, There are many function types available in ...READ MORE

answered Jul 22, 2020 in Others by MD
• 95,440 points
500 views
0 votes
1 answer

flutter, avatarGlow is not working at all with fluoatingbutton

Based on the code you provided, it ...READ MORE

answered Apr 14, 2023 in Flutter by Anitha
343 views
0 votes
1 answer

iOS debugging not working on thunderbolt port in mac mini

If your iOS device is not being ...READ MORE

answered Apr 20, 2023 in Flutter by vishalini
250 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP