DropdownButton visible in cells

[Stefan Tsalapatis]

Hi, 
We have  dropdown cells in grids, working, but we need to display the button in users before they focus in the specific cell.  Users can't understand that in the specific column the cells can be edited, clicking the button.
How to display the dropdown button in each row for the specific column ?

Thanks

[Tamilarasan Paranthaman]

Hi Stefan,

By default, we will show the edit widget (i.e., which you gave for the respective column through the buildEditWidget) only when the cell is focused. You can achieve your requirement by loading the DropdownButton for the corresponding column in the buildRow method. Set GridColumn.allowEditing property as false for a corresponding column. You'll be able to update the respective cell value in DropdownButton.onChanged callback. We have prepared the sample for that. In that sample, we have shown the DropdownButton button for designation column. Please check the following sample and code snippet.

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),

      body: SfDataGrid(

        source: _employeeDataSource,

        allowEditing: true,

        columns: <GridColumn>[

          GridColumn(

              columnName: 'id',

              label: Container(

                  padding: const EdgeInsets.symmetric(horizontal: 8.0),

                  alignment: Alignment.center,

                  child: const Text('ID'))),

          GridColumn(

              columnName: 'name',

              label: Container(

                  padding: const EdgeInsets.symmetric(horizontal: 8.0),

                  alignment: Alignment.center,

                  child: const Text('Name'))),

          GridColumn(

              columnName: 'designation',

              allowEditing: false,

              label: Container(

                  padding: const EdgeInsets.symmetric(horizontal: 8.0),

                  alignment: Alignment.center,

                  child: const Text('Designation'))),

          GridColumn(

              columnName: 'salary',

              label: Container(

                  padding: const EdgeInsets.symmetric(horizontal: 8.0),

                  alignment: Alignment.center,

                  child: const Text('Salary'))),

        ],

        navigationMode: GridNavigationMode.cell,

        selectionMode: SelectionMode.single,

        editingGestureType: EditingGestureType.tap,

        columnWidthMode: ColumnWidthMode.fill,

      ),

    );

  }

 

 

In buildRow method:

 

class EmployeeDataSource extends DataGridSource {

 

…

  List<String> dropDownMenuItems = [

    'Manager',

    'Project Lead',

    'Developer',

    'Support',

    'QA Testing',

    'UI Designer',

    'Sales Representative',

    'Sales Associate',

    'Administrator',

  ];

 

  @override

  DataGridRowAdapter? buildRow(DataGridRow row) {

    return DataGridRowAdapter(

        cells: row.getCells().map<Widget>((dataGridCell) {

      return Container(

          alignment: Alignment.center,

          padding: const EdgeInsets.symmetric(horizontal: 8.0),

          child: dataGridCell.columnName == 'designation'

              ? DropdownButton<String>(

                  value: dataGridCell.value,

                  autofocus: true,

                  focusColor: Colors.transparent,

                  underline: const SizedBox.shrink(),

                  icon: const Icon(Icons.arrow_drop_down_sharp),

                  isExpanded: true,

                  style: textStyle,

                  onChanged: (String? value) {

                    final dynamic oldValue = row

                            .getCells()

                            .firstWhereOrNull((DataGridCell dataCell) =>

                                dataCell.columnName == dataGridCell.columnName)

                            ?.value ??

                        '';

                    if (oldValue == value || value == null) {

                      return;

                    }

 

                    final int dataRowIndex = dataGridRows.indexOf(row);

                    dataGridRows[dataRowIndex].getCells()[2] =

                        DataGridCell<String>(

                            columnName: 'designation', value: value);

                    employees[dataRowIndex].designation = value.toString();

                    notifyListeners();

                  },

                  items: dropDownMenuItems

                      .map<DropdownMenuItem<String>>((String value) {

                    return DropdownMenuItem<String>(

                      value: value,

                      child: Text(value),

                    );

                  }).toList())

              : Text(

                  dataGridCell.value.toString(),

                  overflow: TextOverflow.ellipsis,

                ));

    }).toList());

  }

 

  @override

  void onCellSubmit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,

      GridColumn column) {

    …

 

    if (column.columnName == 'id') {

      dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =

          DataGridCell<int>(columnName: 'id', value: newCellValue);

      employees[dataRowIndex].id = newCellValue as int;

    } else if (column.columnName == 'name') {

      dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =

          DataGridCell<String>(columnName: 'name', value: newCellValue);

      employees[dataRowIndex].name = newCellValue.toString();

    } else {

      dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =

          DataGridCell<int>(columnName: 'salary', value: newCellValue);

      employees[dataRowIndex].salary = newCellValue as int;

    }

  }

}

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample946856875

Regards,

Tamilarasan