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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Simple question for Hierarchical grid

Thread ID:

Created:

Updated:

Platform:

Replies:

142685 Feb 15,2019 07:55 AM UTC Mar 1,2019 06:25 AM UTC Angular - EJ 2 5
loading
Tags: 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


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, 
 
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. 


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


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']  
    } 
 
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


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


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] 
<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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;