Open editing Dialog on row selection

[Grady]

I want to open a popup dialog when the user clicks on a DataGrid row.

This dialog would contain a form with text editing fields populated by data from the row.

The user can edit the fields in the form, and when they submit the form it updates the row in the DataGrid.

Unfortunately, in order to open up a dialog I need the BuildContext for the row, as well as the data from that row.

Any help would be greatly appreciated! Thanks!

[Nick]

Thanks for this interesting information!

[Tamilarasan Paranthaman]

Hi Grady,

As per your requirement, we have prepared a simple sample for that. In that sample, we have opened the Dialog with the respective row data when the cell taps in the row. You can edit the respective row cell value using that. Please check the following sample and code snippet.

  @override

  Widget build(BuildContext context) {

    return Scaffold(

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

        body: SfDataGrid(

            source: datagridSource,

            columnWidthMode: ColumnWidthMode.fill,

            controller: dataGridController,

            verticalScrollController: scrollController,

            columns: getColumns,

            allowSorting: true,

            onCellTap: (details) {

              if (details.rowColumnIndex.rowIndex > 0) {

                int index = details.rowColumnIndex.rowIndex;

                DataGridRow row =

                    datagridSource.effectiveRows.elementAt(index - 1);

                _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(),

                                )))));

              }

            }));

  }

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-1763571540

Example: https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/datagrid_editing.dart

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

Regards,

Tamilarasan

[Grady]

Thanks so much!

[Tamilarasan Paranthaman]

Hi Grady,

We are glad that the provided response meets your requirement. Please let us know if you require further assistance. As always, we are happy to help you out.

Regards,

Tamilarasan