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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid state with columns reorder

Thread ID:

Created:

Updated:

Platform:

Replies:

145244 Jun 13,2019 01:56 PM UTC Jul 2,2019 11:21 AM UTC Angular - EJ 2 7
loading
Tags: Grid
Domantas
Asked On June 13, 2019 01:56 PM UTC

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:

Hariharan J V [Syncfusion]
Replied On June 14, 2019 12:12 PM UTC

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 


Domantas
Replied On June 14, 2019 12:25 PM UTC

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"

Hariharan J V [Syncfusion]
Replied On June 18, 2019 10:04 AM UTC

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 


Domantas
Replied On June 18, 2019 12:05 PM UTC

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. 



Hariharan J V [Syncfusion]
Replied On June 20, 2019 01:31 PM UTC

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 


Domantas
Replied On June 26, 2019 12:00 PM UTC

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:

Hariharan J V [Syncfusion]
Replied On July 2, 2019 11:21 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon