|
1 | | -# How-to-manage-cell-editing-When-enabling-checkbox-in-Flutter-DataTable |
2 | | -How to manage cell editing When enabling checkbox in Flutter DataTable |
| 1 | +# How to manage cell editing and submission When enabling checkbox column in Flutter DataTable (SfDataGrid)? |
| 2 | + |
| 3 | +In this article, we will show you how to manage cell editing and submission When enabling checkbox column in [Flutter DataTable](https://www.syncfusion.com/flutter-widgets/flutter-datagrid). |
| 4 | + |
| 5 | +Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) widget with all required properties. To enable the checkbox column, set the [showCheckboxColumn](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/showCheckboxColumn.html) property to true at the sample level. In SfDataGrid, the checkbox column is always added as the first column. To resolve the column index on [onCellSubmit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/onCellSubmit.html) at the sample level, check if the showCheckboxColumn is enabled. This ensures that you can perform editing and submit the new cell value to the correct cell on the [DataGridRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridRow-class.html). |
| 6 | + |
| 7 | +```dart |
| 8 | +class EmployeeDataSource extends DataGridSource { |
| 9 | +
|
| 10 | +…. |
| 11 | + |
| 12 | +// To check whether the checkbox column is enabled. |
| 13 | + bool showCheckboxColumn = true; |
| 14 | +
|
| 15 | +@override |
| 16 | + Future<void> onCellSubmit(DataGridRow dataGridRow, |
| 17 | + RowColumnIndex rowColumnIndex, GridColumn column) async { |
| 18 | + final dynamic oldValue = dataGridRow |
| 19 | + .getCells() |
| 20 | + .firstWhereOrNull((DataGridCell dataGridCell) => |
| 21 | + dataGridCell.columnName == column.columnName) |
| 22 | + ?.value ?? |
| 23 | + ''; |
| 24 | +
|
| 25 | + final int dataRowIndex = _employeeData.indexOf(dataGridRow); |
| 26 | +
|
| 27 | + if (newCellValue == null || oldValue == newCellValue) { |
| 28 | + return; |
| 29 | + } |
| 30 | +
|
| 31 | + // Resolve the RowColumnIndex when showCheckboxColumn is true. |
| 32 | + if (showCheckboxColumn) { |
| 33 | + rowColumnIndex = RowColumnIndex( |
| 34 | + rowColumnIndex.rowIndex, rowColumnIndex.columnIndex - 1); |
| 35 | + } |
| 36 | +
|
| 37 | + if (column.columnName == 'ID') { |
| 38 | + _employeeData[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = |
| 39 | + DataGridCell<int>(columnName: 'ID', value: newCellValue); |
| 40 | + employees[dataRowIndex].id = newCellValue; |
| 41 | + } else if (column.columnName == 'Name') { |
| 42 | + _employeeData[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = |
| 43 | + DataGridCell<String>(columnName: 'Name', value: newCellValue); |
| 44 | + employees[dataRowIndex].name = newCellValue.toString(); |
| 45 | + } else if (column.columnName == 'Designation') { |
| 46 | + _employeeData[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = |
| 47 | + DataGridCell<String>(columnName: 'Designation', value: newCellValue); |
| 48 | + employees[dataRowIndex].designation = newCellValue.toString(); |
| 49 | + } else if (column.columnName == 'Salary') { |
| 50 | + _employeeData[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = |
| 51 | + DataGridCell<int>(columnName: 'Salary', value: newCellValue); |
| 52 | + employees[dataRowIndex].salary = newCellValue; |
| 53 | + } else if (column.columnName == 'Country') { |
| 54 | + _employeeData[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = |
| 55 | + DataGridCell<String>(columnName: 'Country', value: newCellValue); |
| 56 | + employees[dataRowIndex].country = newCellValue.toString(); |
| 57 | + } |
| 58 | + } |
| 59 | +} |
| 60 | +``` |
| 61 | + |
| 62 | +You can download the example from [GitHub](https://github.com/SyncfusionExamples/How-to-manage-cell-editing-When-enabling-checkbox-in-Flutter-DataTable). |
0 commit comments