Display foreign key column in treegrid in Vue Treegrid component

11 Jun 20247 minutes to read

Since Tree Grid Databinding concept is of hierarchy relationship, we do not provide in-built support for foreignkey datasource.

To display the foreignKey value at initial rendering, we can use the queryCellInfo event of the treegrid and also by using the editType and columns.edit properties of TreeGrid Column, we can render Dropdownlist with external or foreign dataSource.

<template>
  <div id="app">
        <ejs-treegrid :dataSource="data" :treeColumnIndex="1" height='260px' :allowSorting='true' :queryCellInfo='queryCellInfo' childMapping='Children' :editSettings="editSettings" :toolbar="toolbar"  ref="treegrid">
        <e-columns>
         <e-column field="EmpID" headerText="Emp ID" :isPrimaryKey='true' width="70" textAlign="Right"></e-column>
          <e-column field="Name" headerText="Employee Name" width="70" ></e-column>
          <e-column field="Contact" headerText="Contact" width="90" textAlign="Right"></e-column>
          <e-column field="DOB" headerText="DOB" width="100" format="yMd" editType='datepickeredit' textAlign="Right"></e-column>
          <e-column field="EmployeeID" headerText="EmployeeID" width="70" editType= 'dropdownedit' :edit="employeeParams" ></e-column>
          <e-column field="Country" headerText="Country" width="90" textAlign="Left"></e-column>
          </e-columns>
       </ejs-treegrid>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { TreeGridComponent as EjsTreegrid, Page, Toolbar, Edit,
  ColumnDirective as EColumn, ColumnsDirective as EColumns
 } from "@syncfusion/ej2-vue-treegrid";
import { textData, dropData } from "./datasource.js";
import { Query } from '@syncfusion/ej2-data';

const data = textData;
const editSettings = { allowAdding:true, allowDeleting:true, allowEditing: true };
const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const employeeParams = {
  params: {
    dataSource: dropData,
    fields: { text: "EmployeeName", value: "EmployeeID"},
    query: new Query()
  }
};

const queryCellInfo = function(args) {
  if (args.column.field === "EmployeeID") {
   for (var i = 0; i < dropData.length; i++) {
      let data = args.data;
      if ((data[args.column.field]).toString() === dropData[i]["EmployeeID"]) {
        args.cell.innerText = dropData[i]["EmployeeName"]; // assign the foreignkey field value to the innertext
      }
    }
  }
};

provide('treegrid',  [Page,Edit, Toolbar]);

</script>
<template>
  <div id="app">
        <ejs-treegrid :dataSource="data" :treeColumnIndex="1" height='260px' :allowSorting='true' :queryCellInfo='queryCellInfo' childMapping='Children' :editSettings="editSettings" :toolbar="toolbar"  ref="treegrid">
        <e-columns>
         <e-column field="EmpID" headerText="Emp ID" :isPrimaryKey='true' width="70" textAlign="Right"></e-column>
          <e-column field="Name" headerText="Employee Name" width="70" ></e-column>
          <e-column field="Contact" headerText="Contact" width="90" textAlign="Right"></e-column>
          <e-column field="DOB" headerText="DOB" width="100" format="yMd" editType='datepickeredit' textAlign="Right"></e-column>
          <e-column field="EmployeeID" headerText="EmployeeID" width="70" editType= 'dropdownedit' :edit="employeeParams" ></e-column>
          <e-column field="Country" headerText="Country" width="90" textAlign="Left"></e-column>
          </e-columns>
       </ejs-treegrid>
  </div>
</template>
<script>

import { TreeGridComponent, Page, Toolbar, Edit, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { textData, dropData } from "./datasource.js";
import { Query } from '@syncfusion/ej2-data';

export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,

},

   data() {
    return {
      data: textData,
      editSettings: { allowAdding:true, allowDeleting:true, allowEditing: true },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      employeeParams: {
        params: {
          dataSource: dropData,
          fields: { text: "EmployeeName", value: "EmployeeID"},
          query: new Query()
        }
      },
    };
  },
  methods: {
    queryCellInfo: function(args) {
      if (args.column.field === "EmployeeID") {
       for (var i = 0; i < dropData.length; i++) {
          let data = args.data;
          if ((data[args.column.field]).toString() === dropData[i]["EmployeeID"]) {
            args.cell.innerText = dropData[i]["EmployeeName"]; // assign the foreignkey field value to the innertext
          }
        }
      }
    }
  },
  provide: {
    treegrid: [Page,Edit, Toolbar]
  }
}
</script>