invisible columns and sizing problems

[Thorsten Kominek]

Dear Team, thank you very much for your awesome components!

But I have encountered a problem using invisible columns and recreated something similar with your examples.

I am using SfDataGrid version ^20.2.36. My example code only shows one column salary. And with columnWidthMode: ColumnWidthMode.fill activated the screen is completely empty.

This is the changed example code. Thank you very much for your help!!! Thorsten.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<Employee> _employees;
  late EmployeeDataSource _employeeDataSource;

  @override
  void initState() {
    _employees = getEmployeeData();
    _employeeDataSource = EmployeeDataSource(_employees);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SfDataGrid(
          // columnWidthMode: ColumnWidthMode.fill,
          selectionMode: SelectionMode.single,
          allowSorting: true,
          source: _employeeDataSource,
          columns: [
            GridColumn(
                columnName: 'id',
                visible: false,
                label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerRight,
                  child: Text(
                    'ID',
                    overflow: TextOverflow.ellipsis,
                  ),
                )),
            GridColumn(
                columnName: 'name',
                visible: false,
                label: Container(
                    padding: EdgeInsets.symmetric(horizontal: 16.0),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      'Name',
                      overflow: TextOverflow.ellipsis,
                    ))),
            GridColumn(
                columnName: 'designation',
                minimumWidth: 180,
                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<Employee> getEmployeeData() {
    return [
      Employee(10001, 'James', 'Project Lead', 20000),
      Employee(10002, 'Kathryn', 'Manager', 30000),
      Employee(10003, 'Lara', 'Developer', 15000),
      Employee(10004, 'Michael', 'Designer', 12000),
      Employee(10005, 'Martin', 'Developer', 15000),
      Employee(10006, 'Newberry', 'Developer', 15000),
      Employee(10007, 'Balnc', 'Developer', 15000),
      Employee(10008, 'Perry', 'Tech.Writer', 10000),
      Employee(10009, 'Gable', 'Developer', 15000),
      Employee(10010, 'Grimes', 'Sr.Developer', 18000)
    ];
  }
}

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource(List<Employee> employees) {
    dataGridRows = employees
        .map<DataGridRow>((employee) => DataGridRow(cells: [
              DataGridCell<int>(columnName: 'id', value: employee.id),
              DataGridCell<String>(columnName: 'name', value: employee.name),
              DataGridCell<String>(columnName: 'designation', value: employee.designation),
              DataGridCell<int>(columnName: 'salary', value: employee.salary),
            ]))
        .toList();
  }
  late List<DataGridRow> dataGridRows;
  @override
  List<DataGridRow> get rows => dataGridRows;

  @override
  DataGridRowAdapter? buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return Container(
        padding: EdgeInsets.symmetric(horizontal: 16),
        alignment: (dataGridCell.columnName == 'id' || dataGridCell.columnName == 'salary')
            ? Alignment.centerRight
            : Alignment.centerLeft,
        // color: Colors.red,
        child: Text(
          dataGridCell.value.toString(),
          overflow: TextOverflow.ellipsis,
        ),
      );
    }).toList());
  }
}

class Employee {
  Employee(this.id, this.name, this.designation, this.salary);
  final int id;
  final String name;
  final String designation;
  final int salary;
}

[Tamilarasan Paranthaman]

Hi Thorsten Kominek,

Greetings from Syncfusion.

We have checked your reported issue and logged this as a bug. We will include the changes in our weekly pub release which is scheduled to be rolled out on July 19, 2022. We will let you know once it gets rolled out. We appreciate your patience until then. You can follow up with the below feedback for further details,

Feedback Link:
https://www.syncfusion.com/feedback/36098/the-widths-are-not-properly-set-to-columns-when-hiding-some-columns-and-using

Regards,

Tamilarasan

[Tamilarasan Paranthaman]

Hi Thorsten Kominek,

We are glad to inform you that the fix has been included in our weekly pub release. Please update the DataGrid package to version 20.2.39.

We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you require any further assistance.

Regards, 

Tamilarasan

[Thorsten Kominek]

Hi Tamilarasan,

thanks alot for your work and effort. My original code works now with the update.

Thanks again for your great work and helpful support,

Thorsten.

[Tamilarasan Paranthaman]

Hi Thorsten,

Thank you for the update. Please get in touch with us if you require any further assistance. As always, we are happy to help you out.

Regards, 

Tamilarasan