When set DataGrid(fitByCellValue) can resize and no value GridColumn set ColumnWidthMode to fitByColumnName make header cell's text clip
Hello~:)
whenDataGrid can resize andset column width mode fitByCellValue,
but I set some GridColumn column width mode fitByColumnName.
If GridColumn no value, the header cell's text will be clip.
Unexpect photo:
Expect photo:
code :
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
void main() {
runApp(MyApp());
}
/// The application that contains datagrid on it.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Syncfusion DataGrid Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage(),
);
}
}
/// The home page of the application which hosts the datagrid.
class MyHomePage extends StatefulWidget {
/// Creates the home page.
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Employee> employees = <Employee>[];
late EmployeeDataSource employeeDataSource;
Map<String, double> columnWidths = {
'id': double.nan,
'name': double.nan,
'designation': double.nan,
'salary': double.nan,
'text': double.nan,
'text2': double.nan,
'text3': double.nan,
'text4': double.nan,
};
@override
void initState() {
super.initState();
employees = getEmployeeData();
employeeDataSource = EmployeeDataSource(employeeData: employees);
debugPrint('columnWidths text3: ${columnWidths['text3']}');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter DataGrid'),
),
body: Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.4,
height: 300,
child: SfDataGrid(
source: employeeDataSource,
columnWidthMode: ColumnWidthMode.fitByCellValue,
isScrollbarAlwaysShown: true,
allowColumnsResizing: true,
columnResizeMode: ColumnResizeMode.onResize,
onColumnResizeUpdate: (ColumnResizeUpdateDetails details) {
setState(() {
columnWidths[details.column.columnName] = details.width;
});
return true;
},
columns: <GridColumn>[
GridColumn(
width: columnWidths['id']!,
minimumWidth: 30,
columnName: 'id',
label: Container(
padding: EdgeInsets.all(16.0),
alignment: Alignment.center,
child: Text(
'ID',
overflow: TextOverflow.visible,
softWrap: false,
))),
GridColumn(
width: columnWidths['name']!,
minimumWidth: 30,
columnName: 'name',
label: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text(
'Name',
overflow: TextOverflow.visible,
softWrap: false,
))),
GridColumn(
width: columnWidths['designation']!,
minimumWidth: 30,
columnName: 'designation',
label: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text(
'Designation',
overflow: TextOverflow.visible,
softWrap: false,
))),
GridColumn(
width: columnWidths['salary']!,
minimumWidth: 30,
columnName: 'salary',
label: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text(
'Salary',
overflow: TextOverflow.visible,
softWrap: false,
))),
GridColumn(
width: columnWidths['text']!,
minimumWidth: 30,
columnName: 'text',
label: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text(
'TestTestTest',
overflow: TextOverflow.visible,
softWrap: false,
))),
GridColumn(
width: columnWidths['text2']!,
minimumWidth: 30,
columnName: 'text2',
label: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text(
'TestTestTest2',
overflow: TextOverflow.visible,
softWrap: false,
))),
GridColumn(
width: columnWidths['text3']!,
minimumWidth: 30,
columnWidthMode: ColumnWidthMode.fitByColumnName,
columnName: 'text3',
label: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text(
'TestTestTest3',
overflow: TextOverflow.visible,
softWrap: false,
))),
GridColumn(
width: columnWidths['text4']!,
minimumWidth: 30,
columnName: 'text4',
label: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text(
'TestTest4',
overflow: TextOverflow.visible,
softWrap: false,
))),
],
),
),
),
);
}
List<Employee> getEmployeeData() {
return [
Employee(10001, 'James', 'Project Lead', 20000, 'texttexttexttexttexttext', 'texttexttexttexttexttext', '',
'texttexttexttexttexttext'),
Employee(
10002, 'Kathryn', 'Manager', 30000, 'textttext', 'texttexttexttexttexttext', '', 'texttexttexttexttexttext'),
Employee(10003, 'Lara', 'Developer', 15000, 'texttexttexttexttexttext', 'texttexttexttexttexttext', '',
'texttexttexttexttexttext'),
Employee(10004, 'Michael', 'Designer', 15000, 'texttexttexttexttexttext', 'texttexttexttexttexttext', '',
'texttexttexttexttexttext'),
Employee(10005, 'Martin', 'Developer', 15000, 'texttexttexttexttexttext', 'texttexttexttexttexttext', '',
'texttextttext'),
Employee(10006, 'Newberry', 'Developer', 15000, 'texttexttexttexttexttext', 'texttexttexttexttexttext', '',
'texttexttexttexttexttext'),
Employee(10007, 'Balnc', 'Developer', 15000, 'texttexttexttexttexttext', 'texttexttexttexttexttext', '',
'texttexttexttexttexttext'),
Employee(10008, 'Perry', 'Developer', 15000, 'texttexttexttexttexttext', 'texttexttexttexttexttext', '',
'texttexttexttexttexttext'),
Employee(10009, 'Gable', 'Developer', 15000, 'texttexttexttexttexttext', 'texttexttexttexttexttext', '',
'texttexttexttexttexttext'),
Employee(10010, 'Grimes', 'Developer', 15000, 'texttexttexttexttexttext', 'texttexttexttexttexttext', '',
'texttexttexttexttexttext')
];
}
}
/// Custom business object class which contains properties to hold the detailed
/// information about the employee which will be rendered in datagrid.
class Employee {
/// Creates the employee class with required details.
Employee(this.id, this.name, this.designation, this.salary, this.text, this.text2, this.text3, this.text4);
/// Id of an employee.
final int id;
/// Name of an employee.
final String name;
/// Designation of an employee.
final String designation;
/// Salary of an employee.
final int salary;
final String text;
final String text2;
final String text3;
final String text4;
}
/// An object to set the employee collection data source to the datagrid. This
/// is used to map the employee data to the datagrid widget.
class EmployeeDataSource extends DataGridSource {
/// Creates the employee data source class with required details.
EmployeeDataSource({required List<Employee> employeeData}) {
_employeeData = employeeData
.map<DataGridRow>((e) => DataGridRow(cells: [
DataGridCell<int>(columnName: 'id', value: e.id),
DataGridCell<String>(columnName: 'name', value: e.name),
DataGridCell<String>(columnName: 'designation', value: e.designation),
DataGridCell<int>(columnName: 'salary', value: e.salary),
DataGridCell<String>(columnName: 'text', value: e.text),
DataGridCell<String>(columnName: 'text2', value: e.text2),
DataGridCell<String>(columnName: 'text3', value: e.text3),
DataGridCell<String>(columnName: 'text4', value: e.text4),
]))
.toList();
}
List<DataGridRow> _employeeData = [];
@override
List<DataGridRow> get rows => _employeeData;
@override
DataGridRowAdapter buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((e) {
return Container(
alignment: Alignment.center,
padding: EdgeInsets.all(8.0),
child: Text(
e.value.toString(),
),
);
}).toList());
}
}
SIGN IN To post a reply.
3 Replies
SIGN IN To post a reply.
