Sync Horizontal Scrolling on SFDataGrid multiple table
I want to create multiple SFDataGrid table from some dynamic data.
Now I want every table's first column will be frozen, and other will be horizontally scrollable.
But I want if I scroll into one table then it will work for every table.
I could not figure it out how to implement it. there have no clue on SFDataGrid doc
I did it programmatically but It performs slow
can you help me to figure it out.
Thank you
Hi Syed
Ashiq Sorife,
To achieve your requirement, you can utilize the SfDataGrid.horizontalScrollController.
Firstly, create a ScrollController and assign it to the corresponding property
of the DataGrid. Next, in the initState method, add listeners to the respective
horizontal scroll controller. Within the listener, you can update the scroll
offset of other DataGrids based on the current horizontal offset of the
DataGrid. For your convenience, we have prepared a simple sample and attached
it for your reference. Kindly review the following code snippet and sample to
gain a better understanding of the implementation.
|
ScrollController firstDataGridHorizontalScrollController = ScrollController(); ScrollController secondDataGridHorizontalScrollController =ScrollController();
@override void initState() { super.initState(); _employees = getEmployeeData(); _employeeDataSource = EmployeeDataSource(_employees);
firstDataGridHorizontalScrollController.addListener(() { if (firstDataGridHorizontalScrollController.offset != secondDataGridHorizontalScrollController.offset) {
// make the second datagrid scroll position sync with first datagrid secondDataGridHorizontalScrollController .jumpTo(firstDataGridHorizontalScrollController.offset); } });
secondDataGridHorizontalScrollController.addListener(() { if (secondDataGridHorizontalScrollController.offset != firstDataGridHorizontalScrollController.offset) {
// make the first datagrid scroll position sync with second datagrid firstDataGridHorizontalScrollController .jumpTo(secondDataGridHorizontalScrollController.offset); } }); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter SfDataGrid'), ), body: Card( margin: const EdgeInsets.all(20), child: Column(children: [ Container( color: Colors.teal, height: 40, width: MediaQuery.of(context).size.width, child: const Center(child: Text('Syncfusion Flutter DataGrid 1')), ), Expanded( child: SfDataGrid( source: _employeeDataSource, horizontalScrollController: firstDataGridHorizontalScrollController, columns: getColumns, frozenColumnsCount: 1, defaultColumnWidth: 200, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both), ), Container( color: Colors.teal, height: 40, width: MediaQuery.of(context).size.width, child: const Center(child: Text('Syncfusion Flutter DataGrid 2')), ), Expanded( child: SfDataGrid( source: _employeeDataSource, horizontalScrollController: secondDataGridHorizontalScrollController, frozenColumnsCount: 1, columns: getColumns, defaultColumnWidth: 200, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both)), ]), )); } |
Regards,
Tamilarasan
Attachment: sample_6d4f4bc3.zip
Thanks Tamilarasan Paranthaman for your reply. but on my case it's not working. I am using Listview.builder for creating table.
<p> List</p><scrollcontroller> _horizontalScrollController = [];
@override
void initState() {
super.initState();
for (int i = 0; i < _horizontalScrollController.length; i++) {
_horizontalScrollController[i].addListener(() {
print("test listen");
for (int j = 0; j < _horizontalScrollController.length; j++) {
if (_horizontalScrollController[i].offset !=
_horizontalScrollController[j].offset) {
print("test offset");
_horizontalScrollController[j]
.jumpTo(_horizontalScrollController[i].offset);
}
}
});
}
}
///i set controller length on a streambuilder, which is wrapped all other code _horizontalScrollController = List.generate(
snapshot.data.broaderCategory.length,
(index) => ScrollController());
SizedBox(
height: 400,
child: ListView.builder(
itemCount: snapshot.data.broaderCategory.length,
itemBuilder: (context, index) {
final category =
snapshot.data.broaderCategory[index];
return Container(
// padding: const EdgeInsets.only(top: 10.0),
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Color.fromRGBO(0, 0, 0, 0.26))),
child: Builder(builder: (context) {
FinancialTableDataSource dataSource1 =
FinancialTableDataSource(
category.lineItems,
snapshot.data.dates);
return SfDataGridTheme(
data: SfDataGridThemeData(
frozenPaneLineColor: Colors.transparent,
frozenPaneElevation: 0,
headerColor: Color(0xFFECF5F9)),
child: SfDataGrid(
source: dataSource1,
verticalScrollPhysics:
NeverScrollableScrollPhysics(),
isScrollbarAlwaysShown: false,
horizontalScrollController:
_horizontalScrollController[index],
// controller: _controller[index],
shrinkWrapRows: true,
frozenColumnsCount: 1,
headerRowHeight: 50,
onQueryRowHeight: (details) {
return 30.0;
},
columnWidthMode: ColumnWidthMode.auto,
headerGridLinesVisibility:
GridLinesVisibility.both,
gridLinesVisibility:
GridLinesVisibility.both,
defaultColumnWidth: 100,
// frozenRowsCount: 0,
columns: [
GridColumn(
columnName:
category.broaderCategoryName,
width: 175,
// columnWidthMode: ColumnWidthMode.fitByCellValue,
label: Container(
padding: const EdgeInsets.only(
left: 12.0),
alignment: Alignment.centerLeft,
child: Text(
category.broaderCategoryName,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16.0,
fontWeight:
FontWeight.bold),
),
)),
...snapshot.data.dates.map((e) =>
GridColumn(
columnName: e,
label: Container(
padding:
const EdgeInsets.only(
left: 12.0),
alignment:
Alignment.centerLeft,
child: Text(
e,
style: TextStyle(
fontSize: 16.0,
fontWeight:
FontWeight.bold),
))))
],
),
);
}),
);
}),
),</scrollcontroller>
Syed Ashiq
Sorife,
Based on the information provided, we have prepared a simple sample that
utilizes the ListView.builder to create the DataGrid and incorporates ScrollController
for each respective DataGrid. During our testing of this sample, we
observed that when scrolling one DataGrid, the other DataGrids also scroll
accordingly. For your convenience, we have attached the tested sample for your
reference. Kindly review the sample and the accompanying output reference video
for further insights.
|
int tableCount = 2; final List<ScrollController> _horizontalScrollController = <ScrollController>[];
@override void initState() { super.initState();
for (int i = 0; i < tableCount; i++) { ScrollController scrollController = ScrollController(); _horizontalScrollController.add(scrollController); } _employees = getEmployeeData(); _employeeDataSource = EmployeeDataSource(_employees);
for (int i = 0; i < tableCount; i++) { _horizontalScrollController[i].addListener(() { for (int j = 0; j < tableCount; j++) { if (_horizontalScrollController[i].offset != _horizontalScrollController[j].offset) { print("test offset"); _horizontalScrollController[j] .jumpTo(_horizontalScrollController[i].offset); } } }); } }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter SfDataGrid'), ), body: ListView.builder( itemCount: tableCount, itemBuilder: (BuildContext context, int index) { return SfDataGrid( source: _employeeDataSource, horizontalScrollController: _horizontalScrollController[index], columns: getColumns, frozenColumnsCount: 1, defaultColumnWidth: 200, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both); }, ), ); } |
If you continue to experience the same issue, we kindly request you to provide the sample that you are encountering the issue with. Alternatively, you may modify the attached sample to make it reproducible. By doing so, we will be able to thoroughly investigate and understand the problem, thereby allowing us to provide an appropriate and timely solution.
Attachment: sample_3b91204a.zip
- 4 Replies
- 2 Participants
-
SA Syed Ashiq Sorife
- May 24, 2023 06:44 AM UTC
- May 25, 2023 10:21 AM UTC
