1. Home
  2. Forum
  3. Flutter
  4. datagrid column reseize with last column's width mode set to lastColumnFill get problem

datagrid column reseize with last column's width mode set to lastColumnFill get problem

Hello~

I want my Datagrid can resize.

I also want the last column width to always fill the remaining width.

So I set the last GridColumn columnWidthMode to lastColumnFill.

But the last GridColumn still can resize for the first time.

Before resize:

Screen Shot 2022-02-09 at 2.04.51 PM.png

After resize:
Screen Shot 2022-02-09 at 2.05.25 PM.png


the following is my source 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: const MyHomePage(),
);
}
}

/// The home page of the application which hosts the datagrid.
class MyHomePage extends StatefulWidget {
/// Creates the home page.
const MyHomePage({Key? key}) : super(key: key);

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
List<Employee> employees = <Employee>[];
late EmployeeDataSource employeeDataSource;

@override
void initState() {
super.initState();
employees = getEmployeeData();
employeeDataSource = EmployeeDataSource(employeeData: employees);
}

late Map<String, double> columnWidths = {
'id': double.nan,
'name': double.nan,
'designation': double.nan,
'salary': double.nan
};

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter DataGrid'),
),
body: SfDataGrid(
source: employeeDataSource,
columnWidthMode: ColumnWidthMode.fitByCellValue,
allowColumnsResizing: true,
onColumnResizeUpdate: (ColumnResizeUpdateDetails details) {
setState(() {
columnWidths[details.column.columnName] = details.width;
});
return true;
},
columns: <GridColumn>[
GridColumn(
minimumWidth: 60,
width: columnWidths['id']!,
columnName: 'id',
label: Container(
padding: const EdgeInsets.all(16.0),
alignment: Alignment.center,
child: const Text(
'ID',
))),
GridColumn(
minimumWidth: 60,
width: columnWidths['name']!,
columnName: 'name',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Name'))),
GridColumn(
width: columnWidths['designation']!,
minimumWidth: 60,
columnName: 'designation',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text(
'Designation',
overflow: TextOverflow.ellipsis,
))),
GridColumn(
minimumWidth: 60,
width: columnWidths['salary']!,
columnWidthMode: ColumnWidthMode.lastColumnFill,
columnName: 'salary',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.centerLeft,
child: const Text('Salary'))),
],
),
);
}

List<Employee> getEmployeeData() {
return [
Employee(10001, 'James', 'Project Lead', 20000),
Employee(10002, 'Kathryn', 'Manager', 30000),
Employee(10003, 'Lara', 'Developer', 15000),
Employee(10004, 'Michael', 'Designer', 15000),
Employee(10005, 'Martin', 'Developer', 15000),
Employee(10006, 'Newberry', 'Developer', 15000),
Employee(10007, 'Balnc', 'Developer', 15000),
Employee(10008, 'Perry', 'Developer', 15000),
Employee(10009, 'Gable', 'Developer', 15000),
Employee(10010, 'Grimes', 'Developer', 15000)
];
}
}

/// 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);

/// 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;
}

/// 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),
]))
.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.centerLeft,
padding: const EdgeInsets.all(8.0),
child: Text(e.value.toString()),
);
}).toList());
}
}


3 Replies 1 reply marked as answer
TP Tamilarasan Paranthaman Syncfusion Team February 9, 2022 01:26 PM UTC

Hi Jimmy Huang, 
 
DataGrid will be considered as a high priority to the value which is set in the GridColumn.width property. So that, while you set the lastColumnFill option for the salary column and try to resize that column, the width of that column is set in onColumnResizeUpdate callback. You can achieve your requirement by disabling resizing for the last column in onColumnResizeStart callback. We have prepared the sample for that, please check the following code snippet and sample, 
 
Code Snippet:  
 
onColumnResizeStart: (ColumnResizeStartDetails details) { 
 
          // disable resizing for the `salary` column. 
          if (details.column.columnName == 'salary') { 
            return false; 
          } 
          return true; 
        }, 
 
We have already provided examples in our UG documentation.  
 
 
We hope this helps. Please let us know if you need any further assistance. 
 
Regards, 
Tamilarasan 


Marked as answer
JH Jimmy Huang February 10, 2022 06:50 AM UTC

Hi~ Tamilarasan
Thanks for your help. 


TP Tamilarasan Paranthaman Syncfusion Team February 10, 2022 11:37 AM UTC

Hi Jimmy Huang, 
 
We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out. 
 
Regards, 
Tamilarasan P  


Loader.
Up arrow icon