1. Home
  2. Forum
  3. Flutter
  4. Scrolling down the datagrid and include the new row in the top of the grid

Scrolling down the datagrid and include the new row in the top of the grid

Hi

I need to include a row for editing at the top of the grid instead of the bottom. The other grids should scroll down as usual.

Any clue?

Thanks in advance

Regards




Can any


11 Replies
TP Tamilarasan Paranthaman Syncfusion Team February 10, 2022 11:50 AM UTC

Hi Marcio,

We suspect that your requirement is to show an additional row on top and add the new row when you have completed the editing on top of the row. Can you please confirm whether you want something like below?


Before entering into edit mode on top row

Table Description automatically generated


After entering into edit mode

Table Description automatically generated


Regards,

Tamilarasan


MA Marcio February 10, 2022 03:33 PM UTC

Tamilarasan


Thanks for your prompt response. Yes, this is what I need. Can you tell me also how to include the filter in the columns as shown in your example?


Regards


TP Tamilarasan Paranthaman Syncfusion Team February 11, 2022 10:10 AM UTC

 
Currently, DataGrid does not have support for adding a new row through the built-in row. We have considered your requirement as a feature request. We will implement this feature in any of our upcoming releases. At the planning stage for every release cycle, we review all open features. We will let you know when this feature is implemented. You can follow up with the below feedback for further details, 
 
Also, we have already considered filtering support in Datagrid as a feature request. We will let you know when this feature is implemented. You can follow up with the below feedback for further details, 
 
Regards,  
Tamilarasan P 


MA Marcio replied to Tamilarasan Paranthaman February 11, 2022 11:37 AM UTC

Tamilarasan

Thanks for the reply. Can you tell me how do I sort the rows based on a column (date) ?

I need also to show the column totals  at the end of the screen ? Can you help me?

Regards




TP Tamilarasan Paranthaman Syncfusion Team February 14, 2022 10:16 AM UTC

Hi Marcio, 
 
You can achieve your requirement by setting the allowSorting property as true in the DataGrid and tapping the date column header. Also, DataGrid provides support to sort columns based on custom logic. For each column, you can provide different sorting criteria by overriding the methods proved in the following link.  
 
 
Code snippet: 
@override 
  Widget build(BuildContext context) { 
    return Scaffold( 
        appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')), 
        body: SfDataGrid( 
          source: _employeeDataSource, 
          allowSorting: true, 
          columns: getColumns, 
        )); 
  } 
  
You can show the total for specific column by using summaries feature. Please refer the below UG link, 
 
Code Snippet:  
@override 
  Widget build(BuildContext context) { 
    return Scaffold( 
        appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')), 
        body: SfDataGrid( 
          source: _employeeDataSource, 
          allowSorting: true, 
          columns: getColumns, 
          tableSummaryRows: [ 
            GridTableSummaryRow( 
                color: Colors.amber, 
                showSummaryInRow: false, 
                columns: [ 
                  const GridSummaryColumn( 
                      name: 'Salary', 
                      columnName: 'salary', 
                      summaryType: GridSummaryType.sum), 
                  const GridSummaryColumn( 
                      name: 'ID', 
                      columnName: 'id', 
                      summaryType: GridSummaryType.count) 
                ], 
                position: GridTableSummaryRowPosition.bottom) 
          ], 
        )); 
  } 
 
In DataGrid Source Class: 
  
@override 
  Widget? buildTableSummaryCellWidget( 
      GridTableSummaryRow summaryRow, 
      GridSummaryColumn? summaryColumn, 
      RowColumnIndex rowColumnIndex, 
      String summaryValue) { 
    return Container( 
      padding: const EdgeInsets.all(15.0), 
      alignment: Alignment.center, 
      child: Text(summaryValue), 
    ); 
  } 
 
 
We hope this helps. Please let us know if you need any further assistance. 
 
Regards, 
Tamilarasan 


MA Marcio replied to Tamilarasan Paranthaman February 15, 2022 03:31 PM UTC

Hi  Tamilarasan


Thanks for your help. Can you also tell me how to format the Cells with decimal digits (7,00, for example) and format the cell in Brasilian Currency (REAL)?


Regards



TP Tamilarasan Paranthaman Syncfusion Team February 16, 2022 11:14 AM UTC

 Hi Marcio, 
As per your requirement, you can achieve it in the DataGridRowAdaptor DataGridSource.buildRow method. By converting the cell value to the decimal digits format using the NumberFormat.decimalPattern method and to the Brasilian Currency format using NumberFormat.currency method based on the column name. We have prepared a sample for your reference. Please check the following sample and code snippet.  
Code Snippet:  
 
@override 
  DataGridRowAdapter? buildRow(DataGridRow row) { 
    return DataGridRowAdapter( 
        cells: row.getCells().map<Widget>((dataGridCell) { 
      late dynamic value; 
      if (dataGridCell.columnName == 'id') { 
        final decimalformetter = NumberFormat.decimalPattern(); 
        value = decimalFormetter.format(dataGridCell.value); 
      } else if (dataGridCell.columnName == 'salary') { 
        final currencyFormatter = 
            NumberFormat.currency(name: 'BRL', symbol: 'R\$', decimalDigits: 2); 
        value = formatter.format(dataGridCell.value); 
      } else { 
        value = dataGridCell.value; 
      } 
      return Container( 
          alignment: Alignment.center, 
          padding: const EdgeInsets.symmetric(horizontal: 16.0), 
          child: Text( 
            value.toString(), 
            overflow: TextOverflow.ellipsis, 
          )); 
    }).toList()); 
  } 
 
 
 
 
We hope this helps. Please let us know if you need any further assistance. 
 
Regards, 
Tamilarasan 
  
  
  


MA Marcio replied to Tamilarasan Paranthaman February 17, 2022 04:35 AM UTC

Thanks, Tamilarasan!

It worked! Can you help me with three other issues?

1) I need to scroll the rows when the Summary row appears. 

2) The last column is truncated even when the table scrolls horizontally. Is there a way to show the whole cell?

3) I managed to format the cells inside the table as you directed, but I can't do it in the summary row. Can you help me?

tableSummaryRows: [
GridTableSummaryRow(
color: Colors.grey,
showSummaryInRow: true,
title: 'Quantidade Total {Quantidade} Valor Total {Valor}',
columns: [
const GridSummaryColumn(
name: 'Quantidade',
columnName: 'quantidade',
summaryType: GridSummaryType.sum),
const GridSummaryColumn(
name: 'Valor',
columnName: 'valor',
summaryType: GridSummaryType.sum)
],
position: GridTableSummaryRowPosition.bottom)

Thanks in advance!
Regards


TP Tamilarasan Paranthaman Syncfusion Team February 17, 2022 05:54 PM UTC

Hi Marcio,
Query 1: I need to scroll the rows when the Summary row appears.

By default, the DataGrid summaries are frozen rows so it can’t be scrollable with the rows. If we misunderstood anything, can you please provide more details about your requirement.

Query 2: The last column is truncated even when the table scrolls horizontally. Is there a way to show the whole cell?

We are unclear about this requirement. Can you please provide more details about your requirement with a screenshot of the reference images? So that we could proceed further to provide a better solution.

Query 3: I managed to format the cells inside the table as you directed, but I can't do it in the summary row.

As per your requirement, you can achieve your requirement at the sample level itself. For showSummaryInRow as true case you need to split the summary value then formatting the required value into a decimal pattern using NumberFormat.decimalPattern method in DataGridSource.buildTableSummaryCellWidget. We have prepared a sample, please check the following sample and code snippet
Code Snippet:
@override
Widget? buildTableSummaryCellWidget(
GridTableSummaryRow summaryRow,
GridSummaryColumn? summaryColumn,
RowColumnIndex rowColumnIndex,
String summaryValue) {
late dynamic value;
if (summaryColumn == null) {
dynamic firstValue;
dynamic secondValue;
String string = summaryValue;
final splitted = string.split(' ');
firstValue = double.parse(splitted.elementAt(2));
secondValue = double.parse(splitted.elementAt(7));
final decimalformetter = NumberFormat.decimalPattern();
firstValue = decimalformetter.format(firstValue);
secondValue = decimalformetter.format(secondValue);
splitted.removeAt(2);
splitted.replaceRange(2, 2, [firstValue]);
splitted.removeAt(7);
splitted.replaceRange(7, 7, [secondValue]);
value =
('${splitted.elementAt(0)} ${splitted.elementAt(1)} ${splitted.elementAt(2)} ${splitted.elementAt(3)} ${splitted.elementAt(4)} ${splitted.elementAt(5)} ${splitted.elementAt(6)} ${splitted.elementAt(7)}')
.toString();
} else {
value = summaryValue;
}
return Container(
padding: const EdgeInsets.all(15.0),
alignment: Alignment.center,
child: Text(value),
);
}
We hope this helps. Please let us know if you need any further assistance.
Regards,
Tamilarasan



MA Marcio February 18, 2022 02:51 AM UTC

Thanks, Tamilrasan !

Below is the screenshot of the Datagrid. The "Valor" column is truncated. Does not show the entire content. This is the last column. Is there a way to show the full content of this column?

Thanks in advance

Regards




TP Tamilarasan Paranthaman Syncfusion Team February 18, 2022 10:43 AM UTC

Hi Marcio, 
 
We suspect that you are using SfDataGrid.columnWidthMode as fitByCellValue mode to fit the columns. By default, the DataGrid cell width is calculated based on the DataGridCell.value property. In your case, you formatted the cell value in the DataGridRowAdaptor DataGridSource.buildRow method. So, to autofit the cell width based on the displayed formatted value (i.e., NumberFormat), you can override the computeCellWidth method in the ColumnSizer class and return the super method with the required cellValue. We have prepared the sample for that, please check the following sample and code snippet 
 
Code Snippet: 
final CustomColumnSizer _customColumnSizer = CustomColumnSizer(); 
 
@override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        title: const Text('Flutter SfDataGrid'), 
      ), 
      body: SfDataGrid( 
        source: _employeeDataSource, 
        columnSizer: _customColumnSizer, 
        columnWidthMode: ColumnWidthMode.fitByCellValue, 
        columns: getColumns(), 
      ), 
    ); 
  } 
 
class CustomColumnSizer extends ColumnSizer { 
  @override 
  double computeCellWidth(GridColumn column, DataGridRow row, Object? cellValue, 
      TextStyle textStyle) { 
    if (column.columnName == 'salary') { 
      final formatter = 
          NumberFormat.currency(name: 'BRL', symbol: 'R\$', decimalDigits: 2); 
 
      cellValue = formatter.format(cellValue); 
    } 
 
    return super.computeCellWidth(column, row, cellValue, textStyle); 
  } 
} 
 
 
We have already provided examples in our UG documentation. Please go through this, 
 
 
We hope this helps. Please let us know if you need any further assistance. We will be happy to assist you 
Regards, 
Tamilarasan 


Loader.
Up arrow icon