abineshPalanisamy
commented
3 months ago Hi @minahil57 ,
In SfDataGrid, you can modify key behaviors by overriding the handleKeyEvent() method in RowSelectionManager. Within handleKeyEvent(), check if the Enter key is pressed. Depending on the current cell's columnIndex, you can initiate either a dropdown opening or cell editing. In Flutter, directly triggering a dropdown list via shortcut keys within a loaded cell isn't feasible. Instead, you need to display a separate dropdown list with the corresponding details when the Enter key is pressed. You can use the Tab key to perform navigation.
We have included sample for your reference. Please consult the samples for further information and adapt them as per your requirements.
- Sample: SfDataGrid.zip
Regards, Abinesh P
ashok-kuvaraja
Use case
Scenario:
You have a data grid where users can edit cells directly. When a cell is in edit mode, pressing Enter should activate the TextField or DropDown for the current cell to allow for quick editing without additional clicks. Objective:
Ensure that pressing Enter while a cell is in edit mode focuses the text field or dropdown in the cell, allowing for immediate data entry or modification. Approach Track Current Edit Cell:
Maintain a reference to the currently active cell and its corresponding focus node. Handle Key Events:
Use RawKeyboardListener to detect when the Enter key is pressed. Activate the Appropriate Field:
Based on the type of editor (text field or dropdown), request focus on the field.
Proposal
class EditableDataGridCell extends StatefulWidget { final String displayText; final GridColumn column; final CellSubmit submitCell; // final bool isTextAlignRight; // final bool isNumericKeyBoardType; // final RegExp regExp; final FocusNode focusNode;
EditableDataGridCell({ required this.displayText, required this.column, required this.submitCell, // required this.isTextAlignRight, // required this.isNumericKeyBoardType, // required this.regExp, required this.focusNode, });
@override _EditableDataGridCellState createState() => _EditableDataGridCellState(); }
class _EditableDataGridCellState extends State {
late TextEditingController _controller;
@override void initState() { super.initState(); _controller = TextEditingController(text: widget.displayText); widget.focusNode.addListener(() { if (widget.focusNode.hasFocus) { // Ensure the text field is in focus when the focus node is active _controller.selection = TextSelection.fromPosition( TextPosition(offset: _controller.text.length), ); } }); }
@override void dispose() { _controller.dispose(); super.dispose(); }
@override Widget build(BuildContext context) { return KeyboardListener( focusNode: widget.focusNode, onKeyEvent: (KeyEvent event) { if (event is KeyDownEvent && event.logicalKey == LogicalKeyboardKey.enter) { widget.focusNode.requestFocus(); // Focus the text field return; // No need to return a result } }, child: TextField( autofocus: true, controller: _controller, focusNode: widget.focusNode, // textAlign: widget.isTextAlignRight ? TextAlign.right : TextAlign.left, autocorrect: false, decoration: const InputDecoration( contentPadding: EdgeInsets.fromLTRB(0, 0, 0, 16.0), focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.blue), ), ), style: TextStyle(fontSize: 14), cursorColor: Colors.blue, inputFormatters:[
// FilteringTextInputFormatter.allow(widget.regExp),
],
// keyboardType: widget.isNumericKeyBoardType ? TextInputType.number : TextInputType.text,
onChanged: (String value) {
if (value.isNotEmpty) {
// if (widget.isNumericKeyBoardType) {
// // Handle numeric values
// } else {
// // Handle text values
// }
} else {
// Handle empty values
}
},
onSubmitted: (String value) {
widget.submitCell(); // Submit the cell when Enter is pressed
},
),
);
}
}