We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Issue with DataGrid ForeignKey Column and remote data

Thread ID:





141465 Dec 12,2018 09:15 PM UTC Dec 14,2018 11:13 AM UTC Angular - EJ 2 3
Tags: Grid
Ameet Phadnis
Asked On December 12, 2018 09:15 PM UTC

Here is my HTML Code - 
<div class="row">
  <ejs-grid #gridMasterFields height='500px' [dataSource]='masterFieldsDataManager' height='500px' [editSettings]="editSettings" [toolbar]="toolbar" showColumnChooser='true' [gridLines]='lines'
            allowResizing='true' allowTextWrap='true' allowSorting="true" [sortSettings]="initialSort" allowFiltering='true'>
      <e-column field='id' headerText='ID' [visible]="false" isPrimaryKey="true"></e-column>
      <e-column field="fieldName" headerText="Field Name" [allowEditing]="true" [allowFiltering]="true" [allowSorting]="true" minWidth="100" width="150"></e-column>
      <e-column field="fieldTitle" headerText="Field Title" [allowEditing]="true" [allowFiltering]="true" [allowSorting]="true" minWidth="100" width="150"></e-column>
      <e-column field="groupID" headerText="Group" [allowEditing]="true" [allowFiltering]="true" [allowSorting]="true" minWidth="100" width="150"
                foreignKeyValue="id" foreignKeyField="columnGroups" [dataSource]="groupDataSource" editType='dropdownedit' ></e-column>
      <e-column field="type" headerText="Data Type" [allowEditing]="true" [allowFiltering]="false" [allowSorting]="false" minWidth="100" width="150"></e-column>
      <e-column field="editType" headerText="Edit Type" [allowEditing]="true" [allowFiltering]="false" [allowSorting]="false" minWidth="100" width="150"></e-column>
      <e-column field="format" headerText="Format" [allowEditing]="true" [allowFiltering]="false" [allowSorting]="false" minWidth="100" width="150"></e-column>
      <e-column field="defaultSortOrder" headerText="Default Sort Order" [allowEditing]="true" [allowFiltering]="false" [allowSorting]="false" minWidth="100" width="150"
                type="number" editType="numericedit"></e-column>
      <e-column field="calculationFormula" headerText="Calculation Formula" [allowEditing]="true" [allowFiltering]="false" [allowSorting]="false" minWidth="100" width="150"></e-column>

Here is my ts code -
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { GridComponent, EditService, ToolbarService, PageService, ColumnChooserService, EditSettingsModel, ToolbarItems, GridLine, ForeignKeyService } from '@syncfusion/ej2-ng-grids';
import { DataService, GroupMFields } from '../../shared/dataService';
import { ComboBoxComponent } from '@syncfusion/ej2-ng-dropdowns';
  selector: 'app-master-fields',
  templateUrl: './master-fields.component.html',
  styleUrls: ['./master-fields.component.css'],
  encapsulation: ViewEncapsulation.None,
  providers: [ToolbarService, EditService, PageService, ColumnChooserService, ForeignKeyService]
export class MasterFieldsComponent implements OnInit {
  public title: string = 'Manage Master Fields';
  private urlForMasterFields = "/api/MasterFields";
  public editSettings: EditSettingsModel;
  public toolbar: ToolbarItems[];
  public lines: GridLine = <GridLine>'Both';
  public initialSort: Object = { columns: [{ field: 'fieldTitle', direction: 'Ascending' }] };
  public groupDataSource: Object[];
  public gridMasterFields: GridComponent;
  public masterFieldsDataManager: DataManager = new DataManager({
    url: this.urlForMasterFields,
    crudUrl: this.urlForMasterFields,
    adaptor: new WebApiAdaptor
  constructor(private data: DataService) { }
  ngOnInit() {
    this.editSettings = { allowEditing: true, allowAdding: true, mode: 'Normal' };
    this.toolbar = ['Add', 'Edit', 'Update', 'Cancel'];
    this.data.loadGroupMFields(false).subscribe(successForData => {
      if (successForData) {
        this.groupDataSource = this.data.groupMFields;
        //this.gridMasterFields.Columns[3].dataSource = this.data.groupMFields;

When I run this code the dropdown list is not pulling the group information. It displays as follows -



Mohammed Farook J [Syncfusion]
Replied On December 13, 2018 07:33 AM UTC

Hi Ameet, 
Thanks for contacting Syncfusion support. 
Query: When I run this code the dropdown list is not pulling the group information. 
We have validated your and created a sample based on your requirement. Here, we have bind remote data to the grid with foreign key column. The foreign key column dropdown values are displayed correctly. Please find the below code example and sample for your reference. 
[code example] 
export class TemplateDrivenFormComponent implements OnInit { 
    public data: Object[]; 
    public editSettings: Object; 
    public toolbar: string[]; 
    public pageSettings: Object; 
    public shipCountryDistinctData: any; 
    public customerData: Object[]; 
    public ngOnInit(): void { 
        this.data = orderDetails; 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }; 
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
        this.pageSettings = { pageCount: 5}; 
        this.customerData = customerData; 
        this.shipCountryDistinctData = new DataManager({         
          url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',   //remote data 
        adaptor: new ODataV4Adaptor, 
<div class="control-section"> 
    <ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' [isPrimaryKey]='true'></e-column> 
            <e-column field='CustomerID' headerText='Customer Name' width='150' 
                      foreignKeyValue='ContactName' foreignKeyField='CustomerID' [dataSource]='customerData'></e-column>  //foreign key column 
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 
            <e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right'></e-column> 
            <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></e-column> 
Still you have faced same issue could you please share the EJ2 package version details and share the sample if it is possible. 
J Mohammed Farook 

Ameet Phadnis
Replied On December 13, 2018 10:55 PM UTC

This worked.

Mohammed Farook J [Syncfusion]
Replied On December 14, 2018 11:13 AM UTC

Hi Ameet, 

Thanks for your update.

We are happy to hear that the provided solution has been resolved your problem.

Please get back to us if you need further assistance.

J Mohammed Farook


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon