1. Home
  2. Forum
  3. Vue
  4. Vue grid: Hierarchical Binding with nested array

Vue grid: Hierarchical Binding with nested array

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 (nested arrays, like this:

[{
   id: 0
   parentProp2: x
   parentProp3: y
   ...
   parentArrayChildRecords:[ {id: 0, childProp: z ... },  {...}, {...} ]
} ,
{
   id: 1
   parentProp2: x
   parentProp3: y
   ...
   parentArrayChildRecords:[ {id: 0, childProp: z ... },  {...}, {...} ]
} ...
]


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. is it possible that way too?

I have not seen solutions implemented in vue when the data source is unique, like my case.

Could you provide a simple example where I use a single data source and can observe its structure. I understand that it can be done by setting the childGrid and assigning a queryString (id for example), but it is not working for me. It does not show records in the child grid, and no console errors

Thanks

Marc

4 Replies 1 reply marked as answer
TS Thiyagu Subramani Syncfusion Team March 5, 2021 11:31 AM UTC

Hi MS Dev, 

Greeting form Syncfusion support. 

Based on your shared information we suspect that you want to populate Grid and Child Grid using same dataSource. By default this feature is enabled by defining the childGrid and childGrid.queryString. The childGrid describes the options of grid and the childGrid.queryString describes the relation between parent and child grids. We have achieved your requirement by mapping nested array data to the child Grid’s dataSource in detailDataBound event like below. 

export let employeeData = [ 
  { 
    ParentArrayChildRecords: [ 
      { EmployeeID: 1, childProp: "text", childProp2: "text2" }, 
      { EmployeeID: 2, childProp: "text", childProp2: "text2" }, 
. . . . . . .  
    ], 
    EmployeeID: 1, 
    LastName: "Davolio", 
    .. . . . . .  
  }, 
  { 
    EmployeeID: 2, 
    ParentArrayChildRecords: [ 
      { EmployeeID: 1, childProp: "text", childProp2: "text2" }, 
      { EmployeeID: 2, childProp: "text", childProp2: "text2" }, 
      . . . . . . .  
    ], 
    LastName: "Fuller", 
    FirstName: "Andrew", 
. . . . . .  
  }] 
<template> 
  <div class="col-lg-12 control-section"> 
    <div> 
      <ejs-grid 
        :dataSource="parentData" 
        :childGrid="childGrid" 
        :allowSorting="true" 
         :detailDataBound="detailDataBound" 
      > 
        <e-columns> 
. . . . . . . . . . 
        </e-columns> 
      </ejs-grid> 
    </div> 
  </div> 
</template> 
<script> 
. . . . . . . . . . . . . . . 
export default Vue.extend({ 
  data: () => { 
    return { 
      parentData: employeeData.slice(0, 5), 
      childGrid: { 
        queryString: "EmployeeID", 
. . . . . . 
        columns: [ 
          { 
            field: "EmployeeID", 
            headerText: "Order ID", 
            textAlign: "Right", 
            width: 120, 
          }, 
          { field: "childProp", headerText: "Child Prop", width: 120 }, 
          { field: "childProp2", headerText: "Child Prop2", width: 120 }, 
        ], 
      }, 
     methods: { 
      detailDataBound: function (args) { 
      args.childGrid.dataSource = args.data.ParentArrayChildRecords; 
    }, 
    }; 
  }, 
}); 
</script> 

 

Screenshot:  

 



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

Regards, 
Thiyagu S 


Marked as answer
MD MS Dev March 5, 2021 01:48 PM UTC

Thanks .. Now it works correctly.

Now I have another related problem. I want to export the table with the expanded child grids to pdf, even if they are collapsed or hidden on the screen.

Try the following by placing this in the: toolbarClick = "gridExport"

gridExport(args) {
      if (args.item.id === "Grid_pdfexport") {
        this.$refs.grid.pdfExport({hierarchyExportMode: 'All'})
        let pdfExportProperties = {
          pageOrientation: "Landscape",
          fileName: `F${this.selectedForm.form}_${this.selectedForm.description}_V.${this.selectedForm.version}.pdf`, (....)
} }

Without results. Keep exporting only the parent table. Is it the right place and way to do it? 
Could you guide me with that?
Thanks again

MS DEV


MD MS Dev March 5, 2021 03:08 PM UTC

RESOLVED. He was putting the property in the wrong place.

gridExport(args) {
      if (args.item.id === "Grid_pdfexport") {
        let pdfExportProperties = {
          pageOrientation: "Landscape",
hierarchyExportMode: 'All'
          fileName: `F${this.selectedForm.form}_${this.selectedForm.description}_V.${this.selectedForm.version}.pdf`, (....)
} }

Thanks Again! 


TS Thiyagu Subramani Syncfusion Team March 8, 2021 04:52 AM UTC

Hi MS Dev, 

Thanks for your update. 

We are happy to hear that you have achieved your requirements.  

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

Regards, 
Thiyagu S 


Loader.
Up arrow icon