Unable to Load Nested Grid Data

[Sivakumar]

Hi,

I am trying to bind a nested grid where on click of the + icon I need to show a nested grid that will be displaying the revenues and profits from the sample data.

Below is the link that I am taking as reference:
https://paramquery.com/pro/demos/export_detail

However I am unable to load the nested grid data.
Below is the link of the jsfiddle:
https://jsfiddle.net/m9Ldsu6e/1/

Please let me know the part that I am missing to bind the nested grid successfully or for any other information.

Thanks,
Uttam

[paramvir]

Uttam

For that example, data for detail grids should be included within the rows of data for main grid.

https://paramquery.com/Content/orderwithdetails.json?pq_datatype=JSON&_=1588815803631

e.g first row of data for main grid in your case should be similar to this

Code: [Select]

{
      rank: 1,
      company: 'Exxon Mobil1234',
      pq_rows_detail: [{
        "revenues": 23,
        "profits": 3,
      }, {
        "revenues": 45,
        "profits": 1,
      }]
    }


[Sivakumar]

Thanks Paramvir,

I changed the data for the details grid as per your suggestion. It worked great.
However, I need to convert my data dynamically to the required format for nested grids.

Below are the URL for my json data. I am not able to change it to the required format using JQuery.
expected json data format - https://jsonblob.com/8d983c44-90a1-11ea-b680-55266526ddaa
actual json data format - https://jsonblob.com/f3e707db-90a1-11ea-b680-a144ececb408.

In the data, I need to group together the data based upon ID and then generate the pq_rows_detail based upon that ID which will be containing for information in json array:
1. RemarkID
2. UserRemark
3. UserStatus
4. RemarkBy

Below is the URLof jsfiddle that will give the UI for the grid that is expected.
http://jsfiddle.net/kty76qvb/

Could you please help me with this?

Thanks in advance,
Uttam
 

[Sivakumar]

Update:

Below is the link for the expected JSON data format -

https://jsonblob.com/d7b317b9-90da-11ea-bb21-d7c78c0fd4b1

Thanks,
Uttam

[paramvir]

you can use the following function to restructure your plain data to nested data for nested grids.

Code: [Select]

  data = function(data, id) {
    var obj = {}, data2 = [];
   
    data.forEach(function(rd) {
      (obj[rd[ id ]] = obj[rd[ id ]] || []).push(rd);
    })
   
    for (var key in obj) {
      var rows = obj[key],
        rd = Object.assign({}, rows[0]);
      rd.pq_rows_detail = rows;
      data2.push(rd);
    }
    return data2;

  }(data, "ID");

https://jsfiddle.net/mwLpexy5/