1. Home
  2. Forum
  3. Flutter
  4. GridColumn auto width not working with a Row widget in the colum

GridColumn auto width not working with a Row widget in the colum

(This is in Flutter for Windows)


I am using a SfDataGrid to display the result from an API call to the server. One of my GridColumns contains a set of 3 buttons in the same column. In my data source, depending on the data that came in, 2 of the 3 buttons may not be displayed. This depends on the user who is logged in, but the api returns the flag that dictates this on every row in the API (not optimal, I know, but this is outside my control at this point)

This means that depending on the logged in user, either all rows have a single button, or all rows have all 3. In no case can some of the rows have 1, and some have 3.


My problem is that the columnWidthMode.auto and columnWidthMode.fitByCellValue does not work with determining the width of the GridColum.

here is my column in my SfDataGrid:

GridColumn(
columnName: 'buttons',
  columnWidthMode: ColumnWidthMode.auto,
  allowFiltering: false,
  allowSorting: false,
  label: Container(
padding: const EdgeInsets.all(0.0),
    alignment: Alignment.center,
    child: Text('Actions', style: gridHeaderStyle) ) ),


When I define my getColumnWidget function, here is what I do:

Widget? getColumnWidget(DataGridCell dataGridCell, DataGridRow row) {
   
    // HANDLE THE BUTTONS COLUMN
    if (dataGridCell.columnName == "buttons") {
      ServerJob job = row.getCells()[0].value;
     
      return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              // View button
              if (job.allowActions)
                ElevatedButton(
                  style: ElevatedButton.styleFrom(padding: const EdgeInsets.only(left: 0, right: 0)),
                  onPressed: () async {
_viewJob(job);
                  },
                  child: const Icon(Icons.remove_red_eye),
                ),

              // Reset button
              if (job.allowActions)
                ElevatedButton(
                  style: ElevatedButton.styleFrom(padding: const EdgeInsets.only(left: 0, right: 0)),
                  onPressed: () async {
                    _resetJob(job);
                  },
                  child: const Icon(Icons.cached),
                ),


              // Download button
              ElevatedButton(
                style: ElevatedButton.styleFrom(padding: const EdgeInsets.only(left: 0, right: 0)),
                onPressed: () {
                _downloadJobs(job);
                },
                child: const Icon(Icons.download),
              ),

             
            ],
          );
        },
      );
    }

    // HANDLE BOOLEAN COLUMNS
    if (dataGridCell.runtimeType == DataGridCell<bool>) {
      return dataGridCell.value ? const Icon(Icons.check) : null;
    }

    // HANDLE DATETIME COLUMNS
    if (dataGridCell.runtimeType == DataGridCell<DateTime>) {
      DateTime dateValue = dataGridCell.value as DateTime;

      // Default format
      String format = 'yyyy-MM-dd';

      return Text(
        DateFormat(format).format(dateValue),
        style: Theme.of(context).textTheme.bodyMedium,
      );
    }

    // default
    return Text(dataGridCell.value.toString(), style: Theme.of(context).textTheme.bodyMedium);
  }


As you can see, two of the 3 buttons are inside a if so might not be displayed at all.

All my other columns are able to auto size, but this particular one, the auto (or fitByCellValue) size doesn't work. The column is always super thin. It's like it isn't able to determine the width of the Row widget thats in the colum (I have tried removing the LayoutBuilder widget around the row, but that doesn't change the result)

Because of this, I had to force the width of my colum instead of using the columnWidthMode, which lets me adjust the colum to the proper width for when there are 3 buttons, but now when 2 of my buttons are hidden (not displayed), my column is super wide for no reasons, and since the flag that tells the buttons not to display is inside each row, I don't have access to this at the SfDataGrid level, meaning I can't change the width based on this.

Why desn't the columnWidthMode.auto or columnWidthMode.fitByCellValue doesn't work here, but it works with all other columns?

Thank you,


1 Reply
AP Abinesh Palanisamy Syncfusion Team April 15, 2024 09:05 AM UTC

Hi Mathieu,

Based on the information provided, the reported issue concerns the non-functionality of the columnWithMode for the button column. In SfDataGrid, we have incorporated support for autofitting rows and columns based on the DataGridCell.value property, with height and width calculated according to the text within the cell value.


As of now, We have already considered your request to provide the support to autofit the rows and column based on the widget which is loaded in cells as a feature. We will implement this feature in any of our upcoming releases. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We appreciate your patience and understanding until then. You can follow up with the below feedback for further details,


Feedback link: 30155


Regards,

Abinesh P


Loader.
Up arrow icon