[Bug] checkbox cannot check when SfDataGrid onSelectionChanged has setState

[Dervin Mamangon]

[Bug] checkbox cannot check when SfDataGrid onSelectionChanged has setState

I'm using Flutter web

version: synfusion_flutter_datagrid: 20.1.55

This is a minimal code

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



/// TODO: syncfusion_flutter_datagrid: 20.1.55
///
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Syncfusion DataGrid',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Data Grid Minimal Code'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {

  final controller = DataGridController();

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SfDataGrid(
          selectionMode: SelectionMode.multiple,
          controller: controller,
          showCheckboxColumn: true,
          columnWidthMode: ColumnWidthMode.fill,
          source: Source(),
          columns: [
            GridColumn(columnName: 'id', label: Container(alignment: Alignment.centerLeft, padding: const EdgeInsets.symmetric(horizontal: 20.0), child: const Text('ID'))),
            GridColumn(columnName: 'firstname', label: Container(alignment: Alignment.centerLeft, padding: const EdgeInsets.symmetric(horizontal: 20.0), child: const Text('First Name'))),
            GridColumn(columnName: 'lastname', label: Container(alignment: Alignment.centerLeft, padding: const EdgeInsets.symmetric(horizontal: 20.0), child: const Text('Last Name'))),
            GridColumn(columnName: 'email', label: Container(alignment: Alignment.centerLeft, padding: const EdgeInsets.symmetric(horizontal: 20.0), child: const Text('Email'))),
          ],
          onSelectionChanged: (o,u){
            setState(() {});
          },
        ),
      ),
    );
  }
}

class Employee {
  String id;
  String firstname;
  String lastname;
  String email;
  Employee(this.id, this.firstname, this.lastname, this.email);
}

class Source extends DataGridSource {


  List employees = [
    Employee('0001', 'John', 'Doe', '[email protected]'),
    Employee('0001', 'John', 'Doe', '[email protected]'),
    Employee('0001', 'John', 'Doe', '[email protected]'),
    Employee('0001', 'John', 'Doe', '[email protected]'),
    Employee('0001', 'John', 'Doe', '[email protected]'),
    Employee('0001', 'John', 'Doe', '[email protected]'),
  ];

  Source() {
    _rows = employees.map((e){
      return DataGridRow(
        cells: [
          DataGridCell(columnName: 'id', value: e.id),
          DataGridCell(columnName: 'firstname', value: e.firstname),
          DataGridCell(columnName: 'lastname', value: e.lastname),
          DataGridCell(columnName: 'email', value: e.email),
        ],
      );
    }).toList();
  }

  @override
  DataGridRowAdapter? buildRow(DataGridRow row) {
    return DataGridRowAdapter(
      cells: row.getCells().map((e) =>
          MouseRegion(
            cursor: SystemMouseCursors.click,
            child: Container(
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.symmetric(horizontal: 20.0),
              child: Text(e.value.toString(), style: const TextStyle(fontSize: 13.0)),
            ),
          ),
      ).toList(),
    );
  }

  List _rows = [];

  @override
  List get rows => _rows;

}

Attachment: main.dart

[Tamilarasan Paranthaman]

Hi Dervin,

In the shared sample, you called the DataGridSource class constructor Source() directly from the SfDataGrid.source property. The DataGridSource must be a long-lived object. If you called the setState method, then DataGrid will reset the selected rows. To overcome this, you need to create an instance for the DataGridSource class to maintain the source when reloading, then assign that instance to the DataGrid source instead of calling the class constructor directly from SfDataGrid.source property. We have modified the shared sample. Please check the following code snippet and sample.

class _MyHomePageState extends State {

  final controller = DataGridController();

  Source datagridSource = Source();

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Flutter DataGrid'),

      ),

      body: Center(

        child: SfDataGrid(

          selectionMode: SelectionMode.multiple,

          controller: controller,

          showCheckboxColumn: true,

          columnWidthMode: ColumnWidthMode.fill,

          source: datagridSource,

          columns: getColumns,

          onSelectionChanged: (o, u) {

            setState(() {});

          },

        ),

      ),

    );

  }

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

We hope this helps. Please let us know if you require any further assistance on this. We will be happy to assist you.

Regards,

Tamilarasan