Grid state with columns reorder

[Domantas]

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:

https://stackblitz.com/edit/angular-2cacsh-3yz6nc?file=filtering.component.ts

[Hariharan J V]

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, 

               }) 

           } 

    } 

 

Sample : https://stackblitz.com/edit/angular-2cacsh-h7ftdt?file=index.html 

Regards, 

Hariharan 

[Domantas]

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]

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) 

Sample : https://stackblitz.com/edit/angular-2cacsh-mhfon7?file=index.html 

Regards, 

Hariharan 

[Domantas]

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]

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]

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:

https://stackblitz.com/edit/angular-2cacsh-5hsgzx?file=index.html

[Hariharan J V]

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; 

    } 

} 

Sample : https://stackblitz.com/edit/angular-2cacsh-iyuiwh?file=filtering.component.ts 

Regards, 

Hariharan