Issues with Text Selection and Scrolling in Syncfusion DataGrid Wrapped in SelectionArea - Web

[EduardoYamauchi]

Hello,

I'm experiencing issues with the Syncfusion DataGrid in the Web when it is wrapped in a SelectionArea, especially concerning text selection behavior in grid cells that contain Text widgets with a Key.

Issue Description

When I select text from a row and then scroll to a point where the row is no longer visible:

• Problem A: The text selection disappears, contrary to expectations. I would expect the text selection to persist and be visible when I scroll back to the row.
• Problem B: Sometimes, when I attempt to reselect text in other cells after scrolling, it fails.

Could anyone help me address Problems A and B? Any guidance on how to maintain text selection across scrolls or insight into what might be causing the reselection issues would be greatly appreciated.

Thank you!

Steps to reproduce

1 - Select text from a row.
2 - Scroll to a point where the row is no longer visible.

Code sample

Code sample

/// SfDataGrid Declaration
SelectionArea(
  child: SfDataGrid(
    columns: columns,
    source: source,
    // other properties
  )
)

// Row declaration
@Override
DataGridRowAdapter buildRow(DataGridRow row) {
  var widgets = row.getCells().map((cell) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.all(8),
      child: Text(
        key: Key(cell.columnName + id),
        cell.value.toString(),
      ),
    );
  });

  return DataGridRowAdapter(
    cells: widgets.toList(),
  );
}

Screenshots or Video

Screenshots / Video demonstration

Screen.Recording.2024-05-01.at.14.01.52.mov

Stack Traces

Stack Traces

No stack trace.

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.19.6, on macOS 14.4.1 23E224 darwin-arm64, locale en-BR)
    • Flutter version 3.19.6 on channel stable at /Users/eduardoyamauchi/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (2 weeks ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[!] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15E204a
    ✗ Unable to get list of installed Simulator runtimes.
    • CocoaPods version 1.13.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] IntelliJ IDEA Community Edition (version 2023.2.6)
    • IntelliJ at /Users/eduardoyamauchi/Applications/IntelliJ IDEA Community Edition.app
    • Flutter plugin version 79.0.1
    • Dart plugin version 232.10313

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 124.0.6367.93

[✓] Network resources
    • All expected network resources are available.

[abineshPalanisamy]

Hi @EduardoYamauchi ,

Based on the provide details, the issue facing on your end is due to virtualizing concept. In SfDataGrid, we are using virtualizing concepts to build the DataGridRows. So rows are get reused when we scroll the DataGrid. This virtualizing concepts affect the selection of value by using SelectionArea widget. To rectify the issue you can enable SfDataGrid.shrinkWrapRows property in SfDataGrid. However, when using shrinkWrapRows, all rows are built during the initial loading. So virtualizing concepts were not happens in DataGrid. Keep in mind that this might affect performance during the initial loading phase.

We have attached a sample and code snippets for your reference. Please refer to the following sample and snippets for more information. If you have any further concerns, please feel free to reach out.

• Code snippet:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter DataGrid'),
      ),
      body: SelectionArea(
        child: SfDataGrid(
          shrinkWrapRows: true,
          source: employeeDataSource,
          columns: getColumns ),
      ),
    );
  }

• Sample:
  SfDataGrid.zip

Regards,
Abinesh P

[EduardoYamauchi]

It worked. I am testing this table for a potential migration; we are assessing its feasibility, ensuring that it supports all the features we already have. One of the points I am testing is the speed and quality of the support, which was addressed very quickly. Thank you for the quick feedback!