Hierarchy Child grid is empty

[Bojan Lavrencic]

Hi!

I have problem getting Hierarchy grid to work in my Vue2 app. I have pretty straight forward sample and it does not work. What am I missing? This is my code

<template>

  <div id="app">

    <ejs-grid ref="grid" :dataSource="parentData" :childGrid="childGrid">

      <e-columns>

        <e-column field="parentId" headerText="Id" width="50" />

        <e-column field="notification" headerText="Notification" width="280" />

        <e-column field="productCode" headerText="ProductCode" width="200" />

        <e-column field="description" headerText="Description" width="250" />

      </e-columns>

    </ejs-grid>

  </div>

</template>

<script>

import Vue from 'vue'

import { GridPlugin, DetailRow } from '@syncfusion/ej2-vue-grids'

Vue.use(GridPlugin)

export default {

  data() {

    return {

      parentData: [

        {

          parentId: 1,

          notification: 'Notification 1',

          productCode: '85261402',

          description: 'This is sample description 1',

        },

        {

          parentId: 2,

          notification: 'Notification 2',

          productCode: '85241502',

          description: 'This is sample description 1',

        },

      ],

      childData: [

        {

          childId: 1,

          parentId: 1,

          event: 'This is sample event for parent 1',

          machineKey: 3648,

        },

        {

          childId: 2,

          parentId: 2,

          event: 'This is sample event for parent 2',

          machineKey: 3649,

        },

        {

          childId: 3,

          parentId: 1,

          event: 'This is sample event for parent 1',

          machineKey: 5487,

        },

        {

          childId: 4,

          parentId: 2,

          event: 'This is sample event for parent 2',

          machineKey: 6597,

        },

      ],

      childGrid: {

        dataSource: this.childData,

        queryString: 'parentId',

        columns: [

          { field: 'childId', headerText: 'Id' },

          { field: 'event', headerText: 'Event', width: 300 },

          { field: 'machineKey', headerText: 'Key', width: 250 },

        ],

      },

    }

  },

  provide: {

    grid: [DetailRow],

  },

}

</script>

<style>

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-vue-grids/styles/material.css';

</style>

[Ajith Govarthan]

Hi Bojan, 

 

Thanks for contacting Syncfusion support. 

 

Query: I have problem getting Hierarchy grid to work in my Vue2 app. I have pretty straight forward sample and it does not work. 

 

Based on the attached code example we have prepared sample and found that the child grid datasource is not bound properly in your grid application. 

 

So, we have imported the child grid data from dataSource file to bind the dataSource for the child grid properly.  For your convenience we have attached the sample so please refer the sample for your reference. 

 

Code Example: 

App.vue 

 

<template> 

  <div id="app"> 

    <ejs-grid ref="grid" :dataSource="parentData" :childGrid="childGrid"> 

      <e-columns> 

        <e-column field="parentId" headerText="Id" width="50" /> 

        <e-column field="notification" headerText="Notification" width="280" /> 

        <e-column field="productCode" headerText="ProductCode" width="200" /> 

        <e-column field="description" headerText="Description" width="250" /> 

      </e-columns> 

   </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, DetailRow } from "@syncfusion/ej2-vue-grids"; 

import { childData } from "./datasource";  // import child grid data here 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      parentData: [ 

        { 

          parentId: 1, 

          notification: "Notification 1", 

          productCode: "85261402", 

          description: "This is sample description 1", 

        }, 

        { 

          parentId: 2, 

          notification: "Notification 2", 

          productCode: "85241502", 

          description: "This is sample description 1", 

        }, 

      ], 

 

      childGrid: { 

        dataSource: childData,   

        queryString: "parentId", 

        columns: [ 

         { field: "childId", headerText: "Id" }, 

          { field: "event", headerText: "Event", width: 300 }, 

          { field: "machineKey", headerText: "Key", width: 250 }, 

        ], 

      }, 

    }; 

  }, 

  provide: { 

    grid: [DetailRow], 

  }, 

}; 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/18.2.47/material.css"; 

</style> 

 

Sample Link: https://codesandbox.io/s/vue-forked-73j7z?file=/src/App.vue:0-1510 

 

UG-Link: https://ej2.syncfusion.com/vue/documentation/grid/hierarchy-grid/ 

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G.