You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
changed the title [-]Header columns wont scroll after shrinkWrapColums is true[/-][+]Header columns wont scroll after shrinkWrapColumns is true[/+]on Apr 19, 2022
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.
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.
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.
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.
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,
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.
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,
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.
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.
Activity
[-]Header columns wont scroll after shrinkWrapColums is true[/-][+]Header columns wont scroll after shrinkWrapColumns is true[/+]Tamilarasan-Paranthaman commentedon Apr 20, 2022
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 commentedon Apr 20, 2022
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 commentedon Apr 21, 2022
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 commentedon Apr 21, 2022
We are using focusnode to navigate textfields by arrow key or enter button.
Tamilarasan-Paranthaman commentedon Apr 22, 2022
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.
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 commentedon Nov 18, 2024
use this method, frozenColumnsCount wont work
abineshPalanisamy commentedon May 26, 2025
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 commentedon Jun 9, 2025
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