Simple question for Hierarchical grid

Jose Luis Garcia

Asked On February 15, 2019 07:55 AM UTC

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

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On 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,

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/?no-cache=1#bind-hierarchy-grid-with-different-field

If we have misunderstood your query, we need more details to further proceed on this and provide you a solution,

Share a video demonstration explaining your requirement.
Share with us the structure of data with field types you are binding to Grid.
What is the type for “parentPropX.childRecords” field.
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.

Reply | Reply with quote

Jose Luis Garcia

Replied On 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

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On 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']

}

Sample: https://stackblitz.com/edit/angular-u7a1eg-alznpo?file=master-details-export.component.ts

Please get back to us for further assistance.

Regards,

Pavithra S.

Reply | Reply with quote

Jose Luis Garcia

Replied On 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

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On 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]

<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' };

}

Sample link: https://stackblitz.com/edit/angular-wtifyf-8k6yxu?file=default.html

Please get back to us, if you need further assistance.

Regards,

Pavithra S.

Reply | Reply with quote

Elmor Cabalfin

Replied On 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

Reply | Reply with quote

Sujith Kumar Rajkumar [Syncfusion]

Replied On 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,

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/?#bind-hierarchy-grid-with-different-field

Let us know if you have any concerns.

Regards,

Sujith R

Reply | Reply with quote

Elmor Cabalfin

Replied On August 12, 2020 01:20 AM UTC

Ahh, I got your point. I missed that.

Thanks a lot.

Reply | Reply with quote

Sujith Kumar Rajkumar [Syncfusion]

Replied On 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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
142685	Feb 15,2019 07:55 AM UTC	Aug 12,2020 07:45 AM UTC	Angular - EJ 2	9

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US