ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: Sivakumar on May 07, 2020, 02:11:58 am

Title: Unable to Load Nested Grid Data
Post by: Sivakumar on May 07, 2020, 02:11:58 am

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 (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/ (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

Title: Re: Unable to Load Nested Grid Data
Post by: paramvir on May 07, 2020, 08:00:11 am

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,
      }]
    }


Title: Re: Unable to Load Nested Grid Data
Post by: Sivakumar on May 08, 2020, 02:16:57 am

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 (https://jsonblob.com/8d983c44-90a1-11ea-b680-55266526ddaa)
actual json data format -  https://jsonblob.com/f3e707db-90a1-11ea-b680-a144ececb408 (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/ (http://jsfiddle.net/kty76qvb/)

Could you please help me with this?

Thanks in advance,
Uttam
 

Title: Re: Unable to Load Nested Grid Data
Post by: Sivakumar on May 08, 2020, 08:54:57 am

Update:

Below is the link for the expected JSON data format -

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

Thanks,
Uttam

Title: Re: Unable to Load Nested Grid Data
Post by: paramvir on May 08, 2020, 10:27:15 am

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/