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

Grid state with columns reorder

Hello,

I want to ask, how could I maintain ordering with grid state. For example I do have default grid state, then I reorder columns and want to save the column order together with state so when I load state the columns gets reordered.

Stackblitz from past thread:

7 Replies

HJ Hariharan J V Syncfusion Team June 14, 2019 04:12 AM

Hi Domantas, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement and modified the sample based on that. Please refer the below code example and sample for more information. 

function getPersistData(){ 
     . . . . . . . 
           if (data) { 
               gridInst.setProperties({ 
                   sortSettings: { columns: data.sortSettings.columns }, 
    
               }, true) 
           gridInst.setProperties({ 
                   columns : data.columns, 
               }) 
           } 
    } 
 



Regards, 
Hariharan 



DO Domantas June 14, 2019 04:25 AM

Hi again,

I did try to use columns for setProperties before I posted this thread, but applying columns property creates errors in run time. 

Issue: Group columns -> save state -> ungroup -> load state -> fires error (Cannot read property 'length' of undefined)

And I believe there's more than this one error when using "columns"


HJ Hariharan J V Syncfusion Team June 18, 2019 02:04 AM

Hi Domantas, 

Thanks for your update. 

We have validated with our end and when changing  column and group settings dynamically lead the reported problem(due to asynchronous process). We suggest you to use the below way to achieve your requirement. 

      setTimeout(function(){ 
                gridInst.setProperties({ 
                  columns: data.columns, 
                }) 
              }, 20) 



Regards, 
Hariharan 



DO Domantas June 18, 2019 04:05 AM

Hello,

With this approach comes another problem, cause we don't mute on change grid requests data 2 times, after grouping and after column apply. 




HJ Hariharan J V Syncfusion Team June 20, 2019 05:31 AM

Hi Domantas, 

Thanks for your update. 

We have validated with our end and we suggest you to use the below way to resolve the problem. In the below code example, we have applied groupSetting using mute on change so it does not make grid request. Please refer the below code example for more information. 

function getPersistData(){      
      var gridInst = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
      var  getPersistedData= JSON.parse(window.localStorage.getItem("gridPersistData")); 
      var data= JSON.parse(getPersistedData);  
            if (data) { 
                gridInst.setProperties({ 
                    // to prevent the two request 
                    groupSettings: {columns:data.groupSettings.columns}, 
                    sortSettings: { columns: data.sortSettings.columns }, 
                    filterSettings: data.filterSettings, 
                    pageSettings: {pageSize:data.pageSettings.pageSize, currentPage:data.pageSettings.currentPage, pageCount: data.pageSettings.pageCount}, 
                    searchSettings: {fields:data.searchSettings.fields, key:data.searchSettings.key} 
     
                }, true) 
                gridInst.groupModule.updateGroupDropArea(true); 
                for(var i =0; i<data.groupSettings.columns.length; i++){ 
                    gridInst.groupModule.addColToGroupDrop(data.groupSettings.columns[i]) 
                } 
                gridInst.setProperties({ 
                  columns: data.columns, 
                }) 
            } 
     } 

  
Regards, 
Hariharan 



DO Domantas June 26, 2019 04:00 AM

Hello,

This approach did not save us from errors. Columns get stuck after setting the state

Sequence: Group by any column -> Click persist data -> Ungroup grouped column -> Click reset -> Everything just gets stuck

I've made a stackblitz for you:


HJ Hariharan J V Syncfusion Team July 2, 2019 03:21 AM

Hi Domantas, 

Thanks for your update. 

We have validated with our end and we suggest you to use the below way to resolve the reported problem. Please refer the below code example and updated sample for more information. 

public ngOnInit(): void { 
 
    this.grid.getCurrentViewRecords = function () { 
      return (this.allowGrouping && this.groupSettings.columns.length && this.currentViewData.length && (this.currentViewData as Object[] & { records: Object[] }).records) ? 
        (this.currentViewData as Object[] & { records: Object[] }).records : this.currentViewData; 
    } 
} 



Regards, 
Hariharan 


Loader.
Live Chat Icon For mobile
Up arrow icon