Enable persistence of expanded/collapsed Rows does not work on page refresh

[Adnan Ali]

I am unable to persist Expanded State of Rows when Page is refreshed

   <SfTreeGrid ID="TreeGridID" EnablePersistence="true" DataSource="@HierarchyDetatillist" @ref="HierarchyTreeGrid" IdMapping="CatId" ParentIdMapping="ParentId" TreeColumnIndex="0"

                        EnableCollapseAll="true" Toolbar="@(new List<string>() { "Search" })" AllowPaging="false" RowHeight="40" AllowFiltering="true" AllowSorting="false">

                <TreeGridFilterSettings HierarchyMode="FilterHierarchyMode.None" Type="Syncfusion.Blazor.TreeGrid.FilterType.Excel"> </TreeGridFilterSettings>

                <TreeGridEvents QueryCellInfo="OnQueryCellInfo" TValue="CategoryHierarchy"></TreeGridEvents>

                <TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></TreeGridSelectionSettings>

This is my initial Grid Setting

[Adnan Ali]

Can i have a sample or little guidance related to this kindly. I am stuck on this issue

[Pon Selva Jeganathan]

Hi Adnan, 

 

Thanks for contacting syncfusion forum. 

Query: Enable persistence of expanded/collapsed Rows does not work on page refresh

We are able to reproduce the issue( unable to persist Expanded State of Rows when Page is refreshed) at our end. In Tree Grid, we don’t have support for persisting the expanded state of records by default. We are working on this query with high priority. And we need time to find a feasible solution of your issue and will update you with further details by 17^th February, 2022.

 

Until then we value your patience. 

 

Regards,   

Pon selva   

[Pon Selva Jeganathan]

Hi Adnan, 

Thanks for your patience 

In TreeGrid, by default, we don’t have support for persisting expanded/collapsed state. On performing every action, entire TreeGrid gets refreshed, so we couldn’t maintain the Expanded/Collapsed state of the rows on Page reload. 

Regards,
Pon selva 

[Adnan Ali]

How can we achieve this requirement, any work around if possible 

[Pon Selva Jeganathan]

Hi Adnan, 

 

Thanks for the update 

 

Query: expand/collapsed state persist in Tree Grid 

 

We have achieved your requirement by workaround solution. Please following the below steps, 

1. We have saved the collapsed record’s primarykey value to localStorage in “Collapsed” event of Tree Grid by using the method “SetItemAsync”
2. On page refresh, “DataBound” event will be triggered. In that event, we have retrieved the saved record by using the method “GetItemAsync”.
3. Then we have collapsed the specific rows by using the “CollapseByKey” method of Tree Grid by passing the row detail as a parameter.

 

Please check the below code snippet, 

   <SfTreeGrid ID="TreeGrod" DataSource="@TreeData" @ref="TreeGrid" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" EnablePersistence="true"> 

<TreeGridEvents Collapsed="collapsed" DataBound="databound" TValue="BusinessObject"></TreeGridEvents> 

 

    <TreeGridColumns> 

        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 

        …. 

    </TreeGridColumns> 

</SfTreeGrid> 

 

@code{ 

    public SfTreeGrid<BusinessObject> TreeGrid; 

   public int[]  currentdata  = new int[] {}; 

    List<int> list = new List<int>(); 

      public class BusinessObject 

    { 

        public int TaskId { get; set; } 

        public string TaskName { get; set; } 

        public int Duration { get; set; } 

        public int Progress { get; set; } 

        public string Priority { get; set; } 

        public int? ParentId { get; set; } 

 

        

    } 

 

    public List<BusinessObject> TreeData = new List<BusinessObject>(); 

 

    

 

    public async void databound(object args) 

    { 

        if (TreeGrid != null  && localStorage != null){ 

            //checking whether it has localstorage 

            currentdata =(await localStorage.GetItemAsync<int>("currentdata")); 

      //retriving collapsed key value in local storage using getItem method 

      if (currentdata != null) { 

           for (var i = 0; i < currentdata.Length; i++) 

          { 

                     

          TreeGrid.CollapseByKeyAsync(currentdata[i]); //collapsing row using collapseByKey method 

                     

                }  

        } 

        

      } 

    } 

   

 

         

    

      public void collapsed(RowCollapsedEventArgs<BusinessObject> args) 

    { 

 

      if (args.Data != null) 

        { 

            list.Add(args.Data.TaskId); 

            currentdata =list.ToArray();; //Get the collapsed row primary key value 

 

            localStorage.SetItemAsync("currentdata", currentdata); 

        }//store the collapsed row primary key value 

 

          } 

 

Please check the below sample, 

https://www.syncfusion.com/downloads/support/forum/172818/ze/SyncfusionBlazorlocalstorage-1616922776 

 

Please refer to the below documentation, 

https://www.syncfusion.com/faq/blazor/general/how-do-i-access-browser-local-storage-in-blazor 

 

Please check the below help documentations, 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_CollapseByKeyAsync_System_Object_ 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EnablePersistence 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_Collapsed 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_DataBound 

 

Note: While using CollapseByKey method, you need to enable IsPrimaryKey property in anyone of the columns. 

 

Kindly get back to us for further assistance. 

Regards,
Pon selva