Primary key to foreign key relationship for child grid

Question

I have a grid with a child grid. Both using a datamanager to connect to OData resources.

I have a setup similar to this sample: http://ej2.syncfusion.com/15.4.23/angular/demos/#/material/grid/hierarchy

Using queryString the link between the grid and its child grid works when both tables share the exact field name for both the foreign key and primary key.

However if the grid and its child grid do not share a common field, I was not able to find any documentation to define the mapping.

For example

The below works:

Parent grid with fields: ParentId, Name, PriceChild grid with fields: ChildId, Name, Price, ParentId



However, the following does not:

Parent grid with fields: Id, Name, PriceChild grid with fields: ChildId, Name, Price, ParentId



What would be the best way to map the Id to ParentId?Thanks

Isuriya Rajan · Answer

Hi Ralph, 

Thanks for contacting Syncfusion support, 

Child Grid dataSource will load based on the childGrid->queryString property. Here we have to provide common field name for both parent and child grid. To use different fields between parent and child we can do the parent key value mapping in the child Grid’s load event as follows. 





  this.childGrid = { 
        dataSource: categoryData, 
        queryString: 'ProductID', 
        load: function load() { 
            this.parentDetails.parentKeyFieldValue = this.parentDetails.parentRowData['EmployeeID'] 
        }, 
        columns: [ 
            { field: 'CategoryName', headerText: 'Category Name', textAlign: 'right', width: 120 }, 
            { field: 'ProductID', headerText: 'Product ID', width: 120 }, 
       ], 
    }; 


Please refer the sample for your reference. In this sample we have loaded the child grid dataSource based on their parent grid primary key. 

Sample: http://plnkr.co/edit/brGULH9RKgfUDLn9es4L?p=preview 

Regards, 
Isuriya R