syncfusion/flutter-examples

if the table is editing table then if when press enter it actives the text field in the grid I have tried it to implement in the data source also by using keyboard event nothings work if there is aa way out lmk

minahil57 opened this issue · 2 comments

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
},
),
);
}
}

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.

Regards,
Abinesh P

Hi @minahil57,

We suspect that the reported issue has been resolved at your end. We are closing this issue now. If you need any further assistance, you can reopen this issue. We are always happy to help you.

Regards,
Ashok K