Editing doesn't work after updates ?

[Domantas]

Hello,

I had my edit working and didn't change anything in it (as i remember), but now if i want to edit grid i get these errors: 

The "create" error when you double click the row, and the 'querySelectorAll' after any upcoming row selection.

It doesn't mark errors on my side of code so I'm pretending these errors started appearing after modules update

[Venkatesh Ayothi Raman]

Hi Domantas, 

Thanks for using Syncfusion products. 

We suspect that you are upgrade the project from older version to latest version. In Latest version, All grid enum property values are changed from camel casing to pascal casing. Please refer the below link for complete API changes from v15.4.23 to v16.1.24. 

Please refer to the following release notes and Migration documentation for upgrade to latest version, 

https://ej2.syncfusion.com/16.1.24/documentation/release-notes/16.1.24.html?lang=typescript#grid 

https://ej2.syncfusion.com/16.1.24/documentation/grid/migration.html?lang=es5 

 

If we misunderstood your requirement, then could you please provide the following details? 

1)      Share the Essential JS2 version (Both older version and upgraded version). 

2)      Share the Full Grid code example. 

3)      Scenario for replication procedure. 

4)      Are you using any edit template feature for Grid column? If so, share the details. 

 

 

Regards, 

Venkatesh Ayothiraman. 

[Domantas]

Hello,

So i discovered that my issue is not cause of package updates. My issue appears when I try to avoid data circularity error. I posted a thread before to get answer how to avoid circularity and you suggested to delete "edit" object.

Here's the link to thread: https://www.syncfusion.com/forums/137875/how-to-avoid-circular-grid-structure

I'll try to tell by steps what is happening.

So I load grid first time. When grid loads for the first time I want to save its state. In order to do that i need to convert Grid structure object so I stringify it. All works fine if grid is not editable. Editable grid has some circularity and when I try to save it, circularity error kicks in, so I posted a thread that I mentioned before. 

We can avoid circularity error by deleting "edit" object as you suggested. But then another issue occurred. When I load grid second time and try to apply my saved state to grid the edit functionally doesn't work at all cause we deleted it in order to avoid the error. That's the case why those errors appeared that I showed you above in this post.

So my query would be: How to avoid object circularity that is caused by "edit" object but do not lose editing in grid. 

[Venkatesh Ayothi Raman]

Hi Domantas, 

Thanks for the update. 

As from your query, would you like to load the Grid state which is saved by us previously. For your scenario, we suggest you save the Grid state by calling the getPersistData API. In this method returns the corresponding Grid model as JSON string. So, you can load the save state by like as follows, 

saveState(args:any){ 

       

      //Save the Current Grid state 

      window.gridSate =this.Grid.getPersistData() 

       

    } 

     

     loadState(args:any){ 

       //load the Grid state 

      let gridState = JSON.parse(window.gridSate); 

      if(gridState){ 

     this.Grid.columns = gridState.columns; 

      } 

    } 

We have also prepared a sample for your convenience which can be referred from following link, 

Sample: https://plnkr.co/edit/K2YxGid9rVd47eoObIgM?p=preview 

Also, we suspect that do you want to maintain the Grid state while re-load the page in grid. If so, we have built-in feature of enablePersistence in Grid. Please refer to the following help documentation for more information, 

https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/state-persistence.html 

If you still face the same issue, then could you please provide following details? 

1)      Share the Grid code example  

2)      Share the code example of load the state from JSON string. 

3)      Do you re-render the Grid or rendered the new grid based on old grid state? 

4)      Scenario to reproduce the issue. 

5)      Share more details about your requirement. 

Regards, 

Venkatesh Ayothiraman. 

[Domantas]

Hey,

So I came back to this part after some time and i kinda get this working, but facing some optimization issues.

So the first issue is that sortSettings needs to be timed out cause if i don't do so it will cause the error (see picture below). I assume the columns that I give from state doesn't render in time for sortSettings. 

 

Issue number 2. I save all the settings (sort, page, filter, group, columns and etc...) and cause of that, when I'm applying them one by one to the grid, grid every time calls back-end and applies the GET method to render wanted data by settings.

So my two queries would be:

Query 1: How to avoid setting timeout for sortSettings and know when the columns are rendered and set for other settings

Query 2: Is there a way to apply all settings to the grid and then call the back-end with all parameters to avoid GET method to be called with every setting. 

Query 2 might solve Query 1 at the same time if there is a correct way of doing it 

[Venkatesh Ayothi Raman]

Hi Doomantas, 

 

We have validated your query and we went through your code example which you have shared with us. As from your query, you would like to dynamically set the new Grid properties with one shot. If so, we suggest you use setProperties method to dynamically add the new Grid properties in load event like as follows, 

 

[app.component.ts] 

@Component({ 

  selector: 'app-exp', 

  template: `<ejs-grid #grid id="grid" [dataSource]="datas" (load)='load($event)' [allowSorting]="true" [sortSettings]="sortSettings" [allowFiltering]="true" [filterSettings]="filterSettings" 

 [columns]="columns" [allowGrouping]="true"> 

</ejs-grid>` 

}) 

export class SubComponent implements OnInit{  

_ 

  @ViewChild('grid') public grid: GridComponent; 

  ngOnInit() { 

  .    .    . 

  } 

load(e:any){ 

this.grid.setProperties({ sortSettings: {columns: [{ field: 'OrderID', direction: 'Ascending' }]}, filterSettings: { columns: [{ field: 'CustomerID', matchCase: false, operator: 'contains', predicate: 'and', value:"ALFKI" }] } }, false); 

} 

} 

 

Please refer to the above code example and it resolves the Query 1# ‘How to avoid setting timeout for sortSettings and know when the columns are rendered and set for other settings’. Please let us know if you have any further assistance on this.  

 

Regards, 

Venkatesh Ayothiraman. 

[Domantas]

Hello,

I tried your suggestion but that did not quite work as expected. It still occurred the same issues. 

My approach: 

Some settings (pageSettings and filterSettings) still causes errors. sortSettings somehow do not cause error anymore it might be cause i applied columns to "columnModel" not to "columns" (I think). However, grid still triggers grid action every single time when applying settings and calls back-end. Even filterSettings causes error it does work when applying filter and resetting it after that, but pageSettings error does not render pages and does not work at all.

[Renjith Singh Rajendran]

Hi Doomantas, 

We have analyzed the reported script errors. We could reproduce the errors only when we use the “setProperties” inside the “dataBound” event of Grid. When the setProperties is used inside the “load” event of Grid, we were not able to get any script error. We have prepared a sample by setting the currentPage for the Grid using setProperties inside the load event of Grid. Please refer the link below, 

Sample : https://plnkr.co/edit/NiNiTpBzcOyxBTDkOAFc?p=preview 

 

Please refer the code example below, 

<ejs-grid #grid [dataSource]='data' [allowPaging]='true' [height]='315' (load)='load($event)'> 

... 

</ejs-grid> 

 

}) 

export class AppComponent{ 

 

    public data: Object[]; 

 

    ngOnInit(): void { 

        this.data = data; 

    } 

    load(e:any){ 

     var obj = document.getElementsByClassName("e-grid")[0].ej2_instances[0] 

      obj.setProperties({ pageSettings: {currentPage: 2}}, false); 

    } 

 

} 

 

Please confirm whether you are using the setProperties code inside “dataBound” or “load” event to further proceed on this query. 

Regards, 

Renjith Singh Rajendran. 

[Domantas]

Hello,

Okay, so what I was trying to do is to set settings after some time to grid, not just on the first load. For example, grid was loaded and after some time I click button which applies these settings to the grid, but then load() event won't be called, it will call only dataBound. I was searching for events to reset the grid and get into load() event again. I tried to use grid.rendermodule.refresh() but that didn't access load method either. 

Query: How to apply state settings to grid on click button or in other words, how to get the load event to fire again to set state settings.

[Venkatesh Ayothi Raman]

Hi Domantas, 

 

Thanks for the update. 

 

Yes, we are able to reproduce the reported issue at our end while calling the getPersistData API in Grid. We have considered this “Columns property value and pageSettings property value is missing while calling the getPersistData” as bug and logged the defect report. This fix will be included in our upcoming patch release August 2,2018. Until we appreciate your patience. 

 

Regards, 

Venkatesh Ayothiraman. 

[Domantas]

Hello,

I wanna ask, was this update released ? Cause in the last 16.2.XX I do not see setProperties changes that we talked about in this thread and I'm still occurring the same issue.

[Venkatesh Ayothi Raman]

Hi Doomantas, 

 

 

Thanks for the update. 

 

Yes, the fix ‘Columns property value and pageSettings property value is missing while calling the getPersistData’ was included in last Volume 2, SP1 release (v16.2.46). We have prepared a sample based on your requirement which can be referred from following link, 

Sample: https://stackblitz.com/edit/angular-igyvbk?file=filtering.html 

 

Code example: 

getPersistData(){ 

  

 var gridInst = document.getElementById("Grid").ej2_instances[0]; 

 

  var  getPersistedData= JSON.parse(window.localStorage.getItem("gridPersistData")); 

        var data= JSON.parse(getPersistedData);  

 

        if (data) { 

             

           

            gridInst.setProperties({ 

                columnModel: data.columns, 

                sortSettings: { columns: data.sortSettings.columns }, 

                groupSettings: {columns:data.groupSettings.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} 

 

            },false) 

        } 

 } 

 

 

If you still face the same issue, then could you please provide following details? 

1)      Share the code example of the Grid and setProperties method. 

2)      Issue reproducing scenario. 

3)      Replication of the issue. 

4)      Modified the given sample as issue reproducible. 

 

 

 

Regards, 

Venkatesh Ayothiraman. 

[Domantas]

Hello again,

By my first look it did the job when applying states (didn't test all the situations and etc.), then I tried to apply states on editable grid and after getting the persistData and trying to edit, these errors appeared (see picture below).

I did represent the issue in your given example:

https://stackblitz.com/edit/angular-igyvbk-zuab4u?file=filtering.html

[Venkatesh Ayothi Raman]

Hi Domantas, 

Thanks for the update. 

 

Query : I tried to apply states on editable grid and after getting the persistData and trying to edit, these errors appeared 

 

We have analyzed your query and we prevent the edit object on persist data due to the circular reference where data refers to its own. For your scenario, we suggest you use refreshCoumns method of the grid after the setProperties property in the getPersistData method. Please find the below sample and documentation for your reference. 

Code Example: 

[.ts] 

... 

function getPersistData(){ 

 

 var gridInst = document.getElementById("Grid").ej2_instances[0]; 

  var  getPersistedData= JSON.parse(window.localStorage.getItem("gridPersistData")); 

        var data= JSON.parse(getPersistedData);  

 

        if (data) { 

            gridInst.setProperties({ 

                columnModel: data.columns, 

                sortSettings: { columns: data.sortSettings.columns }, 

                groupSettings: {columns:data.groupSettings.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} 

 

            },false) 

            gridInst.refreshColumns();   //Here we have used the refreshColumns method 

        } 

} 

... 

 

Sample: https://stackblitz.com/edit/angular-igyvbk-knwrrm?file=index.html  

Documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#refreshcolumns  

Please get back to us for further assistance. 

Regards, 

Venkatesh Ayothiraman. 

[Domantas]

Hello,

Thank you for your answer, the columns refresh did solve the problem.

Taking small steps to the end of this thread.

However, there's one big issue that wasn't solved yet and I did mention it in this thread. The issue with multiple databound (back-end) calls when applying the state. I was hoping that setProperties would do the trick, but it seems it stayed the same. When applying the state to the grid, multiple actions are called: filtering, sorting, ungrouping and etc. and every action calls DataBound so this causes a lot of request to database to get newly rendered data.

Query: How to render state with single back-end request. 

Example: https://stackblitz.com/edit/angular-igyvbk-gvbvec?file=filtering.component.ts

[Pavithra Subramaniyam]

Hi Domantas, 

 

We have checked your sample and You have set the muteOnChange property in the setProperties method as false. This is the cause of the reported behavior. You can refresh the grid settings simultaneously by setting muteOnChange as true. So the Grid will refresh only after all property has been set. Please refer to the below code example and sample link. 

 

[index.html] 

function getPersistData(){ 

 .  .  . 

        if (data) { 

             

           

            gridInst.setProperties({ 

                .  .  . 

                pageSettings: {pageSize:data.pageSettings.pageSize, currentPage:data.pageSettings.currentPage, pageCount: data.pageSettings.pageCount}, 

                searchSettings: {fields:data.searchSettings.fields, key:data.searchSettings.key} 

 

            },true) 

            gridInst.refreshColumns(); 

        } 

 } 

 

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

 

Regards, 

Pavithra S. 

[Domantas]

Hello,

Thank you, everything that we talked about above is now working. But the more I try the more new issues I get.

I was using templates in some of the columns and when you do getPersistData(); the template property doesn't get along with it and when applying state there's no template anymore.

Query: after setting a state with getPersistData() column doesn't have template anymore

Example: 

https://stackblitz.com/edit/angular-2cacsh-ywfmtd?file=filtering.html

[Venkatesh Ayothi Raman]

Hi Domantas, 

Thanks for your update. 

 

Query : I was using templates in some of the columns and when you do getPersistData(); the template property doesn't get along with it and when applying state there's no template anymore 

 

We have analyzed your query and column templates are not persisted in the getPersistData method due to circular reference issue(where column template element will refer to its own element). So we do not have support for a getPersistData method in the column template. But as a workaround, we can get template strings using template property of the column. In the below sample, we have initially stored the template strings of corresponding template columns in the local storage in handleClick custom function and in the getPersistData function, we are reassigning them to their respective columns. Please refer to the below sample for your reference. 

Code Example: 

[.ts] 

... 

            <script> 

    function handleClick(){ 

    var gridInst = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

 

     var templates = []; 

    templates[0] = gridInst.columns[1].template;  //getting template string of the column 

    templates[1] = gridInst.column[2].template; 

    window.localStorage.setItem("gridTemplates", JSON.stringify(templates)); //storing the template strings in the local storage 

 

       var persistData = gridInst.getPersistData(); 

... 

 

    } 

 

     function getPersistData(){ 

 

 var gridInst = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

 

  ... 

            gridInst.refreshColumns(); 

 

            var templates = JSON.parse(window.localStorage.getItem("gridTemplates"));  //getting the template string from local storage 

            gridInst.columns[1].template = gridTemplates[0];                           //assigning back the template strings to respective columns 

            gridInst.columns[2].template = gridTemplates[1]; 

        } 

} 

    </script>  

            <script id= 'template' type="text/x-template"><div> kjbkjh </div></script>   //template with id as ‘template’ 

        </body>      

... 

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

 

Please get back to us for further assistance. 

Regards, 

Venkatesh Ayothiraman.