NotWorking

@page "/records"
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using DAL.DataAdapter
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs

@inherits BaseView<Record, int>

<h2>Records</h2>
<br />
<div id="ControlRegion">
    <SfGrid @ref="Grid" EnableColumnVirtualization="true" EnableVirtualization="true" ID="Grid" TValue="@Record" AllowPaging="true" AllowFiltering="true" AllowReordering="true" AllowResizing="true" AllowExcelExport="true" AllowSelection="true"
            AllowSorting="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update","ExcelExport","Search"})" Height="315">
        <SfDataManager @ref="@DataManager" AdaptorInstance="@DataAdapterType" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>
        <GridEvents TValue="Record"></GridEvents>
        <GridEditSettings @ref="GridEditSettings" ShowDeleteConfirmDialog="true" AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog">
            <Template>
                @{
                    var record = (Record)context;
                }
                <div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <SfTextBox ID="RecordOverview.PropertyName" Value="@record?.RecordOverview?.PropertyName" FloatLabelType="FloatLabelType.Always" Placeholder="Property Name"></SfTextBox>
                        </div>
                        <div class="form-group col-md-6">
                            <SfTextBox ID="RecordOverview.PostCode" Value="@record?.RecordOverview?.PostCode" FloatLabelType="FloatLabelType.Always" Placeholder="Post Code"></SfTextBox>
                        </div>

                        <div class="form-group col-md-6">
                            <SfDropDownList ID="RecordOverview.AreaId" TValue="int?" TItem="Area" Value="@record?.RecordOverview?.AreaId" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always" Placeholder="Area" DataSource="@Areas">
                                <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
                            </SfDropDownList>
                        </div>
                    </div>
                </div>
            </Template>
        </GridEditSettings>
        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
        <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
        <GridColumns>
            <GridColumn Field="RecordOverview.PropertyName" HeaderText="Property Name" AutoFit="true" Type="ColumnType.String" />
            <GridColumn Field="RecordOverview.PostCode" Type="ColumnType.String" HeaderText="Post Code" AutoFit="true"></GridColumn>
            <GridForeignColumn TValue="Area" Field="RecordOverview.AreaId" ForeignKeyValue="Name" Type="ColumnType.Number" HeaderText="Area" AutoFit="true" />
        </GridColumns>
    </SfGrid>
</div>

@code {
    private List<Area> Areas { get; set; }
    private GridEditSettings GridEditSettings { get; set; }
    private SfGrid<Record> Grid { get; set; }
    private SfDropDownList<int?, Area> AreaDropDown { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Areas = DbContext.Areas.ToList();
            this.StateHasChanged();
        }
        base.OnAfterRender(firstRender);
    }
}