EjsGrid GridColumn EditType=DropDownEdit ForeignKeyField Assistance Needed

@page "/orders"
@using Newtonsoft.Json;

<div class="container-fluid">
    <div class="row pt-3">
        <div class="col-12">
            <EjsGrid ref="orderGrid" id="orderGrid" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Height="100%" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
                <EjsDataManager ref="orderDataManager" CrossDomain="true" Url="http://localhost:5000/api/v2/order" Adaptor="Adaptors.WebApiAdaptor">
                </EjsDataManager>
                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
                <GridFilterSettings Type="@Syncfusion.EJ2.RazorComponents.Grids.FilterType.CheckBox"></GridFilterSettings>
                <GridPagesettings pageCount="5" PageSize="15"></GridPagesettings>
                <GridColumns>
                    <GridColumn Field="OrderLineId" HeaderText="Order Line Id" ISPrimaryKey="true" IsIdentity="true" Visible="false" Width="30" validationRules="@(new { required= true, maxLength=6})"></GridColumn>
                    <GridColumn Field="StyleCode" HeaderText="Code" Width="20" validationRules="@(new { required= true, maxLength=20})"></GridColumn>
                    <GridColumn Field="ItemDescription" HeaderText="Name" Width="40" validationRules="@(new { required= true, maxLength=50})"></GridColumn>
                    <GridColumn Field="ClassCode" HeaderText="Class" Width="20" validationRules="@(new { required= true, maxLength=20})"></GridColumn>
                    <GridColumn Field="Month" HeaderText="Month" Width="15" EditType="dropdownedit" ForeignKeyField="value" ForeignKeyValue="text" DataSource="@months" ></GridColumn>
                </GridColumns>
            </EjsGrid>
        </div>
    </div>
</div>

@functions {
    public class Month
    {
        public string value { get; set; }
        public string text { get; set; }
    }
    List<Month> months = new List<Month>()
    {
        new Month(){ value = "1", text= "Jan" },
        new Month(){ value = "2", text= "Feb" },
        new Month(){ value = "3", text= "Mar" },
        new Month(){ value = "4", text= "Apr" },
        new Month(){ value = "5", text= "May" },
        new Month(){ value = "6", text= "Jun" },
        new Month(){ value = "7", text= "Jul" },
        new Month(){ value = "8", text= "Aug" },
        new Month(){ value = "9", text= "Sep" },
        new Month(){ value = "10", text= "Oct" },
        new Month(){ value = "11", text= "Nov" },
        new Month(){ value = "12", text= "Dec" }
    };
}