|
1 | | -# How to perform editing in Flutter Datatable(SfDataGrid) |
2 | | - |
3 | | -In this example, you will learn how to enable the editing in SfDataGrid and perform committing the edited cell value in collection |
4 | | - |
5 | | -```xml |
6 | | -@override |
7 | | -Widget build(BuildContext context) { |
8 | | - return Scaffold( |
9 | | - body: SfDataGrid( |
10 | | - source: _employeeDataSource, |
11 | | - allowEditing: true, |
12 | | - selectionMode: SelectionMode.single, |
13 | | - navigationMode: GridNavigationMode.cell, |
14 | | - columns: [ |
15 | | - GridColumn( |
16 | | - columnName: 'id', |
17 | | - label: Container( |
18 | | - padding: EdgeInsets.symmetric(horizontal: 16.0), |
19 | | - alignment: Alignment.centerRight, |
20 | | - child: Text( |
21 | | - 'ID', |
22 | | - overflow: TextOverflow.ellipsis, |
23 | | - ), |
24 | | - ), |
25 | | - ), |
26 | | - GridColumn( |
27 | | - columnName: 'name', |
28 | | - label: Container( |
29 | | - padding: EdgeInsets.symmetric(horizontal: 16.0), |
30 | | - alignment: Alignment.centerLeft, |
31 | | - child: Text( |
32 | | - 'Name', |
33 | | - overflow: TextOverflow.ellipsis, |
34 | | - ), |
35 | | - ), |
36 | | - ), |
37 | | - GridColumn( |
38 | | - columnName: 'designation', |
39 | | - label: Container( |
40 | | - padding: EdgeInsets.symmetric(horizontal: 16.0), |
41 | | - alignment: Alignment.centerLeft, |
42 | | - child: Text( |
43 | | - 'Designation', |
44 | | - overflow: TextOverflow.ellipsis, |
45 | | - ), |
46 | | - ), |
47 | | - ), |
48 | | - GridColumn( |
49 | | - columnName: 'salary', |
50 | | - label: Container( |
51 | | - padding: EdgeInsets.symmetric(horizontal: 16.0), |
52 | | - alignment: Alignment.centerRight, |
53 | | - child: Text( |
54 | | - 'Salary', |
55 | | - overflow: TextOverflow.ellipsis, |
56 | | - ), |
57 | | - ), |
58 | | - ), |
59 | | - ], |
60 | | - ), |
61 | | - ); |
62 | | -} |
63 | | - |
64 | | -class EmployeeDataSource extends DataGridSource { |
65 | | - /// Helps to hold the new value of all editable widget. |
66 | | - /// Based on the new value we will commit the new value into the corresponding |
67 | | - /// DataGridCell on onCellSubmit method. |
68 | | - dynamic newCellValue; |
69 | | - |
70 | | - /// Help to control the editable text in [TextField] widget. |
71 | | - TextEditingController editingController = TextEditingController(); |
72 | | - |
73 | | - @override |
74 | | - void onCellSubmit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex, |
75 | | - GridColumn column) { |
76 | | - final dynamic oldValue = dataGridRow |
77 | | - .getCells() |
78 | | - .firstWhereOrNull((DataGridCell dataGridCell) => |
79 | | - dataGridCell.columnName == column.columnName) |
80 | | - ?.value ?? |
81 | | - ''; |
82 | | - |
83 | | - final int dataRowIndex = dataGridRows.indexOf(dataGridRow); |
84 | | - |
85 | | - if (newCellValue == null || oldValue == newCellValue) { |
86 | | - return; |
87 | | - } |
88 | | - |
89 | | - if (column.columnName == 'id') { |
90 | | - dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = |
91 | | - DataGridCell<int>(columnName: 'id', value: newCellValue); |
92 | | - _employees[dataRowIndex].id = newCellValue as int; |
93 | | - } else if (column.columnName == 'name') { |
94 | | - dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = |
95 | | - DataGridCell<String>(columnName: 'name', value: newCellValue); |
96 | | - _employees[dataRowIndex].name = newCellValue.toString(); |
97 | | - } else if (column.columnName == 'designation') { |
98 | | - dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = |
99 | | - DataGridCell<String>(columnName: 'designation', value: newCellValue); |
100 | | - _employees[dataRowIndex].designation = newCellValue.toString(); |
101 | | - } else { |
102 | | - dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = |
103 | | - DataGridCell<int>(columnName: 'salary', value: newCellValue); |
104 | | - _employees[dataRowIndex].salary = newCellValue as int; |
105 | | - } |
106 | | - } |
107 | | - |
108 | | - @override |
109 | | - Widget? buildEditWidget(DataGridRow dataGridRow, |
110 | | - RowColumnIndex rowColumnIndex, GridColumn column, CellSubmit submitCell) { |
111 | | - // Text going to display on editable widget |
112 | | - final String displayText = dataGridRow |
113 | | - .getCells() |
114 | | - .firstWhereOrNull((DataGridCell dataGridCell) => |
115 | | - dataGridCell.columnName == column.columnName) |
116 | | - ?.value |
117 | | - ?.toString() ?? |
118 | | - ''; |
119 | | - |
120 | | - // The new cell value must be reset. |
121 | | - // To avoid committing the [DataGridCell] value that was previously edited |
122 | | - // into the current non-modified [DataGridCell]. |
123 | | - newCellValue = null; |
124 | | - |
125 | | - final bool isTextAlignRight = |
126 | | - column.columnName == 'id' || column.columnName == 'salary'; |
127 | | - |
128 | | - final bool isNumericKeyBoardType = |
129 | | - column.columnName == 'id' || column.columnName == 'salary'; |
130 | | - |
131 | | - return Container( |
132 | | - padding: const EdgeInsets.all(8.0), |
133 | | - alignment: |
134 | | - isTextAlignRight ? Alignment.centerRight : Alignment.centerLeft, |
135 | | - child: TextField( |
136 | | - autofocus: true, |
137 | | - controller: editingController..text = displayText, |
138 | | - textAlign: isTextAlignRight ? TextAlign.right : TextAlign.left, |
139 | | - decoration: InputDecoration( |
140 | | - contentPadding: const EdgeInsets.fromLTRB(0, 0, 0, 16.0), |
141 | | - focusedBorder: UnderlineInputBorder( |
142 | | - borderSide: BorderSide(color: Colors.black))), |
143 | | - keyboardType: |
144 | | - isNumericKeyBoardType ? TextInputType.number : TextInputType.text, |
145 | | - onChanged: (String value) { |
146 | | - if (value.isNotEmpty) { |
147 | | - if (isNumericKeyBoardType) { |
148 | | - newCellValue = int.parse(value); |
149 | | - } else { |
150 | | - newCellValue = value; |
151 | | - } |
152 | | - } else { |
153 | | - newCellValue = null; |
154 | | - } |
155 | | - }, |
156 | | - onSubmitted: (String value) { |
157 | | - // In Mobile Platform. |
158 | | - // Call [CellSubmit] callback to fire the canSubmitCell and |
159 | | - // onCellSubmit to commit the new value in single place. |
160 | | - submitCell(); |
161 | | - }, |
162 | | - ), |
163 | | - ); |
164 | | - } |
165 | | -} |
166 | | -``` |
167 | | - |
168 | | - |
169 | | - |
170 | | -## Other useful links |
171 | | - |
172 | | - Check out the following resource to learn more about the Syncfusion Flutter DataGrid: |
173 | | - |
174 | | -* [Syncfusion Flutter DataGrid Editing UG page](https://help.syncfusion.com/flutter/datagrid/editing) |
175 | | -* [Syncfusion Flutter DataGrid product page](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) |
176 | | -* [User guide documentation](https://help.syncfusion.com/flutter/datagrid/overview) |
| 1 | +# Flutter DataGrid Enable Cell Editing |
| 2 | + |
| 3 | + |
| 4 | +This repository contains a sample that demonstrates how to enable the editing in Syncfusion® DataGrid package. |
| 5 | + |
| 6 | + |
| 7 | +## Syncfusion® controls: |
| 8 | + |
| 9 | + |
| 10 | +This project used the following Syncfusion® widget(s): |
| 11 | +* [DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) |
| 12 | + |
| 13 | + |
| 14 | +## Supported platforms |
| 15 | + |
| 16 | + |
| 17 | +Refer to the following link to know about the supported platform - [Platforms](https://help.syncfusion.com/flutter/system-requirements#supported-platforms) |
| 18 | + |
| 19 | + |
| 20 | +## Requirements to run the sample |
| 21 | + |
| 22 | + |
| 23 | +Refer to the following link to know about system requirements - [System Requirements](https://help.syncfusion.com/flutter/system-requirements) |
| 24 | + |
| 25 | + |
| 26 | +## How to run the sample |
| 27 | + |
| 28 | + |
| 29 | +1. Clone the sample and open it in preferred IDE. |
| 30 | +2. Run the application. |
| 31 | + |
| 32 | + |
| 33 | +*Note: If you download the sample using the "Download ZIP" option, right-click it, select Properties, and then select Unblock.* |
| 34 | + |
| 35 | + |
| 36 | +## License |
| 37 | + |
| 38 | + |
| 39 | +Syncfusion® has no liability for any damage or consequence that may arise by using or viewing the samples. The samples are for demonstrative purposes, and if you choose to use or access the samples, you agree to not hold Syncfusion® liable, in any form, for any damage that is related to use, for accessing, or viewing the samples. By accessing, viewing, or seeing the samples, you acknowledge and agree Syncfusion®’s samples will not allow you seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize, or otherwise do anything with Syncfusion®’s samples. |
0 commit comments