How to add empty DataGridRow like google sheet(excel)

[Jimmy Huang]

Hi~
If I want to have 20 DataGridRow,
1~10 DataGridRow have data , 11~20 DataGridRow is empty,
or
1~8 DataGridRow have data, 9~20 DataGridRow is empty,
or
1~12 DataGridRow have data, 13~20 DataGridRow is empty,
DataGridSoruce's List length is dynamic.
I want to make excel style DataGrid.


I find other platform relative articles:
https://www.syncfusion.com/forums/166400/is-there-a-way-to-make-the-grid-show-rows-with-no-data

but still need help. How can I make it?

,

[Sangeetha Raju]

Hi Jimmy Huang, 

 

Thank you for contacting Syncfusion support. 

 

SfDataGrid doesn’t depend on the underlying data collection. SfDataGrid’s rows are generated based on the DataGridSource.rows property. You can add the data directly to the DataGridSource.rows property. In the below example, we have added the additional empty rows without having those rows in underlying data. 

 

class EmployeeDataGridSource extends DataGridSource { 

  EmployeeDataGridSource( 

      {required List<Employee> employeeData, required int emptyRowsCount}) { 

    _dataGridRows = employeeData 

        .map<DataGridRow>((e) => DataGridRow(cells: [ 

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

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

              DataGridCell<String>( 

                  columnName: 'designation', value: e.designation), 

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

            ])) 

        .toList(); 

    for (int i = 0; i < emptyRowsCount; i++) { 

      _dataGridRows.add(const DataGridRow(cells: [ 

        DataGridCell(columnName: 'id', value: null), 

        DataGridCell(columnName: 'name', value: null), 

        DataGridCell(columnName: 'designation', value: null), 

        DataGridCell(columnName: 'salary', value: null), 

      ])); 

    } 

  } 

 

  List<DataGridRow> _dataGridRows = []; 

 

  @override 

  List<DataGridRow> get rows => _dataGridRows; 

 

  @override 

  DataGridRowAdapter buildRow(DataGridRow row) { 

    return DataGridRowAdapter( 

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

      return Container( 

        alignment: Alignment.center, 

        padding: const EdgeInsets.all(8.0), 

        child: Text(e.value?.toString() ?? ''), 

      ); 

    }).toList()); 

  } 

} 

 

We have prepared a sample for your reference. Please find the sample from the following link. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/170488/ze/main533516740  

 

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

 

Regards, 

Sangeetha Raju.

[Jimmy Huang]

Hi~  Sangeetha,
Thanks for the reply, very useful!
Have a nice weekend.

[Sangeetha Raju]

Hi Jimmy Huang, 

 

Thanks for your update. 

 

We are glad to know that our solution meets your requirement. Please get back to us if you require any further assistance. We will be happy to assist you. 

 

Regards, 

Sangeetha Raju.