Vue Grid Foreign Key Field

[Joshua Dunn]

Hi,

I want to use the foreign key field documented here: 

https://ej2.syncfusion.com/vue/documentation/grid/columns/?_ga=2.233648926.1052028231.1596524540-1615512644.1583847133#foreign-key-column

To show a name, whislt filtering on the Id.

The data I'm returning for the grid has customerId and I'm querying a list of customers separately.

As I understand it, I should be able to do something like:

<e-column field='customerId' foreignKeyValue="companyName" "Name" foreignKeyField="id" :dataSource="customerList" headerText='Company Name'></e-column>

where customerList is an array of objects, which have id and companyName properties.

Thanks,

Josh

[Rajapandi Ravi]

Hi Joshua, 

Greetings from syncfusion support 

We have analyzed your query and we suspect that while filter the foreign key column you like to show the name and perform the filter operation by using ID. Based on your requirement we have prepared a sample and we suggest you to follow the below way to achieve your requirement. Please refer the below code example and sample for more information. 

 

<template> 

  <div id="app"> 

    <ejs-grid 

      ref="grid" 

      :dataSource="users" 

      :allowFiltering="true" 

      :actionBegin="begin" 

      :filterSettings="filterOptions" 

      width="300" 

    > 

      <e-columns> 

        <e-column field="UserName" :filter="filter" headerText="UserName" width="50"></e-column> 

        <e-column 

          field="Id" 

          ForeignKeyField="Id" 

          foreignKeyValue="CountryName" 

          headerText="X2" 

          width="50" 

          :filter="filter" 

          :dataSource="contries" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  Resize, 

  ForeignKey, 

  Filter 

} from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource.js"; 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      users: [ 

        { Id: 1, UserName: "TEW", CountryId: 23 }, 

        { Id: 2, UserName: "WEDR", CountryId: 24 }, 

        { Id: 3, UserName: "SED", CountryId: 25 }, 

        { Id: 3, UserName: "TGY", CountryId: 26 }, 

        { Id: 4, UserName: "UHU", CountryId: 27 } 

      ], 

      contries: [ 

        { Id: 1, CountryName: "India" }, 

        { Id: 2, CountryName: "India" }, 

        { Id: 3, CountryName: "America" }, 

        { Id: 3, CountryName: "America" }, 

        { Id: 4, CountryName: "China" } 

      ], 

      filterOptions: { 

        type: "Menu" 

      }, 

      filter: { 

        type: "CheckBox" 

      } 

    }; 

  }, 

  methods: { 

  }, 

  provide: { 

    grid: [Resize, ForeignKey, Filter] 

  } 

}; 

</script> 

<style> 

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

</style> 

 

Sample: https://codesandbox.io/s/vue-template-qrm32?file=/src/App.vue:0-1676 

Screenshot: 

 

If we misunderstood anything wrongly, Please getback us with detailed description about your requirement. 

Regards,
Rajapandi R