1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Cannot identify key name for persistence data in local storage for child grid

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

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

8 Replies 1 reply marked as answer
PG Praveenkumar Gajendiran Syncfusion Team January 20, 2021 12:35 PM UTC

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); 
  } 
} 
  
  
Please get back to us if you require any further assistance.   
  
Regards,  
Praveenkumar G 


AT Adam Toone January 20, 2021 02:29 PM UTC

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.

PG Praveenkumar Gajendiran Syncfusion Team January 21, 2021 12:44 PM UTC

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 


AT Adam Toone January 21, 2021 04:12 PM UTC

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

PG Praveenkumar Gajendiran Syncfusion Team January 25, 2021 02:11 PM UTC

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 


Marked as answer
AT Adam Toone January 27, 2021 03:13 PM UTC

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

AT Adam Toone January 28, 2021 10:21 AM UTC

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


AG Ajith Govarthan Syncfusion Team January 29, 2021 01:38 PM UTC

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; 
  } 
} 
 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Ajith G. 
 


Loader.
Up arrow icon