Tamilarasan-Paranthaman
commented
2 years ago Hi @abdulrehmananwar,
In the DataGrid source, we didn’t set the top and left border. But you can set it by the sample level itself by using a container with the box decoration. In the second requirement, you need to remove the rows from the _employeeDataSource collection instead of removing them from the local dataGridRow alone. In the third one, you need to call the end edit from the controller when pressing the save button. We have prepared a sample as per your requirements. Please check the following sample code snippet.
Code Snippet:
In Button Click:
ElevatedButton(
onPressed: () {
FocusScope.of(context).notifyListeners();
_employees.add(Employee(0, '', '', 0));
_employeeDataSource =
EmployeeDataSource(_employees, dataGridRows);
_employeeDataSource.updateDataGridSource();
},
child: const Text('add new row')),
ElevatedButton(
onPressed: () {
FocusScope.of(context).notifyListeners();
_dataGridController.endEdit();
_employees.clear();
_employeeDataSource.dataGridRows.clear();
_employeeDataSource =
EmployeeDataSource(_employees, dataGridRows);
_employeeDataSource.updateDataGridSource();
},In Long Press PopupMenuItem:
final value = await showMenu<dynamic>(
context: context,
position: RelativeRect.fromLTRB(left, top, right, 0.0),
items: _options.entries.map<PopupMenuEntry>((entry) {
return PopupMenuItem(
value: entry.key,
child: SizedBox(
child: Row(
children: [
Icon(entry.value, color: Colors.redAccent),
const SizedBox(width: 10.0),
Text(entry.key)
],
),
),
onTap: () {
if (entry.key == "Remove Row") {
_employees.removeAt(index - 1);
_employeeDataSource.dataGridRows.removeAt(index - 1);
_employeeDataSource.updateDataGridSource();
}
},
);
}).toList());Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/main1837050188
We hope this helps. If we misunderstood anything, please modify the above sample based on your requirements. It will be helpful for us to check on it and provide you with the solution at the earliest
Regards, Tamilarasan P
abdulrehmananwar
this image show foucus on two cells. fist i remove that row where cell focused. when i add new row then focus again showing in that cell i want to clear the focus.
i am using TextField in all cells which show in editmode.
1st issue is focus which describe above
2nd issue is some time when i add and remove rows multiple times. when i try to add value some time single cell disabled and i unable to input in that cell. it happend some time dont know why
RenugaSadagoban98
still is selecting multi cell when i remove and add rows. 
when new row added next cell not auto in edit mode
class SfDataGridDemo extends StatefulWidget {
const SfDataGridDemo({Key? key}) : super(key: key);
List of Issue:- 1- Header Border not showing on top and left side. 2- on long press i have create function to remove row which is not removing row. 3- when i press save button all rows have to clear and grid should be reset. button showing issue on 4th step. 4- after pressing save button i press add button which added new row button some time focus remain on last row cell i cant to reset focus . my code is as below
import 'package:collection/collection.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:syncfusion_flutter_datagrid/datagrid.dart';
void main() { runApp(MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: SfDataGridDemo(title: 'Syncfusion SfDataGrid'))); }
class SfDataGridDemo extends StatefulWidget { SfDataGridDemo({Key? key, required this.title}) : super(key: key);
final String title;
@override _SfDataGridDemoState createState() => _SfDataGridDemoState(); }
class CustomSelectionManager extends RowSelectionManager { CustomSelectionManager(this.controller);
DataGridController controller;
@override void handleKeyEvent(RawKeyEvent keyEvent) { if (keyEvent.logicalKey == LogicalKeyboardKey.tab) { super.handleKeyEvent(keyEvent); controller.beginEdit(controller.currentCell); return; } super.handleKeyEvent(keyEvent); } }
class _SfDataGridDemoState extends State {
void _showPopup(BuildContext context,int index,Offset position) async { //get the render box from the context final RenderBox renderBox = context.findRenderObject() as RenderBox; //get the global position, from the widget local position // final offset = renderBox.localToGlobal(Offset.zero);
// + renderBox.size.height; //*The right does not indicates the width final right = left + renderBox.size.width; const Map<String, IconData> _options = { 'Remove Row' : Icons.remove_circle, };
// position: RelativeRect.fromLTRB(left, top, right, 0.0), items: _options.entries.map<PopupMenuEntry>((entry) {
return PopupMenuItem(
value: entry.key,
child: SizedBox(
// width: 200, //*width of popup
child: Row(
children: [
Icon(entry.value, color: Colors.redAccent),
const SizedBox(width: 10.0),
Text(entry.key)
],
),
),
onTap: (){
if (entry.key == "Remove Row") {
_employees.removeAt(index-1);
dataGridRows.removeAt(index-1);
_dataGridController.notifyListeners();
// print(value); }
late EmployeeDataSource _employeeDataSource; List _employees = [];
List dataGridRows = [];
late DataGridController _dataGridController; late CustomSelectionManager _customSelectionManager;
@override void initState() { super.initState(); _employees = getEmployeeData(); _employeeDataSource = EmployeeDataSource(_employees,dataGridRows); _dataGridController = DataGridController(); _customSelectionManager = CustomSelectionManager(_dataGridController); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('SfDataGrid Editing'), ), body: Column( children: [ Row(children: [ ElevatedButton( onPressed: () { FocusScope.of(context).notifyListeners(); _employees.add(Employee(0, '', '', 0)); _employeeDataSource = EmployeeDataSource(_employees,dataGridRows); _employeeDataSource.notifyListeners();
// columnWidthMode: ColumnWidthMode.fill, selectionManager: _customSelectionManager, editingGestureType: EditingGestureType.tap, columns: [ GridColumn( columnName: 'id', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'ID', overflow: TextOverflow.ellipsis, ), ), ), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Name', overflow: TextOverflow.ellipsis, ), ), ), GridColumn( columnName: 'designation', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Designation', overflow: TextOverflow.ellipsis, ), ), ), GridColumn( columnName: 'salary', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Salary', overflow: TextOverflow.ellipsis, ), ), ), ], ), ),
}
List getEmployeeData() {
return [
Employee(10010, 'Grimes', 'Developer', 15000)
];
}
}
class EmployeeDataSource extends DataGridSource { EmployeeDataSource(this._employees,this.dataGridRows) { dataGridRows = _employees .map((dataGridRow) => dataGridRow.getDataGridRow())
.toList();
}
List _employees = [];
List dataGridRows = [];
/// Helps to hold the new value of all editable widget. /// Based on the new value we will commit the new value into the corresponding /// [DataGridCell] on [onSubmitCell] method. dynamic newCellValue;
/// Help to control the editable text in [TextField] widget. TextEditingController editingController = TextEditingController();
@override List get rows => dataGridRows;
@override DataGridRowAdapter? buildRow(DataGridRow row) { return DataGridRowAdapter( cells: row.getCells().map((dataGridCell) {
return Container(
alignment: (dataGridCell.columnName == 'id' ||
dataGridCell.columnName == 'salary')
? Alignment.centerRight
: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
dataGridCell.value.toString(),
overflow: TextOverflow.ellipsis,
));
}).toList());
}
@override void onCellSubmit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex, GridColumn column) { final dynamic oldValue = dataGridRow .getCells() .firstWhereOrNull((DataGridCell dataGridCell) => dataGridCell.columnName == column.columnName) ?.value ?? '';
}
@override bool canSubmitCell(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex, GridColumn column) { // Return false, to retain in edit mode. return true; // or super.canSubmitCell(dataGridRow, rowColumnIndex, column); }
@override Widget? buildEditWidget(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex, GridColumn column, CellSubmit submitCell) { // Text going to display on editable widget final String displayText = dataGridRow .getCells() .firstWhereOrNull((DataGridCell dataGridCell) => dataGridCell.columnName == column.columnName) ?.value ?.toString() ?? '';
}
RegExp _getRegExp(bool isNumericKeyBoard, String columnName) { return isNumericKeyBoard ? RegExp('[0-9]') : RegExp('[a-zA-Z ]'); } }
class Employee { Employee(this.id, this.name, this.designation, this.salary);
int id; String name; String designation; int salary;
DataGridRow getDataGridRow() { return DataGridRow(cells:[
DataGridCell(columnName: 'id', value: id),
DataGridCell(columnName: 'name', value: name),
DataGridCell(columnName: 'designation', value: designation),
DataGridCell(columnName: 'salary', value: salary),
]);
}
}