We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Simple question for Hierarchical grid

Hi,

I've  a simple question regarding populating Grid and Child Grid.
My data come from an API and I'm receiving parent and child data together, like this:

ROW1
   parentProp1
   parentProp2
   parentProp3
   ...
   parentPropX.childRecords
ROW2
   parentProp1
   parentProp2
   parentProp3
   ...
   parentPropX.childRecords
ROW3
...
ROWX

How I'm able to create a Grid with a Child Grid from this data. All I've read in documentation is about getting data from parent and getting data from child separately.
Regards
Jose


9 Replies

PS Pavithra Subramaniyam Syncfusion Team February 19, 2019 03:40 AM UTC

Hi Jose, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your query. We suspect that you may wish to update the child grid’s data dynamically, so we suggest you to use the “created” event of parent Grid. In this event handler you can update the child grid’s data by using the codes below, 
 
<ejs-grid #grid [dataSource]='parentData' (created)="created($event)" [childGrid]='childGrid' ...> 
    ... 
</ejs-grid> 
 
    created(args: any) { 
       this.childGrid.dataSource = ...;  //Here you can provide the child Grids data from the previously fetched data from web api 
    } 
 
 
We would also like to inform you that the parent child Grid works in a way that, both the parent and child Grid should contain a same field name with values, and with that field name specified in the “queryString” property the child grid will be rendered based on the value in each row. We would like to suggest you the below documentation if you are willing to have different field names and no same field name for both child and parent Grids, 
 
If we have misunderstood your query, we need more details to further proceed on this and provide you a solution, 
  1. Share a video demonstration explaining your requirement.
  2. Share with us the structure of data with field types you are binding to Grid.
  3. What is the type for “parentPropX.childRecords” field.
  4. Share the detailed description about the data you will be receiving.
 
The provided information will help us analyze the problem, and provide you a solution as early as possible. 
 
Regards, 
Pavithra S. 



JL Jose Luis Garcia February 22, 2019 10:55 AM UTC

Hi Pavithra,

Thank you for your response.
I think I'm not explaining me right.

This is an example of parent/child json received from api:

[
  {
    "companyId": "1",
    "name": "ACME, SL",
    "employees": "50",
    "contacts": [
      {
        "companyId": "1",
        "employeeId": "1",
        "name": "John",
        "surename": "Smith",
        "department": "Finanzes"
      },
      {
        "companyId": "1",
        "employeeId": "2",
        "name": "Alex",
        "surename": "Sanchez",
        "department": "Support"
      },
      {
        "companyId": "1",
        "employeeId": "3",
        "name": "Carmen",
        "surename": "Calvo",
        "department": "Finanzes"
      }
    ]
  },
  {
    "companyId": "2",
    "name": "Trendsuper Inc.",
    "employees": "30",
    "contacts": [
      {
        "companyId": "2",
        "employeeId": "4",
        "name": "John",
        "surename": "Wartong",
        "department": "Labs"
      },
      {
        "companyId": "2",
        "employeeId": "5",
        "name": "Quentin",
        "surename": "Tarantino",
        "department": "Support"
      },
      {
        "companyId": "2",
        "employeeId": "6",
        "name": "Josh",
        "surename": "Sheldon",
        "department": "IT"
      }
    ]
  },
  {
    "companyId": "3",
    "name": "Cacatua Inc.",
    "employees": "10",
    "contacts": [
      {
        "companyId": "3",
        "employeeId": "8",
        "name": "Walter",
        "surename": "Distey",
        "department": "Labs"
      },
      {
        "companyId": "3",
        "employeeId": "9",
        "name": "Quentin",
        "surename": "Danubio",
        "department": "Support"
      }
    ]
  }
]

I'm not able to see how to attach child records to child grid in parent created method.
Just binding the same parent datasource?
Could you show me some example?
Regards
Jose



PS Pavithra Subramaniyam Syncfusion Team February 25, 2019 12:28 PM UTC

Hi Jose, 
 
Thanks for your update. 
 
From the query we suspect that you would like to bind parent data source of nested object(contacts) to the child grid. To achieve your requirement, we suggest to use the load event of the child grid and in the event we suggest to provide the childGrid dataSource as shown in the below sample, 
 
.[ts] 
load(args){ 
      (this as any).dataSource = [(this as any).parentDetails.parentRowData]; //in your case this.parentDetails.parentRowData['contacts']  
    } 
 
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 



JL Jose Luis Garcia February 28, 2019 10:14 AM UTC

Hi Pavithra,

Now it's working with your solution!!!
Thank you very much for your help.

Now I'm having some problems with dates filtering (this is a general error, not related to child grids).
I'm using spanish globalization options and the dates are displayed fine (dd/mm/yyyy) but filtering dates is not working.

If I select Menu or Bar as filter settings, no errors are displayed but filtering does not works.
If I try with Excel filter, the spinner appears in filter box but Chrome always display this error in console:

ERROR Error: Uncaught (in promise): TypeError: value.getDate is not a function
TypeError: value.getDate is not a function
    at vendor.js:73832
    at ValueFormatter.push../node_modules/@syncfusion/ej2-grids/src/grid/services/value-formatter.js.ValueFormatter.toView (vendor.js:143496)
    at ExcelFilter.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/checkbox-filter.js.CheckBoxFilter.createFilterItems (vendor.js:113402)
    at ExcelFilter.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/checkbox-filter.js.CheckBoxFilter.processDataSource (vendor.js:113291)
    at ExcelFilter.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/checkbox-filter.js.CheckBoxFilter.dataSuccess (vendor.js:113276)
    at vendor.js:113251
    at Array.forEach ()
    at vendor.js:113250
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:425)
    at Object.onInvoke (vendor.js:31625)
    at resolvePromise (polyfills.js:865)
    at polyfills.js:930
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:457)
    at Object.onInvokeTask (vendor.js:31616)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:456)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:229)
    at drainMicroTaskQueue (polyfills.js:635)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (polyfills.js:536)
    at ZoneTask.invoke (polyfills.js:521)
    at timer (polyfills.js:2315)

My dates are coming in json like this: relatedInvoiceDate"2019-01-01T00:00:00"

I'm attaching a screenshot. In this sc you can see dates displayed correctly and the filter box empty and the error after press filter button.

Definition of grid is:

this.childGrid = {
dataSource: this.childData,
load: this.load,
queryString: 'invoiceId',
allowFiltering: true,
filterSettings: this.filterOptions,
columns: [
{ field: 'invoiceId', headerText: 'ID', visible: false, width: 100 },
{ field: 'relatedInvoiceCode', headerText: 'Factura', allowFiltering: true, width: 150 },
{ field: 'relatedInvoiceDate', headerText: 'Fecha', type: 'date', format: 'short', allowFiltering: false, width: 125 },
{ field: 'relatedInvoiceProject', headerText: 'Proyecto', allowFiltering: false, width: 150 },
{ field: 'relatedInvoiceQuotationCode', headerText: 'Presupuesto', allowFiltering: false, width: 150 },
{ field: 'relatedInvoiceQuotationVersion', headerText: 'V.', allowFiltering: false, width: 75 },
{ field: 'relatedInvoiceTotalAmount', headerText: 'Importe', type: 'number', format: 'C',
allowFiltering: true, textAlign: 'Right', width: 125 },
{ field: 'relatedInvoiceDueDate', headerText: 'Vto.', type: 'date', format: 'short', allowFiltering: false, width: 125 },
{ field: 'relatedInvoicePaid', headerText: 'Cobrado', displayAsCheckBox: true,
allowFiltering: true, textAlign: 'Center', width: 100 },
{ field: 'relatedInvoicePaidIxC', headerText: 'Pagado', displayAsCheckBox: true,
allowFiltering: true, textAlign: 'Center', width: 100 },
{ field: 'relatedInvoicePaidIxCDate', headerText: 'Fec. Pago', type: 'date', format: 'short',
allowFiltering: true, width: 125 }
]
};

Any idea?
Thank you in advanced.
Jose



PS Pavithra Subramaniyam Syncfusion Team March 1, 2019 06:25 AM UTC

Hi Jose, 
 
Greetings from the Syncfusion. 
 
We have validated your query and We suspect that date values are bound on the relatedInvoiceDate(from your sample) column and It is consider as ‘string’ type data because of the date value is in string format  which is cause of the issue. In the below sample, we have achieved your requirement by using JSON.parse method and also filtering is working properly. Please refer the below sample and code example for better assistance. 
 
[default.html] 
<div class="control-section"> 
    <ejs-grid #grid [dataSource]='data' allowFiltering='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings'  [allowResizing]="true"> 
        .  .   .   . 
    </ejs-grid> 
</div> 
 
[default.component.ts] 
loadCldr(cagregorian, currencies, numbers, timeZoneNames); // load json files 
setCulture('es'); // Change the Grid culture 
setCurrencyCode('EUR'); // Change the currency code 
let localData: string = JSON.stringify([{"OrderID":10248,"CustomerID":"VINET","EmployeeID":5,"OrderDate":"1996-07-04T00:00:00Z","RequiredDate":"1996-08-01T00:00:00Z","ShippedDate":"1996-07-16T00:00:00Z","ShipVia":3,"Freight":3500.10,"ShipName":"Vins et alcools Chevalier","ShipAddress":"59 rue de l'Abbaye","ShipCity":"Reims","ShipRegion":null,"ShipPostalCode":"51100","ShipCountry":"France"} 
.    .    .   . 
]) 
// Parse the Json string values  
let parseDataSource: Object[] = JSON.parse(localData, (field: any, value: any) => { 
    let dupValue: any = value; 
    if (typeof value === 'string' && /^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) { 
        let arr: any = dupValue.split(/[^0-9]/); 
        let arg: any = parseInt(arr[4], 10); 
        let arg1: any = parseInt(arr[5], 10); 
        value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), arg, arg1); 
    } 
    return value; 
}); 
ngOnInit(): void { 
        this.data = parseDataSource; // Bind the parsed JSON value in EJ2 Grid 
        this.filterSettings = { type: 'Excel' };        
} 
 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Pavithra S. 



EC Elmor Cabalfin August 11, 2020 06:18 AM UTC

Hi Team,

I'm following the same exact solution you provided here:  https://stackblitz.com/edit/angular-u7a1eg-alznpo?file=master-details-export.component.ts  
But the child data is not displayed.

I have save screenshot of both html and ts codes.

Hoping for your great help.

Thank you

Attachment: screenshot_bd1fd4ea.zip


SK Sujith Kumar Rajkumar Syncfusion Team August 11, 2020 12:38 PM UTC

Hi Elmor, 
 
Greetings from Syncfusion support. 
 
We checked your query with the shared code snippet and grid data images. In that we could see that you have set the child Grid’s “queryString” property value as “bodyPartId” which is present in the parent Grid’s data source but not in the child Grid’s data source. As explained in our previous updates in this forum, both the parent and child Grid should contain a common field name with values which is specified in the child Grid’s “queryString” property. Based on this relation only the child grid will be mapped with its corresponding parent row. 
 
So you can resolve your problem by defining the “bodyPartId” field in both parent and child Grid’s data source with common values in parent and child. 
 
If you need to perform parent and child Grid relation with different fields then you need to change the mapping value in the child Grid’s load event as explained in the below help documentation link, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 



EC Elmor Cabalfin August 12, 2020 01:20 AM UTC

Ahh, I got your point. I missed that.

Thanks a lot.


SK Sujith Kumar Rajkumar Syncfusion Team August 12, 2020 07:45 AM UTC

Hi Elmor, 

You’re welcome. Please get back to us if you require any further assistance. 

Regards, 
Sujith R 


Loader.
Live Chat Icon For mobile
Up arrow icon