Issue with DataGrid ForeignKey Column and remote data

[Ameet Phadnis]

Here is my HTML Code - 

<h1>{{title}}</h1>
<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-columns>
      <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>
    </e-columns>
  </ejs-grid>
</div>

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';
@Component({
  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[];
  @ViewChild('gridMasterFields')
  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;
        console.log(this.groupDataSource);
      }
    });
   
  }

}

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

Thanks,

Ameet

[Mohammed Farook J]

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] 

[remote-data.ts] 

... 

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, 

        }); 

    } 

} 

[remote-data.ts] 

 

<div class="control-section"> 

    <ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

            <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> 

        </e-columns> 

    </ejs-grid> 

 

</div> 

 

Sample link: https://stackblitz.com/edit/angular-zcligj-u6fc5a?file=remote-data.ts  

 

Still you have faced same issue could you please share the EJ2 package version details and share the sample if it is possible. 

 

Regards, 

J Mohammed Farook 

[Ameet Phadnis]

This worked.

Thanks,

Ameet

[Mohammed Farook J]

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.

Regards
J Mohammed Farook