-Set the footer frozen rows count at the bottom of the SfDataGrid.
+Set the footer rows count at the bottom of the SfDataGrid.
|
|
-Set the footer frozen columns on the right side of the SfDataGrid.
- |
-|
| -frozenPaneElevation - | --Customize the elevation effect applied to frozen panes. Default value is 5.0. Set to 0.0 to remove elevation and display only the frozen pane line. - | -
| -frozenPaneLineColor - | --Customize the color of the line displayed at the edge of frozen panes. - | -
| -frozenPaneLineWidth - | -
-Customize the width of the line displayed at the edge of frozen panes.
+Set the footer columns on the right side of the SfDataGrid.
|
-> **Note:**
->* To reorder the columns in the DataGrid, create an instance variable to hold the columns and then assign that instance to the [SfDataGrid.columns](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/columns.html) property instead of directly assigning a list literal. This allows you to reorder the collection within the callback, maintaining the desired column order.
->* After reordering columns, rebuild the rows based on the updated columns collection by calling `buildDataGridRows()` and `notifyListeners()`. This is necessary because the column index may change after reordering. By rebuilding the rows, you ensure that the row data aligns correctly with the reordered columns.
->* Download the complete sample application from [GitHub](https://github.com/SyncfusionExamples/how-to-perform-column-drag-and-drop-in-flutter-datatable-sfdatagrid).
+>**NOTE**:
+* You can download the demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-perform-column-drag-and-drop-in-flutter-datatable-sfdatagrid).
+* To reorder the columns in the DataGrid, you should create an instance to hold the columns and then assign that instance to
+the [SfDataGrid.columns](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/columns.html) property instead of directly assigning the list of GridColumn. This allows you to reorder the collection within the callback, maintaining the desired column order.
+* Additionally, it is important to build the rows based on the columns collection after reordering. This is necessary because
+the column index may change after the columns have been rearranged. By rebuilding the rows based on the updated columns collection, you ensure that the row data aligns correctly with the reordered columns.
## onColumnDragging callback
-The [SfDataGrid.onColumnDragging](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onColumnDragging.html) callback is triggered during column drag operations. This callback provides the following properties in the [DataGridColumnDragDetails](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragDetails-class.html):
+The `SfDataGrid.onColumnDragging` callback is triggered when the column drags. This callback provides the following properties in the [DataGridColumnDragDetails](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragDetails-class.html).
-* [from](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragDetails/from.html): The index of the currently dragging column. Use this to identify which column is being moved.
-* [to](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragDetails/to.html): The index where the column will be dropped. This is null during drag updates and populated when the column is dropped.
-* [action](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragDetails/action.html): Indicates the drag action as a [DataGridColumnDragAction](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragAction.html) enum. The `update` action fires while dragging, and `dropped` fires when the column is released.
-* [offset](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragDetails/offset.html): The current offset of the dragging column during the drag operation. Use this to calculate the drag position if needed.
+* [from](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragDetails/from.html): Returns index of the currently dragging column.
+* [to](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragDetails/to.html): Returns index of the column after being dropped.
+* [action](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragDetails/action.html): Returns the column dragging details as the [DataGridColumnDragAction](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragAction.html) enum.
+* [offset](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridColumnDragDetails/offset.html): Returns the current offset of the dragging column.
## Cancel the column dropping for a specific column
-You can cancel the column dropping at a specific target column by returning `false` from the [SfDataGrid.onColumnDragging](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onColumnDragging.html) callback. This allows you to prevent columns from being dropped at certain positions or restrict specific columns from being dropped.
-
-In the following example, columns cannot be dropped at index 2 (the third column position):
+You can cancel the column dropping at a specific column by returning `false` from the `SfDataGrid.onColumnDragging` callback. This allows you to restrict the column dropping for a specific column.
{% tabs %}
{% highlight Dart %}
@@ -217,21 +118,17 @@ In the following example, columns cannot be dropped at index 2 (the third column
allowColumnsDragging: true,
columns: columns,
onColumnDragging: (DataGridColumnDragDetails details) {
- // Prevent dropping at column index 2
if (details.action == DataGridColumnDragAction.update &&
details.to == 2) {
return false;
}
- // Handle the drop action
if (details.action == DataGridColumnDragAction.dropped &&
- details.to != null &&
- details.from >= 0 &&
- details.from < columns.length) {
+ details.to != null) {
final GridColumn rearrangeColumn = columns[details.from];
columns.removeAt(details.from);
columns.insert(details.to!, rearrangeColumn);
employeeDataSource.buildDataGridRows();
- employeeDataSource.notifyListeners();
+ employeeDataSource.refreshDataGrid();
}
return true;
},
@@ -244,7 +141,7 @@ In the following example, columns cannot be dropped at index 2 (the third column
## Changing the feedback widget
-The DataGrid allows you to customize the feedback widget displayed during column dragging by using the [SfDataGrid.columnDragFeedbackBuilder](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/columnDragFeedbackBuilder.html) builder. This builder is called during drag operations and allows you to return a custom widget that represents the dragged column.
+The DataGrid allows you to change the drag feedback widget by returning a custom widget from the [SfDataGrid.columnDragFeedbackBuilder](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/columnDragFeedbackBuilder.html) builder. This allows you to change the drag feedback widget according to your requirements.
{% tabs %}
{% highlight Dart %}
@@ -257,18 +154,17 @@ The DataGrid allows you to customize the feedback widget displayed during column
source: employeeDataSource,
allowColumnsDragging: true,
columns: columns,
- columnDragFeedbackBuilder: (BuildContext context, GridColumn column) {
+ columnDragFeedbackBuilder: (context, column) {
return Container(
height: 50,
width: column.actualWidth,
- color: Colors.teal[400],
+ color: Colors.grey,
child: const Center(
child: DefaultTextStyle(
style: TextStyle(
fontSize: 14,
- color: Colors.yellow,
- fontWeight: FontWeight.bold,
- ),
+ color: Colors.pink,
+ fontWeight: FontWeight.bold),
child: Text('Drag View'),
),
),
@@ -276,14 +172,12 @@ The DataGrid allows you to customize the feedback widget displayed during column
},
onColumnDragging: (DataGridColumnDragDetails details) {
if (details.action == DataGridColumnDragAction.dropped &&
- details.to != null &&
- details.from >= 0 &&
- details.from < columns.length) {
+ details.to != null) {
final GridColumn rearrangeColumn = columns[details.from];
columns.removeAt(details.from);
columns.insert(details.to!, rearrangeColumn);
employeeDataSource.buildDataGridRows();
- employeeDataSource.notifyListeners();
+ employeeDataSource.refreshDataGrid();
}
return true;
},
@@ -298,19 +192,22 @@ The DataGrid allows you to customize the feedback widget displayed during column
## Drag indicator customization
-The color and thickness of the drag indicator displayed during column dragging can be customized using the [SfDataGridThemeData.columnDragIndicatorColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/columnDragIndicatorColor.html) and [SfDataGridThemeData.columnDragIndicatorStrokeWidth](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/columnDragIndicatorStrokeWidth.html) properties. These properties are available in the `syncfusion_flutter_core` package through the [SfDataGridTheme](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridTheme-class.html) widget.
+The color and thickness of the drag indicator can be customized by the [SfDataGridThemeData.columnDragIndicatorColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/columnDragIndicatorColor.html) and [SfDataGridThemeData.columnDragIndicatorStrokeWidth](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/columnDragIndicatorStrokeWidth.html) properties.
-> **Note:**
->* The `SfDataGridThemeData` and `SfDataGridTheme` classes are available in the `syncfusion_flutter_core` package.
->* Import the theme package: `import 'package:syncfusion_flutter_core/theme.dart';`
-
-The following code demonstrates how to customize the drag indicator appearance:
+The `SfDataGridThemeData` and `SfDataGridTheme` classes are available in the `syncfusion_flutter_core` package. So, import the following file.
{% tabs %}
{% highlight Dart %}
import 'package:syncfusion_flutter_core/theme.dart';
-import 'package:syncfusion_flutter_datagrid/datagrid.dart';
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code describes how to change the drag indicator color and thickness by using [SfDataGridTheme](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridTheme-class.html).
+
+{% tabs %}
+{% highlight Dart %}
@override
Widget build(BuildContext context) {
@@ -319,22 +216,19 @@ import 'package:syncfusion_flutter_datagrid/datagrid.dart';
body: SfDataGridTheme(
data: SfDataGridThemeData(
columnDragIndicatorColor: Colors.pink,
- columnDragIndicatorStrokeWidth: 3,
- ),
+ columnDragIndicatorStrokeWidth: 3),
child: SfDataGrid(
source: employeeDataSource,
allowColumnsDragging: true,
columns: columns,
onColumnDragging: (DataGridColumnDragDetails details) {
if (details.action == DataGridColumnDragAction.dropped &&
- details.to != null &&
- details.from >= 0 &&
- details.from < columns.length) {
+ details.to != null) {
final GridColumn rearrangeColumn = columns[details.from];
columns.removeAt(details.from);
columns.insert(details.to!, rearrangeColumn);
employeeDataSource.buildDataGridRows();
- employeeDataSource.notifyListeners();
+ employeeDataSource.refreshDataGrid();
}
return true;
},
diff --git a/Flutter/datagrid/column-types.md b/Flutter/datagrid/column-types.md
index 92b199a03..049b42ef3 100644
--- a/Flutter/datagrid/column-types.md
+++ b/Flutter/datagrid/column-types.md
@@ -1,15 +1,15 @@
---
layout: post
-title: Column in Flutter DataGrid | DataTable | Syncfusion
-description: Learn here all about how to add columns to Syncfusion Flutter DataGrid (SfDataGrid) control and more.
+title: Column types in Flutter DataGrid | Syncfusion®
+description: Learn how to add and configure columns in Syncfusion® Flutter DataGrid including column types, customization options, and data binding.
platform: flutter
control: SfDataGrid
documentation: ug
---
-# Column Types in Flutter DataGrid (SfDataGrid)
+# Column Types in Flutter DataGrid
-[SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) provides support for loading any type of widget in each column. The `SfDataGrid` supports two main column types: `GridColumn` for standard data binding and a `Checkbox` column for row selection. This document covers the features and customization options available for each column type.
+[SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) provides support for loading any type of widget in each column.
## GridColumn
@@ -17,7 +17,7 @@ GridColumn is a class that provides base functionalities for all the column type
### Mapping column to a property
-The column can be bound to a property in a data object using the [GridColumn.columnName](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/columnName.html) property. The [label](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/label.html) property is used to display the required widget in a column header. The `columnName` must match the property name in your data model for automatic data binding.
+The column can be bound to a property in a data object using the [GridColumn.columnName](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/columnName.html) property. The [label](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/label.html) is used to display the required widget in a column header.
{% tabs %}
{% highlight Dart %}
@@ -84,7 +84,8 @@ The column can be bound to a property in a data object using the [GridColumn.col
[GridColumn.visible](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/visible.html) property can be used to set a column as hidden. The default value of the `visible` property is true.
-> **Note:** Set the `visible` property to `false` instead of setting column width as `0` to hide a column.
+>**NOTE**
+>Set the `visible` property to `false` instead of setting column width as `0` to hide a column.
{% tabs %}
{% highlight Dart %}
@@ -150,9 +151,10 @@ The column can be bound to a property in a data object using the [GridColumn.col
### Set manual width for a column
-[SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) allows you to customize the width of each [GridColumn](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn-class.html) in the [SfDataGrid.columns](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/columns.html) collection. To customize column width, use the [GridColumn.width](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/width.html) property. Specify the width value in logical pixels. By default, this property will not be assigned any value, and the column renders based on the [SfDataGrid.defaultColumnWidth](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/defaultColumnWidth.html) property.
+[SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) allows you to customize the width of each [GridColumn](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn-class.html) in the [SfDataGrid.columns](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/columns.html) collection. To customize column width, use the [GridColumn.width](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/width.html) property. By default, this property will not be assigned any value. The GridColumn renders in view based on the value of the [defaultColumnWidth](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/defaultColumnWidth.html) property.
-> **Note:** Set the `visible` property to `false` instead of setting column width as `0` to hide a column.
+>**NOTE**
+>Set the `visible` property to `false` instead of setting column width as `0` to hide a column.
{% tabs %}
{% highlight Dart %}
@@ -218,9 +220,9 @@ The column can be bound to a property in a data object using the [GridColumn.col
## Checkbox column
-By setting the [showCheckboxColumn](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/showCheckboxColumn.html) property to `true`, you can select or deselect individual rows using checkboxes in each row. The checkbox column will be added as the first column in the grid.
+By setting the [showCheckboxColumn](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/showCheckboxColumn.html) property to `true`, you can select or deselect individual rows using checkboxes in each row. The checkbox column will be added as the first column.
-> **Note:** Row selection is applied only if you set the [SfDataGrid.selectionMode](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/selectionMode.html) property to a value other than `none`. The checkbox state automatically synchronizes with the row selection state.
+The selection is applied to rows only if you set the [SfDataGrid.selectionMode](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/selectionMode.html) property other than `none.`
{% tabs %}
{% highlight Dart %}
@@ -289,7 +291,7 @@ By setting the [showCheckboxColumn](https://pub.dev/documentation/syncfusion_flu
### Show text in the header cell
-Display widgets along with the checkbox in the header cell by adding a widget to the [DataGridCheckboxColumnSettings.label](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxColumnSettings/label.html) property. This allows you to add custom text or icons above or beside the checkbox in the header.
+Display widgets along with the checkbox in the header cell by adding a widget to the [SfDataGrid.checkboxColumnSettings.label](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxColumnSettings/label.html) property.
{% tabs %}
{% highlight Dart %}
@@ -360,9 +362,9 @@ Display widgets along with the checkbox in the header cell by adding a widget to
-### Hide the checkbox in the header cell
+### Disable the checkbox in the header cell
-By default, a checkbox is displayed in the header cell. By setting the [DataGridCheckboxColumnSettings.showCheckboxOnHeader](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxColumnSettings/showCheckboxOnHeader.html) property to `false`, the checkbox can be hidden from the header cell while keeping checkboxes in data rows.
+By default, a checkbox is displayed in the header cell. By setting the [SfDataGrid.checkboxColumnSettings.showCheckboxOnHeader](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxColumnSettings/showCheckboxOnHeader.html) property to `false`, the checkbox can be hidden in the header cell.
{% tabs %}
{% highlight Dart %}
@@ -433,7 +435,7 @@ By default, a checkbox is displayed in the header cell. By setting the [DataGrid
### Change the background color of the checkbox column
-The background color of the entire checkbox column can be customized by using the [DataGridCheckboxColumnSettings.backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxColumnSettings/backgroundColor.html) property. This property affects both the header and data rows of the checkbox column.
+The background color of the checkbox column can be customized by using the [SfDataGrid.checkboxColumnSettings.backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxColumnSettings/backgroundColor.html) property.
{% tabs %}
{% highlight Dart %}
@@ -504,9 +506,7 @@ The background color of the entire checkbox column can be customized by using th
### Get checked items
-Get the checked items by using the [DataGridController.selectedRows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController/selectedRows.html) property. The checkbox state and row selection state are synchronized, so you can retrieve checked rows through the controller's selection properties.
-
-> **Note:** Ensure the [DataGridController](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController-class.html) is assigned to the `SfDataGrid.controller` property for programmatic access to selection information.
+Get the checked items by using the [DataGridController.selectedRows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController/selectedRows.html) property because the selection and checkbox's checked states are the same.
{% tabs %}
{% highlight Dart %}
@@ -596,7 +596,7 @@ Get the checked items by using the [DataGridController.selectedRows](https://pub
### Change the shape of the checkbox column
-By default, checkboxes in the DataGrid appear as a square shape. Change the checkbox shape by setting the required [`ShapeBorder`](https://api.flutter.dev/flutter/painting/ShapeBorder-class.html) in the [SfDataGrid.checkboxShape](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/checkboxShape.html) property. You can use built-in shapes like `CircleBorder()`, `RoundedRectangleBorder()`, or create a custom shape.
+By default, the checkbox shows in the DataGrid as a square shape. Change the checkbox shape by setting the required shape in the [SfDataGrid.checkboxShape](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/checkboxShape.html) property.
{% tabs %}
{% highlight Dart %}
@@ -659,11 +659,11 @@ The `SfDataGrid` provides the following callback for checkbox interactions:
* [onCheckboxValueChanged](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onCheckboxValueChanged.html): This callback is triggered when the checkbox is selected or deselected, either by tapping on the checkbox or by selecting or deselecting a row (i.e., when the value of the checkbox changes).
-The [DataGridCheckboxValueChangedDetails](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxValueChangedDetails-class.html) object passed to the callback provides the following properties:
+The checkbox callbacks provide the following properties in their arguments:
-* [value](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxValueChangedDetails/value.html): A boolean representing the current state of the checkbox (`true` if checked, `false` if unchecked).
-* [row](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxValueChangedDetails/row.html): The [DataGridRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridRow-class.html) linked to the checkbox. If the checkbox is part of a column header, this value will be null.
-* [rowType](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxValueChangedDetails/rowType.html): A [RowType](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/RowType.html) enum value that indicates whether the checkbox is in a data row or header row.
+* [value](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxValueChangedDetails/value.html): Represents the current state of the checkbox.
+* [row](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxValueChangedDetails/row.html): Refers to the DataGridRow linked to the checkbox in the checkbox column. If the checkbox is part of a column header, the value will be null, indicating that it is not linked to any specific data row.
+* [rowType](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxValueChangedDetails/rowType.html): Defines the type of row associated with the checkbox. It indicates whether the checkbox value in a data row or header row has been modified.
{% tabs %}
{% highlight Dart %}
@@ -722,17 +722,15 @@ The [DataGridCheckboxValueChangedDetails](https://pub.dev/documentation/syncfusi
### Limitations
-The following are the limitations of the checkbox column:
-
-* The checkbox column does not support sorting or other data operations.
-* The checkbox column does not support stacked headers in combination with other columns.
-* The checkbox column is excluded from exporting operations (PDF, Excel, etc.).
+The following are the limitations of GridCheckboxColumn:
-## Column header icons on hover
+* The checkbox column does not support data operations such as sorting.
+* The checkbox column does not support adding the stacked headers along with other columns.
+* The checkbox column will be excluded in exporting operations.
-To display column header icons, such as sort and filter icons, when the mouse hovers over a column header, set the [SfDataGrid.showColumnHeaderIconOnHover](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/showColumnHeaderIconOnHover.html) property to `true`. This feature is available only on web and desktop platforms.
+## Show the column header icons on hover
-> **Note:** This feature requires the [SfDataGrid.allowSorting](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/allowSorting.html) or [SfDataGrid.allowFiltering](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/allowFiltering.html) properties to be enabled for the icons to appear.
+To display column header icons, such as sort and filter icons, when the mouse hovers over a column header, set the [SfDataGrid.showColumnHeaderIconOnHover](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/showColumnHeaderIconOnHover.html) property to true. This feature is available only on web and desktop platforms.
{% tabs %}
{% highlight Dart %}
diff --git a/Flutter/datagrid/columns-resizing.md b/Flutter/datagrid/columns-resizing.md
index 5cd934b16..f09d3176a 100644
--- a/Flutter/datagrid/columns-resizing.md
+++ b/Flutter/datagrid/columns-resizing.md
@@ -1,13 +1,13 @@
---
layout: post
-title: Columns Resizing in Flutter DataGrid | Syncfusion | DataTable
-description: Learn here all about how to resize a column in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
+title: Columns Resizing in Flutter DataGrid | Syncfusion®
+description: Learn how to resize columns in Syncfusion® Flutter DataGrid including user-driven resizing, customization options, and responsive layout management.
platform: flutter
control: SfDataGrid
documentation: ug
---
-# Columns Resizing in Flutter DataGrid (SfDataGrid)
+# Columns Resizing in Flutter DataGrid
The [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) provides support to resize the columns by dragging the right end of the column header. The column resizing can be enabled by setting the [SfDataGrid.allowColumnsResizing](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/allowColumnsResizing.html) property to `true`.
@@ -15,17 +15,14 @@ The [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/lates
The column resizing indicator appears based on the platform. In web and desktop platforms, the indicator appears when you hover over the right end of the column and drag it. In mobile platforms, the indicator comes into view when you long-press the corresponding column header.
-> **Note:** Column resizing considers the [GridColumn.minimumWidth](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/minimumWidth.html) and [GridColumn.maximumWidth](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/maximumWidth.html) properties. These limits are enforced to prevent columns from becoming too small or too large during resizing.
-
-## Basic Column Resizing
-
-The following example demonstrates the basic column resizing setup. The `columnWidths` map stores the width of each column. Initially, the `DataGrid` applies its default column sizing behavior, and the column widths are updated when the user manually resizes a column.
+> **NOTE:**
+> Column resizing considers the [GridColumn.minimumWidth](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/minimumWidth.html) and [GridColumn.maximumWidth](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/maximumWidth.html) properties.
{% tabs %}
{% highlight Dart %}
late Map
-#### Case-sensitive filtering
+#### Case sensitive filtering
-Case-sensitive filtering can be enabled for the column using the case-sensitive icon available in the advanced filter UI. This option is available only for text-based columns. When enabled, the filter comparison will be case-sensitive with respect to the filter text.
+Case-sensitive filtering can be enabled for the column using the casing icon available in the advanced filter UI. This is available only for the `TextFilters` filter view. If the icon is active, the filtering will be applied with the case sensitive with the filter text. The case-sensitive icon will be shown only to the string-type columns.
The following image shows the advanced filter popup menu with a case-sensitive icon,
@@ -614,124 +609,137 @@ The following image shows the advanced filter popup menu with a case-sensitive i
### Disable filtering for an individual column
-The [GridColumn.allowFiltering](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/allowFiltering.html) property has a higher priority than the `SfDataGrid.allowFiltering` property. Disable filtering for any particular column by setting the `GridColumn.allowFiltering` property to `false`.
+The [GridColumn.allowFiltering](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/allowFiltering.html) has a higher priority than the `SfDataGrid.allowFiltering` property. So, you can disable the filtering for any particular column by setting the `GridColumn.allowFiltering` property to `false`.
{% tabs %}
{% highlight Dart %}
-import 'package:syncfusion_flutter_datagrid/datagrid.dart';
-
@override
Widget build(BuildContext context) {
- return Scaffold(
- body: SfDataGrid(
- allowFiltering: true,
- source: _employeeDataSource,
- columnWidthMode: ColumnWidthMode.fill,
- columns: [
- GridColumn(
- allowFiltering: false,
- columnName: 'ID',
- label: Container(
- padding: EdgeInsets.symmetric(horizontal: 16.0),
- alignment: Alignment.centerRight,
- child: Text('ID', overflow: TextOverflow.ellipsis),
- ),
- ),
- GridColumn(
- columnName: 'Name',
- label: Container(
- padding: EdgeInsets.symmetric(horizontal: 16.0),
- alignment: Alignment.centerLeft,
- child: Text('Name', overflow: TextOverflow.ellipsis),
- ),
- ),
- GridColumn(
- columnName: 'Designation',
- label: Container(
- padding: EdgeInsets.symmetric(horizontal: 16.0),
- alignment: Alignment.centerLeft,
- child: Text('Designation', overflow: TextOverflow.ellipsis),
- ),
- ),
- GridColumn(
- columnName: 'Salary',
- label: Container(
- padding: EdgeInsets.symmetric(horizontal: 16.0),
- alignment: Alignment.centerRight,
- child: Text('Salary', overflow: TextOverflow.ellipsis),
- ),
- ),
- ],
- ),
+ return SfDataGrid(
+ allowFiltering: true,
+ source: _employeeDataSource,
+ columns: [
+ GridColumn(
+ allowFiltering: false,
+ columnName: 'ID',
+ label: Container(
+ padding: EdgeInsets.symmetric(horizontal: 16.0),
+ alignment: Alignment.centerRight,
+ child: Text(
+ 'ID',
+ overflow: TextOverflow.ellipsis,
+ )
+ )
+ ),
+ GridColumn(
+ columnName: 'Name',
+ label: Container(
+ padding: EdgeInsets.symmetric(horizontal: 16.0),
+ alignment: Alignment.centerLeft,
+ child: Text(
+ 'Name',
+ overflow: TextOverflow.ellipsis,
+ )
+ )
+ ),
+ GridColumn(
+ columnName: 'Designation',
+ label: Container(
+ padding: EdgeInsets.symmetric(horizontal: 16.0),
+ alignment: Alignment.centerLeft,
+ child: Text(
+ 'Designation',
+ overflow: TextOverflow.ellipsis,
+ )
+ )
+ ),
+ GridColumn(
+ columnName: 'Salary',
+ label: Container(
+ padding: EdgeInsets.symmetric(horizontal: 16.0),
+ alignment: Alignment.centerRight,
+ child: Text(
+ 'Salary',
+ overflow: TextOverflow.ellipsis,
+ )
+ )
+ ),
+ ]
);
}
{% endhighlight %}
{% endtabs %}
-## Filtering Callbacks
+## Callbacks
-The SfDataGrid provides callbacks to notify the filtering stages. These callbacks allow you to customize the filtering behavior and access filter condition details.
+The SfDataGrid provides the following callbacks to notify the filtering stages:
### OnFilterChanging callback
-The [onFilterChanging](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onFilterChanging.html) callback is invoked when filtering is being applied to a particular column through UI filtering. Return `false` from this callback to prevent filtering on that column.
+[onFilterChanging](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onFilterChanging.html) callback invokes when the filtering is being applied to the particular column through UI filtering. You can return `false` from this callback to restrict the column from being filtered.
{% tabs %}
{% highlight Dart %}
-import 'package:syncfusion_flutter_datagrid/datagrid.dart';
-
@override
Widget build(BuildContext context) {
- return Scaffold(
- body: SfDataGrid(
- source: _employeeDataSource,
- allowFiltering: true,
- onFilterChanging: (DataGridFilterChangeDetails details) {
- // Restrict filtering on the Salary column
- if (details.column.columnName == 'salary') {
- return false;
- }
- return true;
- },
- columnWidthMode: ColumnWidthMode.fill,
- columns: | Description | |||
|---|---|---|---|
expandAllGroup |
-Expands all the groups in the SfDataGrid | +DataGridController.expandAllGroup |
+Expands all the groups in the SfDataGrid |
collapseAllGroup |
-Collapses all the groups in the SfDataGrid | +DataGridController.collapseAllGroup. |
+Collapses all the groups in the SfDataGrid |
expandGroupsAtLevel |
-Expands the groups based on the group level | +DataGridController.expandGroupsAtLevel. |
+Expands the group based on the group level |
collapseGroupsAtLevel |
-Collapses the groups based on the group level | +DataGridController.collapseGroupsAtLevel. |
+Collapses the group based on the group level |
## Localization in Flutter DataPager (SfDataPager)
-By default, the [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) widget supports US English localizations. You can change the language by specifying the `MaterialApp` properties and adding the necessary localization packages to your application.
-
-The [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) supports two localization scenarios:
+By default, the [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) widget supports US English localizations. You can change the other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application.
-1. **Basic localization (UI labels)** - Using `flutter_localizations`
-2. **Complete localization (static strings)** - Using both `flutter_localizations` and `syncfusion_localizations`
-
-### Basic DataPager Localization
-
-To localize the basic UI elements, add `flutter_localizations` to your `pubspec.yaml` file:
+To use `flutter_localizations`, add the package as a dependency to the `pubspec.yaml` file.
{% highlight dart %}
@@ -133,272 +118,198 @@ flutter_localizations:
{% endhighlight %}
-> **Note:** Run `flutter pub get` to fetch the newly added dependency.
-
-Next, import the `flutter_localizations` library and specify [localizationsDelegates](https://api.flutter.dev/flutter/widgets/LocalizationsDelegate-class.html) and `supportedLocales` for `MaterialApp`:
+Next, import the `flutter_localizations` library and specify [localizationsDelegates](https://api.flutter.dev/flutter/widgets/LocalizationsDelegate-class.html) and `supportedLocales` for `MaterialApp`.
{% tabs %}
{% highlight Dart %}
import 'package:flutter_localizations/flutter_localizations.dart';
- List
-
-### Localize Static Strings in DataPager
+## Localize the static string in DataPager
-Static strings in the [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) (such as pagination labels and navigation text) can be localized using the [syncfusion_localizations](https://pub.dev/packages/syncfusion_localizations) package.
+Static strings in the data pager can be localized using the [syncfusion_localizations](https://pub.dev/packages/syncfusion_localizations) package and specifying `localizationsDelegates` in `MaterialApp`.
-To use `syncfusion_localizations`, add it as a dependency to the `pubspec.yaml` file:
+To use `syncfusion_localizations`, add the package as a dependency to the `pubspec.yaml` file.
{% highlight dart %}
dependencies:
-flutter_localizations:
- sdk: flutter
-syncfusion_localizations: ^34.1.29
+syncfusion_localizations: ^18.3.35
{% endhighlight %}
-> **Note:** Run `flutter pub get` to fetch the newly added dependencies.
-
-Next, import both `flutter_localizations` and `syncfusion_localizations` libraries:
+Next, import the `syncfusion_localizations` library.
{% highlight dart %}
-import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:syncfusion_localizations/syncfusion_localizations.dart';
{% endhighlight %}
-Then, declare the [SfGlobalLocalizations.delegate](https://pub.dev/documentation/syncfusion_localizations/latest/syncfusion_localizations/SfGlobalLocalizations/delegate-constant.html) in the `localizationsDelegates,` which is used to localize the static strings available in the DataPager and specify the `supportedLocales` as well:
+Then, declare the [SfGlobalLocalizations.delegate](https://pub.dev/documentation/syncfusion_localizations/latest/syncfusion_localizations/SfGlobalLocalizations/delegate-constant.html) in the `localizationsDelegates,` which is used to localize the static string available in the data pager and specify the `supportedLocales` as well.
{% tabs %}
{% highlight Dart %}
-final int rowsPerPage = 15;
-
-class Employee {
- Employee(this.id, this.name, this.designation, this.salary);
-
- final int id;
- final String name;
- final String designation;
- final int salary;
-}
+ final int rowsPerPage = 15;
@override
Widget build(BuildContext context) {
return MaterialApp(
- localizationsDelegates: const [
- GlobalMaterialLocalizations.delegate,
- GlobalWidgetsLocalizations.delegate,
- SfGlobalLocalizations.delegate,
- ],
- supportedLocales: const [Locale('zh'), Locale('ar'), Locale('ja')],
- locale: const Locale('zh'),
- home: Scaffold(
- appBar: AppBar(title: const Text('DataPager')),
- body: LayoutBuilder(
- builder: (context, constraints) {
- return Column(
- children: [
- SizedBox(
- height: constraints.maxHeight - 60,
- width: constraints.maxWidth,
- child: SfDataGrid(
- source: _employeeDataSource,
- columns:
diff --git a/Flutter/datagrid/overview.md b/Flutter/datagrid/overview.md
index c1651dc37..64b6e6e96 100644
--- a/Flutter/datagrid/overview.md
+++ b/Flutter/datagrid/overview.md
@@ -1,65 +1,39 @@
---
layout: post
-title: About Flutter DataGrid widget | DataTable | Syncfusion®
-description: Learn about the introduction of the Syncfusion® Flutter DataGrid (SfDataGrid) widget, its features, and more.
+title: About Syncfusion Flutter DataGrid Control | Syncfusion®
+description: Learn about the Syncfusion® Flutter DataGrid widget, its powerful features, and capabilities for displaying, managing, and interacting with data efficiently.
platform: flutter
control: SfDataGrid
documentation: ug
---
-# Flutter DataGrid (SfDataGrid) Overview
+# About Syncfusion Flutter DataGrid Control
The Syncfusion® Flutter DataGrid is used to display and manipulate data in a tabular view. It is built from the ground up to achieve the best possible performance, even when loading large amounts of data.
-## Key Features
-
-### Data Presentation
-* [**Column types**](column-types.md) - Display any widget in each column, allowing for flexible content presentation.
-* [**Column sizing**](columns-sizing.md) - Configure column widths with various sizing options. Automatically adjust columns based on cell content to enhance readability.
-* [**Row height**](row-height-customization.md) - Customize heights for header and data rows. Automatically adjust row heights based on cell content. Set different heights for specific rows as needed.
-* [**Styling**](styles.md) - Customize the appearance of cells and headers with support for conditional styling.
-* [**Stacked headers**](stacked-headers.md) - Create unbound header rows that span across multiple rows and columns.
-* [**Footer**](footer.md) - Show an additional row that can be displayed under the last row. Widgets can also be displayed in the footer row.
-
-### Data Manipulation
-* [**Editing**](editing.md) - Enable users to modify cell values with support for custom editor widgets based on column types.
-* [**Sorting**](sorting.md) - Sort data in ascending or descending order across single or multiple columns.
-* [**Filtering**](filtering.md) - Filter data interactively similar to Excel with support for text, numeric, and date-time filtering. Programmatic filtering is also available.
-* [**Selection**](selection.md) - Select one or more rows with keyboard navigation support for web platforms.
-* [**Swiping**](swiping.md) - Implement swipe actions (left-to-right or right-to-left) for operations like deleting or editing rows.
-
-### Layout and Navigation
-* [**Column Drag and Drop**](column-drag-and-drop.md) - Reorder columns by dragging and dropping them to desired positions.
-* [**Column resizing**](columns-resizing.md) - Adjust column widths by dragging the right edge of column headers.
-* [**Freeze Panes**](freeze-panes.md) - Freeze the rows and columns when scrolling the grid.
-* [**Scrolling**](scrolling.md) - Scroll through large datasets efficiently with optimized rendering.
-
-### Data Loading and Performance
-* [**Load more**](load-more.md) - Display an interactive view when scrolling reaches the bottom of the grid, enabling on-demand data loading.
-* [**Paging**](paging.md) - Load data in segments. It is useful when loading huge amounts of data.
-* [**Pull to refresh**](pull-to-refresh.md) - Allows users to refresh data when the DataGrid is pulled down.
-
-### Export and Integration
-* [**Exporting**](export-to-excel.md) - Export data to [Excel](export-to-excel.md) and [PDF](export-to-pdf.md) formats.
-* [**Grouping**](grouping.md) - Group rows by one or more columns for better data organization.
-* [**Summaries**](summaries.md) - Display aggregate values for grouped or all data.
-### Customization and Accessibility
-* [**Theme**](https://help.syncfusion.com/flutter/themes) - Use a dark or light theme.
-* [**Accessibility**](accessibility.md) - Ensure screen readers can properly access and navigate the DataGrid.
-* [**Right to Left (RTL)**](right-to-left.md) - Support right-to-left layouts for languages like Hebrew and Arabic.
-* [**Localization**](localization.md) - Support multiple languages and regional formats.
-
-## Getting Started
-
-To start using the SfDataGrid widget in your Flutter application, refer to the [Getting Started with Flutter DataGrid](getting-started.md) documentation.
-
-## API Reference
-
-For a complete list of properties, methods, and events of the SfDataGrid widget, refer to the [SfDataGrid API documentation](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html).
-
-## Sample GitHub Repository
+## Key Features
-You can download a complete working sample from the [GitHub repository](https://github.com/SyncfusionExamples/getting-started-with-flutter-datagrid) to explore the SfDataGrid widget with various features implemented.
+* **Column types** - Display any widget in each column, allowing for flexible content presentation.
+* **Column sizing** - Configure column widths with various sizing options. Automatically adjust columns based on cell content to enhance readability.
+* **Row height** - Customize heights for header and data rows. Automatically adjust row heights based on cell content. Set different heights for specific rows as needed.
+* **Editing** - Enable users to modify cell values with support for custom editor widgets based on column types.
+* **Sorting** - Sort data in ascending or descending order across single or multiple columns.
+* **Selection** - Select one or more rows with keyboard navigation support for web platforms.
+* **Filtering** - Filter data interactively similar to Excel with support for text, numeric, and date-time filtering. Programmatic filtering is also available.
+* **Column Drag and Drop** - Reorder columns by dragging and dropping them to desired positions.
+* **Column resizing** - Adjust column widths by dragging the right edge of column headers.
+* **Exporting** - Export data to Excel and PDF formats.
+* **Styling** - Customize the appearance of cells and headers with support for conditional styling.
+* **Stacked headers** - Create unbound header rows that span across multiple rows and columns.
+* **Load more** - Display an interactive view when scrolling reaches the bottom of the grid, enabling on-demand data loading.
+* **Paging** - Load data in segments. It is useful when loading huge amounts of data.
+* **Freeze Panes** - Freeze the rows and columns when scrolling the grid.
+* **Swiping** - Implement swipe actions (left-to-right or right-to-left) for operations like deleting or editing rows.
+* **Footer** - Show an additional row that can be displayed under the last row. Widgets can also be displayed in the footer row.
+* **Pull to refresh** - Allows users to refresh data when the DataGrid is pulled down.
+* **Theme** - Use a dark or light theme.
+* **Accessibility** - Ensure screen readers can properly access and navigate the DataGrid.
+* **Right to Left (RTL)** - Support right-to-left layouts for languages like Hebrew and Arabic.
diff --git a/Flutter/datagrid/paging.md b/Flutter/datagrid/paging.md
index 59f05de34..af73d963c 100644
--- a/Flutter/datagrid/paging.md
+++ b/Flutter/datagrid/paging.md
@@ -1,50 +1,31 @@
---
layout: post
-title: Paging in Flutter DataGrid | DataPager | Syncfusion
-description: Learn about the paging feature and how to customize its appearance in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
+title: Paging in Flutter DataGrid | Syncfusion®
+description: Learn how to use paging in Syncfusion® Flutter DataGrid, including page navigation, data management, and appearance customization options.
platform: flutter
control: SfDataGrid
documentation: ug
---
-# Paging in Flutter DataGrid (SfDataGrid)
+# Paging in Flutter DataGrid
-The SfDataGrid interactively supports the manipulation of data using the [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) control. This provides support to load data in segments when dealing with large volumes of data. The `SfDataPager` can be placed above or below the SfDataGrid based on your requirement to easily manage data paging.
+The Datagrid interactively supports the manipulation of data using the [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) control. This provides support to load data in segments when dealing with large volumes of data. The `SfDataPager` can be placed above or under based on the requirement to easily manage data paging.
-The SfDataGrid performs paging of data using the `SfDataPager`. To enable paging, follow these steps
+The Datagrid performs paging of data using the `SfDataPager`. To enable paging, follow this procedure
* Create a new `SfDataPager` widget, and set the [SfDataGrid.DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html) to the [SfDataPager.delegate](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/delegate.html) property.
-* Set the number of pages required to be displayed in the data pager by setting the [SfDataPager.pageCount](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/pageCount.html) property to a `double` value.
+* Set the number of pages required to be displayed in the data pager by setting the [SfDataPager.pageCount](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/pageCount.html) property.
* Set the number of buttons that should be displayed in view by setting the [SfDataPager.visibleItemsCount](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/visibleItemsCount.html) property.
-* Load the data for a specific page in the [handlePageChange](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/handlePageChange.html) method. This method is called for every page navigation from the data pager. The method notifies listeners to refresh the UI.
+* Load the data for a specific page in the [handlePageChange](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/handlePageChange.html) method. This method is called for every page navigation from the data pager.
-> **Note:**
->- The `SfDataPager.visibleItemsCount` property default value is 5.
->- Required imports - Ensure you have imported `syncfusion_flutter_datagrid`, `syncfusion_flutter_core`, and any data model classes. The `DataGridSource` is an abstract class that you must extend with your custom implementation.
+N> The `SfDataPager.visibleItemsCount` property default value is 5.
-The following code example illustrates using the `SfDataPager` with the SfDataGrid control:
+The following code example illustrates using the `SfDataPager` with the Datagrid control:
{% tabs %}
{% highlight Dart %}
import 'package:intl/intl.dart';
-import 'package:syncfusion_flutter_datagrid/datagrid.dart';
-import 'package:syncfusion_flutter_core/theme.dart';
-
-// Define OrderInfo model class
-class OrderInfo {
- OrderInfo({
- required this.orderID,
- required this.customerID,
- required this.orderDate,
- required this.freight,
- });
-
- final int orderID;
- final String customerID;
- final DateTime orderDate;
- final double freight;
-}
final int _rowsPerPage = 15;
final double _dataPagerHeight = 60.0;
@@ -64,7 +45,7 @@ class OrderInfo {
height: _dataPagerHeight,
child: SfDataPager(
delegate: _orderInfoDataSource,
- pageCount: (_orders.length / _rowsPerPage).ceil().toDouble(),
+ pageCount: _orders.length / _rowsPerPage,
direction: Axis.horizontal,
))
]);
@@ -117,9 +98,7 @@ class OrderInfo {
class OrderInfoDataSource extends DataGridSource {
OrderInfoDataSource() {
- _paginatedOrders = _orders.isNotEmpty
- ? _orders.getRange(0, _orders.length > _rowsPerPage ? _rowsPerPage : _orders.length).toList(growable: false)
- : [];
+ _paginatedOrders = _orders.getRange(0, 19).toList(growable: false);
buildPaginatedDataGridRows();
}
@@ -206,9 +185,9 @@ class OrderInfoDataSource extends DataGridSource {
## Callbacks
-The [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) provides the [onPageNavigationStart](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onPageNavigationStart.html) and [onPageNavigationEnd](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onPageNavigationEnd.html) callbacks to listen to page navigation at the widget level.
+The SfDataPager provides the [onPageNavigationStart](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onPageNavigationStart.html) and [onPageNavigationEnd](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onPageNavigationEnd.html) callbacks to listen to the page navigation at the widget level.
-Typically, these callbacks are used to show and hide a loading indicator during page transitions.
+Typically, these callbacks are used to show and hide the loading indicator.
{% tabs %}
{% highlight Dart %}
@@ -226,14 +205,14 @@ Typically, these callbacks are used to show and hide a loading indicator during
height: 60,
width: constraints.maxWidth,
child: SfDataPager(
- pageCount: (_orders.length / _rowsPerPage).ceil().toDouble(),
+ pageCount: _orders.length / _rowsPerPage,
direction: Axis.horizontal,
onPageNavigationStart: (int pageIndex) {
- // Customize this callback when page navigation begins
+ //You can do your customization
},
delegate: _orderInfoDataSource,
onPageNavigationEnd: (int pageIndex) {
- // Customize this callback when page navigation completes
+ //You can do your customization
}))
])
]);
@@ -245,18 +224,18 @@ Typically, these callbacks are used to show and hide a loading indicator during
## Asynchronous data loading
-You can load data asynchronously to the `SfDataPager` by overriding the [handlePageChange](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/handlePageChange.html) method and awaiting the data fetch operation.
+You can load the data asynchronously to the `SfDataPager` by overriding the `handlePageChange` method and await the method while loading the data.
-Use the `onPageNavigationStart` and `onPageNavigationEnd` callbacks to show and hide a loading indicator when navigating between pages.
+You can use `onPageNavigationStart` and `onPageNavigationEnd` callbacks to show and hide the loading indicator when navigating between pages.
-In the below example, we simulate asynchronous data loading with a 2000ms delay and display the loading indicator during this time.
+In the below example, we have set await for 2000ms and displayed the loading indicator until 2000ms.
{% tabs %}
{% highlight Dart %}
import 'package:intl/intl.dart';
- bool showLoadingIndicator = false;
+ bool showLoadingIndicator = true;
@override
Widget build(BuildContext context) {
@@ -271,7 +250,7 @@ import 'package:intl/intl.dart';
height: 60,
width: constraints.maxWidth,
child: SfDataPager(
- pageCount: (_orders.length / _rowsPerPage).ceil().toDouble(),
+ pageCount: _orders.length / _rowsPerPage,
direction: Axis.horizontal,
onPageNavigationStart: (int pageIndex) {
setState(() {
@@ -316,9 +295,7 @@ import 'package:intl/intl.dart';
class OrderInfoDataSource extends DataGridSource {
OrderInfoDataSource() {
- _paginatedOrders = _orders.isNotEmpty
- ? _orders.getRange(0, _orders.length > _rowsPerPage ? _rowsPerPage : _orders.length).toList(growable: false)
- : [];
+ _paginatedOrders = _orders.getRange(0, 19).toList(growable: false);
buildPaginatedDataGridRows();
}
@@ -404,36 +381,25 @@ class OrderInfoDataSource extends DataGridSource {
-> **Note:** Download a complete demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-show-loading-indicator-on-loading-page-in-flutter-datatable).
+>**NOTE**
+ Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-show-loading-indicator-on-loading-page-in-flutter-datatable).
## Programmatic page navigation
-The `SfDataPager` provides support to navigate between pages programmatically using a [DataPagerController](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController-class.html) with the following methods:
+The `SfDataPager` provides the support to navigate between the pages programmatically using a [controller](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController-class.html) with the following options.
-* [nextPage()](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/nextPage.html) - Navigate to the next page
-* [previousPage()](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/previousPage.html) - Navigate to the previous page
-* [lastPage()](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/lastPage.html) - Navigate to the last page
-* [firstPage()](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/firstPage.html) - Navigate to the first page
+* [nextPage](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/nextPage.html)
+* [previousPage](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/previousPage.html)
+* [LastPage](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/lastPage.html)
+* [firstPage](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/firstPage.html)
-The following code example shows how to navigate to the previous page programmatically:
+The following code example shows how to navigate the previous page programmatically,
{% tabs %}
{% highlight Dart %}
- late DataPagerController _controller;
-
- @override
- void initState() {
- super.initState();
- _controller = DataPagerController();
- }
-
- @override
- void dispose() {
- _controller.dispose();
- super.dispose();
- }
+ DataPagerController _controller = DataPagerController();
@override
Widget build(BuildContext context) {
@@ -443,7 +409,7 @@ The following code example shows how to navigate to the previous page programmat
onPressed: () {
_controller.previousPage();
},
- child: Text('Move to Previous Page'),
+ child: Text('Move Previous page'),
),
SizedBox(
height: constraint.maxHeight - 120,
@@ -457,7 +423,7 @@ The following code example shows how to navigate to the previous page programmat
delegate: _orderInfoDataSource,
initialPageIndex: 2,
controller: _controller,
- pageCount: (_orders.length / _rowsPerPage).ceil().toDouble(),
+ pageCount: _orders.length / _rowsPerPage,
direction: Axis.horizontal,
)))
]);
@@ -469,25 +435,20 @@ The following code example shows how to navigate to the previous page programmat
## Show dropdown button to choose rows per page
-Display a dropdown button option to select a different number of rows per page by defining the [onRowsPerPageChanged](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onRowsPerPageChanged.html) callback. If it is null, no option will be provided to change the number of rows per page.
+Show the dropdown button option to select a different number of rows per page by defining the [onRowPerPageChanged](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onRowsPerPageChanged.html) callback. If it is null, no option will be provided to select a different number of rows per page.
-Use the [availableRowsPerPage](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/availableRowsPerPage.html) property to define the list of row counts displayed in the dropdown. The default value is [10, 15, 20].
+Use the [availableRowsPerPage](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/availableRowsPerPage.html) property to define the list of numbers to be displayed in the drop-down. The default value of the `availableRowsPerPage` property is [10,15,20].
-> **Note:** You can view the dropdown button by horizontally scrolling the SfDataPager. The dropdown button option is not supported when the [direction](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/direction.html) property is set to vertical.
+>**NOTE**
+ You can view dropdown button option by horizontally scrolling the DataPager. The dropdown button option is not supported, if the [direction](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/direction.html) is vertical.
{% tabs %}
{% highlight Dart %}
- int _rowsPerPage = 10;
+ int _rowsPerPage=10;
List| -Value +Enum | Description |
|---|---|
| -Axis.horizontal +horizontal | -This is the default value. Arranges all navigation buttons and page number buttons horizontally.{{''|markdownify}} +This is the default enum value for direction. Arranges all the navigation buttons and numeric buttons horizontally.{{''|markdownify}} |
| -Axis.vertical +vertical | -Arranges all navigation buttons and page number buttons vertically.{{''|markdownify}} +Arranges all the navigation buttons and numeric buttons vertically by setting Axis.vertical to direction property.{{''|markdownify}} |