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

Issue with DataGrid ForeignKey Column and remote data

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

3 Replies

MF Mohammed Farook J Syncfusion Team 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] 
[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> 
 
 
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 



AP Ameet Phadnis December 13, 2018 10:55 PM UTC

This worked.
Thanks,
Ameet


MF Mohammed Farook J Syncfusion Team 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.

Regards
J Mohammed Farook
 


Loader.
Live Chat Icon For mobile
Up arrow icon