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:
my 2nd grid in which I am trying to push data of locations from the selected rows in 1st grid
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.
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?
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.
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.
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
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.
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
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!
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 4th , 2022.
Until then we appreciate your patience.
Regards,
Vinitha Balasubramanian
Hi Frank,
Our office is closed on Nov 4th 2022, We will surely update you by Monday, Nov 7th 2022. Thank you so much for your patience.
Regards,
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
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?
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
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/