Vue 3 and Foreign Key column

[Christian DAquino]

Can you please provide a working example of Vue 3 and a Foreign Key column? I can't seem to make it work with Vue 3.

[Rajapandi Ravi]

Hi Christian,

Greetings from Syncfusion support

As per your requirement, we have prepared a sample of Vue 3 and a Foreign Key column. Please refer to the below code example and sample for more information.

 

<template>

  <ejs-grid :dataSource="data">

<e-columns>

  <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column>

  <e-column field="CustomerID" headerText="Customer ID” width="80"></e-column>

  <e-column field="ShipCountry" headerText="Ship Country" width="90"></e-column>

  <e-column field='EmployeeID' headerText='Employee ID' width='150'

  foreignKeyValue='LastName' foreignKeyField='EmployeeID' :dataSource='customerData'></e-column>

</e-columns>

  </ejs-grid>

</template>

<script>

import { GridComponent, ColumnsDirective, ForeignKey, ColumnDirective} from "@syncfusion/ej2-vue-grids";

 

export default {

  name: "App",

  // Declaring component and its directives

components: {

  "ejs-grid": GridComponent,

  "e-columns": ColumnsDirective,

  "e-column": ColumnDirective,

},

  // Bound properties declarations

  data() {

return {

  data: [

    {

      OrderID: 10248,

      CustomerID: "VINET",

      ShipCountry: "France",

      EmployeeID: 1

    },

    {

      OrderID: 10249,

      CustomerID: "TOMSP",

      ShipCountry: "Germany",

      EmployeeID: 2

    }

  ],

  customerData : [{EmployeeID: 1, LastName: "Paul Henriot"},{EmployeeID: 2, LastName: "Karin Josephs"}],

};

  },

   provide: {

      grid: [ForeignKey]

  }

};

</script>

 

<style>

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

</style>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample_vue3-1739745760.zip

Sample Demos: https://ej2.syncfusion.com/vue/demos/#/material/grid/foreign-key.html

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/getting-started-vue/

Regards,

Rajapandi R

[Christian DAquino]

It doesn't work on a Quasar project: https://quasar.dev/

It doesn't render when the grid is wrapped around a <q-page> component.

Attachment: SPSVue3_fd97bb7.zip

[Pavithra Subramaniyam]

Hi Christian,

Thanks for sharing the details.

From your sample, it seems that the module injection causes the reported issue. So we suggest you inject the Grid required modules using the below way to overcome the issue. Please refer to the below code example for more information.

<script>

  import { GridComponent, ColumnsDirective, Grid, ForeignKey, ColumnDirective } from '@syncfusion/ej2-vue-grids'

 

Grid.Inject(ForeignKey)

 

export default {

 .  .  .

}

</script>

 

Please get back to us if you need further assistance on this.

Regards,

Pavithra S