Foreign key issues with Grid

[Ameet Phadnis]

Here is my example - I have StateProvince table and Country table

Country table has the following fields -

Here is my code for - 

import React, { useState, useEffect } from 'react';

import {

    GridComponent,

    ColumnsDirective,

    ColumnDirective,

    Page,

    Inject,

    Filter,

    Sort,

    Edit,

    Toolbar,

    PdfExport,

    ExcelExport,

    ColumnChooser,

    ForeignKey,

    Resize,

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

import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

import { Browser } from '@syncfusion/ej2-base';

import { useMsal } from "@azure/msal-react";

const StateProvince = () => {

    const { instance } = useMsal();

    const pageOptions = { currentPage: 1, pageSize: 25, pageCount: 20, pageSizes: ["25", "50", "100", "All"] };

    const [token, setToken] = useState(null);

    useEffect(() => {

        const account = instance.getActiveAccount();

        const accessTokenRequest = {

            scopes: ["api://0fcfc1ec-9df8-4f8e-b8e6-4a1ca3674696/AccessAPI", "User.Read", "Group.Read.All"],

            account: account

        };

        if (!token) {

            instance.acquireTokenSilent(accessTokenRequest).then(function (accessTokenResponse) {

                setToken(accessTokenResponse.accessToken);

            })

                .catch(function (error) {

                    if (error.name === "InteractionRequiredAuthError") {

                        instance.acquireTokenPopup(accessTokenRequest)

                            .then(function (accessTokenResponse) {

                                setToken(accessTokenResponse.accessToken);

                            }).catch(function (error) {

                                console.log(error);

                            });

                    }

                });

        }

    });

    const toolBarOptions = [

        "Add",

        "Edit",

        "Delete",

        "ExcelExport",

        "Search"

    ];

    const dataFromApi = new DataManager({

        url: `https://courtconnectapi.azurewebsites.net/odata/StateProvince`,

        insertUrl: `https://courtconnectapi.azurewebsites.net/odata/StateProvince`,

        updateUrl: `https://courtconnectapi.azurewebsites.net/odata/StateProvince`,

        removeUrl: `https://courtconnectapi.azurewebsites.net/odata/StateProvince`,

        adaptor: new ODataV4Adaptor(),

        crossDomain: true,

        headers: [{ Authorization: `Bearer ${token}` }],

    });

    const countryFromApi = new DataManager({

        url: `https://courtconnectapi.azurewebsites.net/odata/Country`,

        adaptor: new ODataV4Adaptor(),

        crossDomain: true,

        offline: true,

        headers: [{ Authorization: `Bearer ${token}` }],

    });

    const filterOptions = {

        type: "Menu",

    };

    const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };

    const sortingOptions = { columns: [{ field: 'StateProvinceName', direction: 'Ascending' }] };

    const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };

   

    var gridInstance;

    const toolbarClick = (args) => {

        if (gridInstance) {

            if (args.item.id.includes('excelexport')) {

                gridInstance.excelExport({

                    fileName: `stateProvince.xlsx`

                });

            }

        }

    }

    const actionComplete = (args) => {

        if (args.requestType === 'beginEdit' || args.requestType === 'add') {

            args.dialog.header = args.requestType === "beginEdit" ? `Edit - State Province` : `New State Province`;

            console.log(Browser.isDevice);

            if (Browser.isDevice) {

                args.dialog.height = window.innerHeight - 90 + 'px';

                args.dialog.width = '500px';

                args.dialog.dataBind();

            } else {

                args.dialog.width = '500px';

            }

        }

    }

    return (

        <GridComponent ref={grid => gridInstance = grid}

                    dataSource={dataFromApi} allowPaging={true} allowResizing={true}

                    pageSettings={pageOptions}

                    allowFiltering={true}

                    allowSorting={true}

                    sortSettings={sortingOptions}

                    editSettings={editSettings}

                    toolbar={toolBarOptions}

                    filterSettings={filterOptions}

                    allowPdfExport={true}

                    allowExcelExport={true}

                    toolbarClick={toolbarClick}

                    showColumnChooser={true}

                    actionComplete={actionComplete}

                    >

            <ColumnsDirective>

                <ColumnDirective field="Id" width="50" headerText="ID" allowEditing={false} visible={false} isPrimaryKey={true} />

                <ColumnDirective field="StateProvinceName" width="50" headerText="State Name" />

                <ColumnDirective field="StateAbbr" width="50" headerText="State Abbr" />

                {/* <ColumnDirective field="Country.CountryName" width="50" headerText="Country" /> */}

                <ColumnDirective field="CountryId" width="50" headerText="Country" foreignKeyValue="CountryName" foreignKeyField="Id" dataSource={countryFromApi}  />

                <ColumnDirective field="Created" format={format} headerText="Created" width="160" allowEditing={false} visible={false} />

                <ColumnDirective field="CreatedBy" headerText="Created By" width="160" allowEditing={false} visible={false} />

                <ColumnDirective field="Modified" format={format} headerText="Modified" width="160" allowEditing={false} visible={false} />

                <ColumnDirective field="ModifiedBy" headerText="Modified By" width="160" allowEditing={false} visible={false} />

            </ColumnsDirective>

            <Inject

                        services={[

                            Page,

                            Filter,

                            Sort,

                            Edit,

                            Toolbar,

                            PdfExport,

                            ExcelExport,

                            ColumnChooser,

                            ForeignKey,

                            Resize

                        ]}

                    />

        </GridComponent>

    )

}

export default StateProvince;

But when I run it and double click to Edit. For some reason the Country dropdown is not populated and shows Request Failed.

[Hemanthkumar S]

Hi Ameet Phadnis,

In the latest version (v21.2.6) of the Syncfusion Grid, we have made an attempt to replicate the issue you described (Country dropdown not being populated and displaying "Request Failed"), based on the information you provided. However, our efforts were unsuccessful. For further details, please refer to the screenshot and attached sample.

Screenshot:

Sample Link: https://stackblitz.com/edit/react-4bx7jy?file=index.js

If you are still experiencing the issue, we recommend attempting to reproduce it using the attached sample. If possible, please provide us with the version of the Syncfusion package you are using and a sample of the grid that reproduces the issue. This will assist us in better understanding and validating your query.

Regards,

Hemanth Kumar S