We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Persist and restore grid's state

Hi, 

We have a sfDataGrid in a tabview, embedded in another stateful widget. Grid is sorted, maybe filtered, and scrolled in a row. We move in another tab (  hiding the tab where the grid was created). 
Returning back (changing the visibility of the tab),  we update the  GridSource, if a  new object have been added  or updated in the source data,
The question is how we can return the Grid in its filtered/sorted state and previous row position ? 
How to persist its state ?
We can't find a way to keep the container widget with the Grid without rebuild, after we hide the tab.

Thank you


4 Replies

ST Stefan Tsalapatis November 13, 2022 01:44 AM UTC

I found how to keep the tab  (and the Grid inside) when the visibility changes, using in the parent widget

AutomaticKeepAliveClientMixin and  wantKeepAlive.
But I'm interested in general  how to persist the Grid's state



TP Tamilarasan Paranthaman Syncfusion Team November 14, 2022 01:57 PM UTC

Based on your requirement, if you switch to the other tab view from the DataGrid tab view, then the existing DataGrid state would be disposed of. Again, you switch to the DataGrid tab the state would be initialized again. So, you would lose the existing sort/filtering state. As you mentioned in the query, you can maintain using the AutomaticKeepAliveClientMixin and wantKeepAlive properties. Also, DataGrid doesn't have any other default support for maintaining the DataGrid State.



DV Detlef Volmer March 11, 2023 07:03 PM UTC

Hello,

I have a similar issue. I want to store the sorting status of the grid. I've implemented all that and it basically works. But after changing the sorting I can not find a proper time to write the status. All routines (performSorting, compare) are called too often and ruin the performance or get in conflict with setState while building.

I also tried onCellTap on the grid header. This is called only once, but blocks the sorting logic itself.

Any ideas here?

Thank you.



TP Tamilarasan Paranthaman Syncfusion Team March 13, 2023 11:04 AM UTC

Hi Detlef Volmer,


Based on your requirements, it seems like you can achieve the desired functionality by utilizing the performSorting method. This method is called when you sort the column by tapping on the header or by calling notifyListeners from the DataGridSource class. To retrieve the sort column details, you can access the sortedColumns property. Additionally, please note that the onCellTap callback will be triggered before the sorting operation is performed. Therefore, it will not be possible to achieve the desired functionality using the onCellTap callback. It is recommended to use the performSorting method as mentioned earlier. We have created a sample application to demonstrate the solution to your issue. We have implemented functionality to save the sort column details in a list and print the details with the button click. Please refer to the following code snippet and sample for better understanding.


List<SortColumnDetails> sortColumnsDetails = <SortColumnDetails>[];

 

  @override

  void initState() {

    super.initState();

    _employees = getEmployeeData();

    _employeeDataSource = EmployeeDataSource(_employees);

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Flutter SfDataGrid'),

      ),

      body: Column(

        children: [

          Container(

            margin: const EdgeInsets.all(15),

            child: ElevatedButton(

                onPressed: () {

                  for (var details in sortColumnsDetails) {

                    print('column name ${details.name}');

                    print('sort direction ${details.sortDirection}');

                  }

                },

                child: const Text('Print Sort Column Details')),

          ),

          Expanded(

            child: SfDataGrid(

              source: _employeeDataSource,

              allowSorting: true,

              columns: getColumns,

              columnWidthMode: ColumnWidthMode.fill,

            ),

          ),

        ],

      ),

    );

  }

 

In performSorting method:

class EmployeeDataSource extends DataGridSource {

 

 

  @override

  void performSorting(List<DataGridRow> rows) {

    // save the sort column details

    if (sortedColumns.isNotEmpty) {

      sortColumnsDetails.clear();

      sortColumnsDetails.addAll(sortedColumns);

    }

    // clear the sort column details when the sorting is cleared

    else if (sortedColumns.isEmpty) {

      sortColumnsDetails.clear();

    }

    super.performSorting(rows);

  }

}



Regards,

Tamilarasan


Attachment: sample_2c94179.zip

Loader.
Live Chat Icon For mobile
Up arrow icon