Header columns wont scroll after shrinkWrapColumns is true

[pluzmedia]

Header columns ain't scrollable after shrinkWrapColumns: true. How to achieve that?

[Tamilarasan-Paranthaman]

Hi @pluzmedia,

Greetings from Syncfusion.

The Header columns will not be scrollable if you use the shrinkWrapColumns property. Because if you use shrinkWrapColumns, then the DataGrid sets its maximum width based on the available columns in the DataGrid, so all the columns are laid out. Please provide more details and a sample in case we misunderstood your requirement. It will be helpful for us to check on it and provide you with the solution at the earliest.

Regards,
Tamilarasan

[pluzmedia]

So it's a limitation. I want to use use textfileds with focus node in the cells. Focusnodes got destroyed after scrolling the data grid horizontally, to over come this should to use shrinkWrapColumn but it has limitation.

[Tamilarasan-Paranthaman]

Hi @pluzmedia,

If you’re using the focus node in the TextField and scrolling the DataGrid horizontally, the focus node will be destroyed. Because DataGrid will reuse the rows while scrolling. That’s why the focus node is destroyed. Can you please let us know the purpose of using the focus node in TextField? Also, please provide the exact details of your requirement. It will be helpful for us to check on it and provide you with the best solution at the earliest.

Regards,
Tamilarasan

[pluzmedia]

We are using focusnode to navigate textfields by arrow key or enter button.

[Tamilarasan-Paranthaman]

Hi @pluzmedia,

You can achieve it by using the SingleChildScrollView Widget. Wrap the DataGrid as a child of the SingleChildScrollView and set the scrollDirection property to Axis.horizontal. It will allow you to scroll the header horizontally. Please check the following code snippet.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
        body: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: SfDataGrid(
                  source: _employeeDataSource,
                  shrinkWrapColumns: true,
                  columns: getColumns),
            ));
  }

Also, we have published the KB article about how to perform vertical or horizontal scrolling in Flutter DataGrid by mouse dragging in web or desktop platforms. Please refer the following KB document,

KB link: https://www.syncfusion.com/kb/12893/how-to-perform-vertical-or-horizontal-scrolling-in-flutter-datatable-sfdatagrid-by-mouse

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

Regards,
Tamilarasan

[YancyHsu]

Hi @pluzmedia,

You can achieve it by using the SingleChildScrollView Widget. Wrap the DataGrid as a child of the SingleChildScrollView and set the scrollDirection property to Axis.horizontal. It will allow you to scroll the header horizontally. Please check the following code snippet.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
        body: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: SfDataGrid(
                  source: _employeeDataSource,
                  shrinkWrapColumns: true,
                  columns: getColumns),
            ));
  }

Also, we have published the KB article about how to perform vertical or horizontal scrolling in Flutter DataGrid by mouse dragging in web or desktop platforms. Please refer the following KB document,

KB link: https://www.syncfusion.com/kb/12893/how-to-perform-vertical-or-horizontal-scrolling-in-flutter-datatable-sfdatagrid-by-mouse

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

Regards, Tamilarasan

use this method, frozenColumnsCount wont work

[abineshPalanisamy]

Hi @YancyHsu ,

In SfDataGrid, when shrinkWrapColumns and shrinkWrapRows are enabled, the DataGrid sets its maximum width and height based on the available columns and rows. This causes all columns and rows to be laid out, removing the built-in scrollbars in both directions.

To enable scrolling, wrap the DataGrid in a SingleChildScrollView and set the appropriate scrollDirection. However, using SingleChildScrollView makes the entire grid scrollable, which disables the freeze pane feature of the DataGrid.

In this case, freeze panes are not applicable, and this is the expected behavior of the DataGrid when using shrinkWrap.

Regards,
Abinesh P

[ashok-kuvaraja]

Hi @pluzmedia,

We suspect that the reported issue has been resolved at your end. Hence, we are closing this issue. If you need any further assistance, please reopen this. We are always happy to help.

Regards,
Ashok K