loadMoreViewBuilder property
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;