Using data from master grid in child grid on row select. How to?

[Jonas Blazinskas]

How it looks visually on page if it helps to visualise the problem

[Jonas Blazinskas]

Hi there,

I am trying to use data from one grid in another, this is how my data is structured:

my first grid which works fine:

<ejs-grid

class="route-grid"

#routeGrid

(actionComplete)="actionCompleteRoute($event)"

(rowSelected)="onRowSelected($event)"

[editSettings]="editSettings"

[toolbar]="routeToolbar"

allowFiltering="true"

[filterSettings]="filterSettings"

allowResizing="true"

height="calc(50vh - 30px - 87px - 1px)"

>

<e-columns>

<e-column field="name" headerText="Name">e-column>

<e-column field="user" headerText="User">e-column>

<e-column

field="date"

headerText="Date"

type="date"

format="dd/MM/yyyy"

editType="datepickeredit"

>

e-column>

e-columns>

ejs-grid>

@ViewChild('routeGrid') public routeGrid: GridComponent;

firebase.list('/routes').valueChanges().subscribe(routes => {

this.routeGrid.dataSource = routes ; //intial data binding to grid

});

firebase.list('/routes').snapshotChanges().subscribe(routes => {

this.routeGrid.dataSource = routes; // sync server data changes to grid

});

}

my 2nd grid in which I am trying to push data of locations from the selected rows in 1st grid

<ejs-grid

#routelocationGrid

id="routelocationGrid"

[allowSelection]="false"

>

<e-columns>

<e-column field="name" headerText="Name">e-column>

<e-column field="address" headerText="Address">e-column>

<e-column field="postcode" headerText="Postcode">e-column>

e-columns>

ejs-grid>

@ViewChild('routelocationGrid') public routelocationGrid: GridComponent;

public onRowSelected(args: any): void {

this.routelocationGrid.dataSource = args.data.locations;

console.log(args.data.locations)

}

This is the result I am getting from the console log and the error at the beginning before row select, data does not appear in the second grid

I am very much a beginner and I have been using examples and learning from them bug the master/child grids example shows how to query the same data source instead of just using args data of a select row if the data is stored deeper in the json object.

[Jonas Blazinskas]

ok so the error was from me setting the datasource in another place that I forgot to remove but still I am not reading in the data and I still have the same problem with no error message now. I feel like something is wrong with the data for example there is that json: [] object that I am not sure where it comes from and maybe it is throwing everything off? Should I remove it somehow? how would one go about this? 

[Joseph Christ Nithin Issack]

Hi Frank,

   Greetings from Syncfusion support.

   Before proceeding with the solution, we would like you to share the following information so that we will be able to provide a better solution ASAP.

• Please share a simple sample to reproduce the issue you are experiencing.
• Please share a video demo of the issue you are experiencing.
• Please share the Syncfusion package version you are using.

We would also like you to share a demo where we have explained how to use master/details, please refer the below sample.

Sample: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/master-detail

Please get back to us for further details.

Regards,

Joseph I.

[Jonas Blazinskas]

Hey Joseph,

I was going to edit the stackblitz demo   https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/master-detail  but it does not seem to work

[Joseph Christ Nithin Issack]

Hi Frank,

   Thanks for your update.

   Based on your query, when you try to edit the sample in stackblitz, you were facing some issue. We have shared a stackblitz sample here. Please refer the below sample.

  Sample: https://stackblitz.com/edit/angular-s9djyo-yeutb1?file=app.component.ts,app.component.html

Please get back to us for further details.

Regards,

Joseph I.

[Jonas Blazinskas]

Hi Joseph,

So I am trying to do something like this https://stackblitz.com/edit/angular-s9djyo-kaqmqd?file=app.component.ts,app.component.html

  public onRowSelected(args: RowSelectEventArgs): void {

    console.log(args.data);

    this.detailgrid.dataSource = args.data;

}

where I use args.data directly into my child grid datasource.

Now unfortunately your example does not have nested deeper-level data like mine but I assume that lets say here in my example at least 1 entry would show up of in child grid from the selected row from the master grid.

And in my instance I would try to use args.data.locations to pick up my nested locations from the master grid and display in child grid. Could you potentially produce an example of how to achieve something like that with the way my data is structured?

Thank you for your help in advance!

[Vinitha Balasubramanian]

Hi Frank,

Thanks for your update.

Currently, we are validating your reported problem with your shared information, and we will update you the details on or before Nov 4^th , 2022.

Until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Hi Frank,

Our office is closed on Nov 4^th 2022, We will surely update you by Monday, Nov 7^th 2022.  Thank you so much for your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Hi Frank,

Thanks for your patience.

We have prepared a sample to achieve your requirement “to pick up my nested locations from the masterGrid and display in childGrid”. Kindly refer the sample for your reference.

Sample : https://stackblitz.com/edit/angular-s9djyo-wwww3s?file=app.component.ts,data.ts,app.component.html

Please get back to us if you need further assistance.

Regards,

Vinitha Balasubramanian

[Jonas Blazinskas]

Hi Vinitha,

Thank you for your help, I think I know what the problem is now. My location data is an object whereas you stored it as an array therefore I assume that is something that is causing problems for me.


But I think this is not the right path for me anyway as I will be updating the Locations data as I have a row selected in the Master Grid and I am sure my updated data won't show up in the Child grid as the row selected data is a snapshot on when the row was selected correct? Therefore I should just extract the master grid row selected key and just feed the correct data into the child data with the key by fetching it from the database just like how I fetch data into the master grid?

[Vinitha Balasubramanian]

Hi Frank,

Currently we are validating your query with shared information at our end. We will update you the further details shortly. Until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Joseph Christ Nithin Issack]

Frank,

  By default The dataSource property can be assigned either with the instance of DataManager or JavaScript object collection. Refer the blow documentation for more details.

  Documentation: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/data-binding/