loadMoreViewBuilder property

LoadMoreViewBuilder? loadMoreViewBuilder

A builder that sets the widget to display at the bottom of the datagrid when vertical scrolling reaches the end of the datagrid.

You should override DataGridSource.handleLoadMoreRows method to load more rows and then notify the datagrid about the changes. The DataGridSource.handleLoadMoreRows can be called to load more rows from this builder using loadMoreRows function which is passed as a parameter to this builder.

Infinite scrolling

The example below demonstrates infinite scrolling by showing the circular progress indicator until the rows are loaded when vertical scrolling reaches the end of the datagrid,

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Syncfusion Flutter DataGrid')),
    body: SfDataGrid(
      source: employeeDataSource,
      loadMoreViewBuilder:
          (BuildContext context, LoadMoreRows loadMoreRows) {
        Future<String> loadRows() async {
          await loadMoreRows();
          return Future<String>.value('Completed');
        }

        return FutureBuilder<String>(
          initialData: 'loading',
          future: loadRows(),
          builder: (context, snapShot) {
            if (snapShot.data == 'loading') {
              return Container(
                  height: 98.0,
                  color: Colors.white,
                  width: double.infinity,
                  alignment: Alignment.center,
                  child: CircularProgressIndicator(valueColor:
                            AlwaysStoppedAnimation(Colors.deepPurple)));
            } else {
              return SizedBox.fromSize(size: Size.zero);
            }
          },
        );
      },
      columns: <GridColumn>[
          GridColumn(columnName: 'id', label: Text('ID')),
          GridColumn(columnName: 'name', label: Text('Name')),
          GridColumn(columnName: 'designation', label: Text('Designation')),
          GridColumn(columnName: 'salary', label: Text('Salary')),
      ],
    ),
  );
}

Load more button

The example below demonstrates how to show the button when vertical scrolling is reached at the end of the datagrid and display the circular indicator when you tap that button. In the onPressed flatbutton callback, you can call the loadMoreRows function to add more rows.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Syncfusion Flutter DataGrid')),
    body: SfDataGrid(
      source: employeeDataSource,
      loadMoreViewBuilder:
          (BuildContext context, LoadMoreRows loadMoreRows) {
        bool showIndicator = false;
        return StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
          if (showIndicator) {
            return Container(
                height: 98.0,
                color: Colors.white,
                width: double.infinity,
                alignment: Alignment.center,
                child: CircularProgressIndicator(valueColor:
                          AlwaysStoppedAnimation(Colors.deepPurple)));
          } else {
            return Container(
              height: 98.0,
              color: Colors.white,
              width: double.infinity,
              alignment: Alignment.center,
              child: Container(
                height: 36.0,
                width: 142.0,
                child: FlatButton(
                  color: Colors.deepPurple,
                  child: Text('LOAD MORE',
                      style: TextStyle(color: Colors.white)),
                  onPressed: () async {
                    if (context is StatefulElement &&
                        context.state != null &&
                        context.state.mounted) {
                      setState(() {
                        showIndicator = true;
                      });
                    }
                    await loadMoreRows();
                    if (context is StatefulElement &&
                        context.state != null &&
                        context.state.mounted) {
                      setState(() {
                        showIndicator = false;
                      });
                    }
                  },
                ),
              ),
            );
          }
        });
      },
      columns: <GridColumn>[
          GridColumn(columnName: 'id', label: Text('ID')),
          GridColumn(columnName: 'name', label: Text('Name')),
          GridColumn(columnName: 'designation', label: Text('Designation')),
          GridColumn(columnName: 'salary', label: Text('Salary')),
      ],
    ),
  );
}

Implementation

final LoadMoreViewBuilder? loadMoreViewBuilder;