abineshPalanisamy
commented
1 month ago Hi @abdulrehmananwar ,
Based on the details provided, we have modified the sample to meet your expectations. In the updated sample, when you press the up or down arrow keys, the focus remains on the DataGrid, and scrolling occurs according to the current selection. Additionally, the TextField has been implemented to facilitate filtering within the DataGrid.
We’ve included a modified sample for your reference. Please review it for further details.
- Sample: SfDataGrid.zip
Regards, Abinesh P
abdulrehmananwar
ashok-kuvaraja
Use case
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:syncfusion_flutter_datagrid/datagrid.dart';
class TextFieldAndDataGrid extends StatefulWidget { @override _TextFieldAndDataGridState createState() => _TextFieldAndDataGridState(); }
class _TextFieldAndDataGridState extends State {
final TextEditingController _textController = TextEditingController();
final FocusNode _dataGridFocusNode = FocusNode(); // FocusNode for DataGrid
final DataGridController _dataGridController = DataGridController();
List _employees = [];
int _currentSelectedIndex = 0;
@override void initState() { super.initState();
}
@override void dispose() { _textController.dispose(); _dataGridFocusNode.dispose(); _dataGridController.dispose(); super.dispose(); }
@override Widget build(BuildContext context) { return Scaffold( body: RawKeyboardListener( focusNode: _dataGridFocusNode, // Focus on DataGrid for keyboard events onKey: (RawKeyEvent event) { if (event is RawKeyDownEvent) { if (event.logicalKey == LogicalKeyboardKey.arrowDown) { // Move to the next row if possible if (_currentSelectedIndex < _employees.length - 1) { _currentSelectedIndex++; _dataGridController.selectedIndex = _currentSelectedIndex; _dataGridController.scrollToRow(_currentSelectedIndex.toDouble()); _updateTextField('ArrowDown'); // Reflect keypress in TextField } } else if (event.logicalKey == LogicalKeyboardKey.arrowUp) { // Move to the previous row if possible if (_currentSelectedIndex > 0) { _currentSelectedIndex--; _dataGridController.selectedIndex = _currentSelectedIndex; _dataGridController.scrollToRow(_currentSelectedIndex.toDouble()); _updateTextField('ArrowUp'); // Reflect keypress in TextField } } else { // For any other key pressed, reflect the key in the TextField _updateTextField(event.logicalKey.keyLabel); } } }, child: Column( children: [ Padding( padding: const EdgeInsets.all(8.0), child: TextField( controller: _textController, decoration: InputDecoration(labelText: 'Keypresses will show here'), readOnly: true, // Make the TextField read-only so we control input ), ), Expanded( child: SfDataGrid( source: EmployeeDataSource(_employees), controller: _dataGridController, selectionMode: SelectionMode.single, columns:[
GridColumn(
columnName: 'id',
label: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text('ID'),
),
),
GridColumn(
columnName: 'name',
label: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text('Name'),
),
),
GridColumn(
columnName: 'designation',
label: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text('Designation'),
),
),
],
),
),
],
),
),
);
}
// Update the TextField with the key pressed void _updateTextField(String key) { setState(() { _textController.text = key; }); } }
// Data model for the Employee class Employee { Employee(this.id, this.name, this.designation); final int id; final String name; final String designation; }
// DataSource class for DataGrid class EmployeeDataSource extends DataGridSource { EmployeeDataSource(this.employees) { dataGridRows = employees .map((e) => DataGridRow(cells: [
DataGridCell(columnName: 'id', value: e.id),
DataGridCell(columnName: 'name', value: e.name),
DataGridCell(columnName: 'designation', value: e.designation),
]))
.toList();
}
List dataGridRows = [];
List employees = [];
@override List get rows => dataGridRows;
@override DataGridRowAdapter buildRow(DataGridRow row) { return DataGridRowAdapter( cells: row.getCells().map((dataGridCell) {
return Container(
alignment: Alignment.center,
padding: EdgeInsets.all(8.0),
child: Text(dataGridCell.value.toString()),
);
}).toList(),
);
}
}
// Sample data for employees (30 rows) List getEmployees() {
return List.generate(30, (index) => Employee(index + 1, 'Employee $index', 'Designation $index'));
}
Proposal
https://github.com/user-attachments/assets/e1db6017-63bc-4446-877e-b7a6b3838fb5
i want basically same pattren like when dialog is open there is one textfield and one gridview what is want is 1- when dialog open default datagridview first row selected. also which key i press it inputing the data into textfield 2- when i click arrow up or arrow down same time my datagridview row focus is moving 3- it also scrolling if arrow is going doing and same time if i press any keyboard keyword same time its also typing and filtering.