[syncfusion_flutter_datagrid] state overrides selection

[mades5]

Hi,

I created a little sample app because I have that if I call set state in onSelectionChanged the selection is removed from the gui. I initialize the data source in the init state method so I don't know what I'm doing wrong. The selection is also gone if the load more builder is called. Every state change kills my selection.

Here is the simple code. Thanks for any help

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

void main() async {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Test',
      home: Scaffold(
        body: SizedBox(width: double.infinity, child: MainPage()),
      )
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  late TestDataSource _dataSource;

  @override
  void initState() {
    super.initState();
    _dataSource = TestDataSource();
    _dataSource.loadMoreData();
  }

  @override
  Widget build(BuildContext context) {
    const columns = [['cell1', 'Column 1'], ['cell2', 'Column 2']];

    return SfDataGrid(
      source: _dataSource,
      columnWidthMode: ColumnWidthMode.fill,
      selectionMode: SelectionMode.multiple,
      columns: List<GridColumn>.generate(columns.length, (index) {
        return GridColumn(
          columnName: columns[index][0],
          label: Container(
            padding: const EdgeInsets.all(16.0),
            alignment: Alignment.centerLeft,
            child: Text(columns[index][1]),
          )
        );
      }),
      loadMoreViewBuilder: loadMoreBuilder,
      showCheckboxColumn: true,
      onSelectionChanged: (added, removed) {
        setState(() {
          
        });
      },
    );
  }

  Widget loadMoreBuilder(BuildContext context, LoadMoreRows loadMoreRows) {
    Future<String> loadRows() async {
      await loadMoreRows();
      return Future<String>.value('completed');
    }

    return FutureBuilder<String>(
      initialData: 'loading',
      future: loadRows(),
      builder: (context, snapshot) {
        if (snapshot.data == 'loading') {
          return Container(
            height: 60,
            width: double.infinity,
            alignment: Alignment.center,
            child: const CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation(Colors.black),
            ),
          );
        } else {
          return SizedBox.fromSize(size: Size.zero);
        }
      }
    );
  }
}

class TestEntity {
  final String cell1;
  final String cell2;

  TestEntity({required this.cell1, required this.cell2});
}

class TestDataSource extends DataGridSource {
  static const int perPage = 20;

  final List<TestEntity> _entities = [];

  @override
  List<DataGridRow> get rows => _entities.map((e) => getDataGridRow(e)).toList();

  DataGridRow getDataGridRow(TestEntity entity) {
    return (DataGridRow(cells: [
      DataGridCell<String>(columnName: 'column1', value: entity.cell1),
      DataGridCell<String>(columnName: 'column2', value: entity.cell2),
    ]));
  }

  Future<List<TestEntity>> loadData() async {
    return List.generate(perPage, (index) {
      return TestEntity(cell1: 'Cell 1.$index', cell2: 'Cell 2.$index');
    });
  }

  Future loadMoreData() async {
    final es = await loadData();

    _entities.addAll(es);

    updateDataGridDataSource();
  }

  @override
  DataGridRowAdapter? buildRow(DataGridRow row) {
    return DataGridRowAdapter(
      cells: row.getCells().map<Widget>((e) {
        return Container(
          alignment: Alignment.centerLeft,
          padding: const EdgeInsets.all(16.0),
          child: Text(e.value),
        );
      }).toList()
    );
  }

  @override
  Future<void> handleLoadMoreRows() async {
    loadMoreData();
  }

  void updateDataGridDataSource() {
    notifyListeners();
  }
}

[Tamilarasan-Paranthaman]

Hi @mades5,

In the provided sample, it appears that you are currently remapping all the rows each time. It's important to note that regenerating the rows will lead to the DataGrid losing its selection, sorting, and other states, effectively resetting it to its initial state. To preserve your current settings and data, we recommend adding the new rows to the existing rows collection instead of generating them anew. We've made the necessary adjustments to your sample, and it's attached for your reference. Please review the following code snippet and sample for more details.

class TestDataSource extends DataGridSource {
  static const int perPage = 20;

  // final List<TestEntity> _entities = [];

  List<DataGridRow> dataGridRows = [];

  @override
  List<DataGridRow> get rows => dataGridRows;

  DataGridRow getDataGridRow(TestEntity entity) {
    return (DataGridRow(cells: [
      DataGridCell<String>(columnName: 'column1', value: entity.cell1),
      DataGridCell<String>(columnName: 'column2', value: entity.cell2),
    ]));
  }

  Future<List<TestEntity>> loadData() async {
    return List.generate(perPage, (index) {
      return TestEntity(cell1: 'Cell 1.$index', cell2: 'Cell 2.$index');
    });
  }

  Future loadMoreData() async {
    final es = await loadData();

    // Add the new rows to the dataGridRows list.
    dataGridRows.addAll(es.map((e) => getDataGridRow(e)).toList());

    // _entities.addAll(es);

    updateDataGridDataSource();
  }

  @override
  Future<void> handleLoadMoreRows() async {
    loadMoreData();
  }
…
}

Sample Link: Flutter-Application

Regards,
Tamilarasan

[FarjanaParveen]

Hi @mades5 ,

We are suspect that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you.

Regards,
Farjana Parveen A