Edit Row with a button column, opening our customized dialog form, with the row data

[Stefan Tsalapatis]

Edit Row with a button column, opening our customized dialog form, with the row data.

[Tamilarasan Paranthaman]

Hi Stefan Tsalapatis,  

  

DataGrid provides support to load the button widget in the data cells. You can load the button widget to the corresponding cell of DataGridRowAdaptor in the DataGridSource.buildRow method. Please check the following code snippet.  

 

@override 

  DataGridRowAdapter buildRow(DataGridRow row) { 

    return DataGridRowAdapter( 

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

      return Container( 

        alignment: Alignment.center, 

        padding: const EdgeInsets.all(8.0), 

        child: dataGridCell.columnName == 'button' 

            ? LayoutBuilder( 

                builder: (BuildContext context, BoxConstraints constraints) { 

                return MaterialButton( 

                  onPressed: () { 

                    _updateTextFieldContext(row); 

                    showDialog<String>( 

                      context: context, 

                      builder: (BuildContext context) => AlertDialog( 

                        scrollable: true, 

                        titleTextStyle: const TextStyle( 

                            color: Colors.black, 

                            fontWeight: FontWeight.bold, 

                            fontSize: 16), 

                        title: const Text('Edit Details'), 

                        actions: _buildActionButtons(row, context), 

                        content: Scrollbar( 

                          child: SingleChildScrollView( 

                            scrollDirection: Axis.horizontal, 

                            child: Form( 

                              key: _formKey, 

                              child: _buildAlertDialogContent(), 

                            ), 

                          ), 

                        ), 

                      ), 

                    ); 

                  }, 

                  child: const Text('Begin Editing'), 

                  color: Colors.cyanAccent, 

                ); 

              }) 

            : Text(dataGridCell.value.toString()), 

      ); 

    }).toList()); 

  } 

 

 

As per your requirement, we have prepared a sample with a material button column, you can edit the row cell by clicking the respective buttons. 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/main-474539123 

 

We hope this helps. Please let us know if you need any further assistance. 

 

Regards, 

Tamilarasan