Cannot identify key name for persistence data in local storage for child grid

[Adam Toone]

Hi,

I am trying to create a function that retrieves the local storage persistence json for my grid and it's child grids. Whilst I can easilly identify the data for the main grid as the local storage key name is in the format 'gridMYGRIDID' the data for child grids seems to be named randomly eg 'gridchild1_grid4017'.

I cannot seem to find any reference to this 'grid4017' ID in the grid object itself when debugging the javascript. Is there a way I can identify the localstorage for a childgrid?

thanks

adam toone

[Praveenkumar Gajendiran]

Hi Adam, 

Thanks for contacting Syncfusion support.

We checked your query and based on that we suspect that your requirement is to identify key name for persistence data in local storage for child grid. 

By default in EJ2 Grid, we dynamically generate ID for child grid based on their parent length and parent row index. If you want to identify the key name in local storage for child grid and set the persisted data again to the same child grid. For this we suggest you to set a unique parentKeyFieldValue to the child Grid id in load event of child grid, so that the proper data will be retrieved and saved to the window local storage.

Please refer the below code example and sample for more information. 

let grid: Grid = new Grid({ 

  dataSource: employeeData, 

  allowSorting: true, 

  enablePersistence: true, 

 

  columns: [ 

    { 

      field: "EmployeeID", 

      headerText: "Employee ID", 

      textAlign: "Right", 

      width: 125 

    }, 

    { field: "FirstName", headerText: "Name", width: 125 }, 

    { field: "Title", headerText: "Title", width: 180 }, 

    { field: "City", headerText: "City", width: 110 }, 

    { field: "Country", headerText: "Country", width: 110 } 

  ], 

  childGrid: { 

    dataSource: orderDatas, 

    queryString: "EmployeeID", 

    enablePersistence: true, 

    allowSorting: true, 

    load: load, 

    created: created, 

    allowPaging: true, 

    columns: [ 

      { 

        field: "OrderID", 

        headerText: "Order ID", 

        textAlign: "Right", 

        width: 120 

      }, 

      { field: "ShipCity", headerText: "Ship City", width: 120 }, 

      { field: "Freight", headerText: "Freight", width: 120 }, 

      { field: "ShipName", headerText: "Ship Name", width: 150 } 

    ] 

  } 

}); 

grid.appendTo("#Grid"); 

 

function load() {  //load event of child grid, 

  this.element.id = "child_" + this.parentDetails.parentKeyFieldValue;  

} 

function created() { 

  var persistData = JSON.parse(localStorage.getItem("grid" + this.element.id)); 

  if (persistData) { 

    this.setProperties(persistData); 

  } 

} 

  

Sample: https://stackblitz.com/edit/gjjqb9-7qegxd?file=index.ts

Documentation: https://ej2.syncfusion.com/documentation/grid/state-persistence/#getset-localstorage-value

API Link: https://ej2.syncfusion.com/documentation/api/grid/#load
                 https://ej2.syncfusion.com/documentation/api/grid/#created 

  

Please get back to us if you require any further assistance.   

  

Regards,  

Praveenkumar G 

[Adam Toone]

Hi,

Unfortunately that doesn't work. On the load function 'this.element' is null. I am using javascript not typescript so perhaps that is the reason however 'this' is still available.

[Praveenkumar Gajendiran]

Hi Adam, 

Sorry for the inconvenience caused. We have prepared the same sample in JavaScript for your reference but still could not reproduce the reported problem. Please find the sample below, 

  

Sample: https://stackblitz.com/edit/9thdlx?file=index.js

So please get back to us with the below details that will be helpful for us to validate further.  

1)                 Share complete Grid rendering code. 

2)                 Syncfusion package version used. 

3)                 Share the console window, if you have any script error. 

4)                 Let us know the object returned in “this” keyword inside the child grid load and create event? 

5)                 If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. 

Regards,
Praveenkumar G 

[Adam Toone]

Hi,

I have created a massively stripped down version of the gird (and child grid) using your datascource, (as ours is an odata source not available outsdide of the network) but one which the error does remain.

I have attached the files (test.html and test.js) and if you run those and try to expand a child grid you should see that the below error occurs on the console window as it can't find this.element.

I also have another issue which may or may not be related but which is hard to replicate without our data. When you expand the child grid for the 1st row, then expand the child grid for another row and then click to sort on a column - the data for that 2nd child grid then appears in the grid for the 1st row. This suggests a conflict of child grids somewhere along the line!

Uncaught TypeError: Cannot set property 'id' of undefined

    at t.load (test.js:2)

    at e.notify (ej2.min.js:10)

    at t.e.trigger (ej2.min.js:10)

    at t.render (ej2.min.js:10)

    at t.appendTo (ej2.min.js:10)

    at e.toogleExpandcollapse (ej2.min.js:10)

    at e.clickHandler (ej2.min.js:10)

    at e.notify (ej2.min.js:10)

    at t.notify (ej2.min.js:10)

    at t.mouseClickHandler (ej2.min.js:10)

thanks

Attachment: test_f64f9cd7.zip

[Praveenkumar Gajendiran]

Hi Adam,

We checked your query and provided sample. In that, we found you have defined a childGrid in an improper way. So we suggest to follow the below code example to define the childGrid object in Grid.

Code Example: 

var grid = new ej.grids.Grid({ 

  dataSource: window.employeeData, 

  allowSorting: true, 

  enablePersistence: true, 

  columns: [ 

    { 

      field: "EmployeeID", 

      headerText: "Employee ID", 

      textAlign: "Right", 

      width: 125 

    }, 

    { field: "FirstName", headerText: "Name", width: 125 }, 

    { field: "Title", headerText: "Title", width: 180 }, 

    { field: "City", headerText: "City", width: 110 }, 

    { field: "Country", headerText: "Country", width: 110 } 

  ], 

  childGrid: { 

    dataSource: window.hierarchyOrderdata, 

    queryString: "EmployeeID", 

    enablePersistence: true, 

    allowSorting: true, 

    load: load, 

    created: created, 

    columns: [ 

      { 

        field: "OrderID", 

        headerText: "Order ID", 

        textAlign: "Right", 

        width: 120 

      }, 

      { field: "ShipCity", headerText: "Ship City", width: 120 }, 

      { field: "Freight", headerText: "Freight", width: 120 }, 

      { field: "ShipName", headerText: "Ship Name", width: 150 } 

    ] 

  } 

}); 

grid.appendTo("#Grid"); 

  

Sample: https://stackblitz.com/edit/9thdlx?file=index.js

If the issue still persist, please get back to us.

Regards,
Praveenkumar G 

[Adam Toone]

Hi,

Thanks you. I think i was trying to be a bit too clever...however, i have now got things working as required.

thanks again

[Adam Toone]

Hi, 

Unfortunately I have just noticed one rather big issue with this.Once you pass the persistData back in using this.setProperties(persistData) each columns' headerText is removed and the headers in the grid simply revert to the fieldid.

I can see within the localStorage string itself that the headerText value does not appear in the model for each column.

Also, as a test if I view this.columns in the debugger i can see headerText appears for each columns but if i do JSON.Stringify(this.columns) then the headerText, as well as many other properties, dissapear. 

It therefore seems then once the setProperties method is called the columns are overwritten with columns that do not include a headerText.

Hopefully you can shed some light on this?

adam

[Ajith Govarthan]

Hi Adam, 

 

Thanks for the update. 

 

Query: I can see within the localStorage string itself that the headerText value does not appear in the model for each column. Also, as a test if I view this.columns in the debugger i can see headerText appears for each columns but if i do JSON.Stringify(this.columns) then the headerText, as well as many other properties, dissapear. 

 

By default in EJ2 Grid some cases the headerText may dynamically change , so we did not persist the headerText . So, we have prepared sample and in that sample we have neglected the columns property from the persistData and applied all other properties to show the actual headerText of the columns.  

 

For your convenience we have attached the sample so please refer them for your reference. 

 

Code Example: 

Index.js 

 

ej.base.enableRipple(true); 

 

var grid = new ej.grids.Grid({ 

  dataSource: window.employeeData, 

  allowSorting: true, 

  enablePersistence: true, 

  columns: [ 

    { 

      field: "EmployeeID", 

      headerText: "Employee ID", 

      textAlign: "Right", 

      width: 125 

    }, 

    { field: "FirstName", headerText: "Name", width: 125 }, 

    { field: "Title", headerText: "Title", width: 180 }, 

    { field: "City", headerText: "City", width: 110 }, 

    { field: "Country", headerText: "Country", width: 110 } 

  ], 

  childGrid: { 

    dataSource: window.hierarchyOrderdata, 

    queryString: "EmployeeID", 

    enablePersistence: true, 

    allowSorting: true, 

    load: load, 

    created: created, 

    columns: [ 

      { 

        field: "OrderID", 

        headerText: "Orderds", 

        textAlign: "Right", 

        width: 120 

      }, 

      { field: "ShipCity", headerText: "City", width: 120 }, 

      { field: "Freight", headerText: "Freight", width: 120 }, 

      { field: "ShipName", headerText: "Ship Name", width: 150 } 

    ] 

  } 

}); 

grid.appendTo("#Grid"); 

function load() { 

  this.element.id = "child_" + this.parentDetails.parentKeyFieldValue; 

 var persistData = JSON.parse(localStorage.getItem("grid" + this.element.id)); 

  if (persistData) { 

    this.pageSettings = persistData.pageSettings; 

    this.sortSettings = persistData.sortSettings; 

    this.filterSettings = persistData.filterSettings; 

    this.groupSettings = persistData.groupSettings; 

    this.selectedRowIndex = persistData.selectedRowIndex; 

    this.searchSettings = persistData.searchSettings; 

  } 

} 

 

 

 

Sample Link: https://stackblitz.com/edit/9thdlx-kz7zyy?file=index.js 

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G.