How to add a button inside each column

[Nazran]

I want to make each of the row inside 'Mohon' column will have a button according to the amount of 'Kod Kursus' inside the database. I manage to fetch the list of the data from database (phpMyAdmin localhost) but I dont know how to insert a button for each of the rows.

I kind of manage to do it but it show text only view

I know it has something to do with this section of coding, I just dont know how to workaround with it

PS: My original planned is to make the button able to navigator.push to another file but I dont think it works on void so I might need to do another alternative but I worried about it later, right now I just want to see the button is clickable

[Nazran]

Forgot to share my coding. I only share lib folder since the full folder is 700mb

Attachment: lib_b2d69aa4.zip

KursusList.dart is the file that associated with above question

[Tamilarasan Paranthaman]

Hi Nazran,

Greetings from Syncfusion.

If you want to load an ElevatedButton in the grid cells, you can load it directly as an ElevatedButton widget instead of loading a data grid cell value in a Text widget. If you load an ElevatedButton in a Text widget, then the description is loaded in the DataGridCell instead of button. You can load the ElevatedButton widget to the corresponding cell of DataGridRowAdaptor in the DataGridSource.buildRow method. We have prepared the sample as same as your sample. Please check the following sample and code snippet. 

Code Snippet:

  @override

  DataGridRowAdapter? buildRow(DataGridRow row) {

    return DataGridRowAdapter(

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

      return Container(

          alignment: Alignment.center,

          child: dataGridCell.columnName == 'btn_hntr'

              ? mohonHntr(row.getCells()[0].value, row.getCells()[3].value)

              : Text(

                  dataGridCell.value.toString(),

                ));

    }).toList());

  }

 

In buildDataGridRow Method:

 

void buildDataGridRow(List<Detail> userData) {

    dataGridRow = userData.map<DataGridRow>((e) {

      return DataGridRow(cells: [

        DataGridCell<int>(columnName: 'crs_code', value: e.kodkursus),

        DataGridCell<String>(columnName: 'crs_title_bm', value: e.namakursus),

        DataGridCell<String>(

            columnName: 'crs_description_bm', value: e.kursusdescription),

        const DataGridCell<String>(columnName: 'btn_hntr', value: null),

      ]);

    }).toList();

  }

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

We hope this helps. Please let us know if you need any further assistance. We will be glad to assist you.

Regards,

Tamilarasan

[Nazran]

​Thank you for the quick respond

I tried your code and I change a bit of your coding since there an error but after few trial and error, it WORKED!! Thank you so much.

From your solution :-

child: dataGridCell.columnName == 'btn_hntr'

              ? mohonHntr(row.getCells()[0].value, row.getCells()[3].value)

              : Text(

                  dataGridCell.value.toString(),

I have edited your coding a bit by adding ?mohonHntr({}, ....)

@override

  DataGridRowAdapter? buildRow(DataGridRow row) {

    return DataGridRowAdapter(

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

      return Container(

          alignment: Alignment.center,

          child: dataGridCell.columnName == 'btn_hntr'

              ? mohon_hntr(

                  {},

                  kursus_kod: row.getCells()[0].value,

                  id_num: row.getCells()[3].value,

                )

              : Text(

                  dataGridCell.value.toString(),

                ));

    }).toList());

  }

[Tamilarasan Paranthaman]

Hi Nazran,

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

Regards,

Tamilarasan