Error when using a grid in Blazor Bootstrap 1.10.5

Question

I am using Blazor Bootstrap, and I am getting an error when I try to add a Grid on my page:

[2024-01-16T14:40:11.732Z] Error: System.InvalidOperationException: Microsoft.AspNetCore.Components.Forms.InputSelect`1[System.Int32] requires a cascading parameter of type EditContext. For example, you can use Microsoft.AspNetCore.Components.Forms.InputSelect`1[[System.Int32, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]] inside an EditForm. at Microsoft.AspNetCore.Components.Forms.InputBase`1.SetParametersAsync(ParameterView parameters) at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)

Also, note that the EditForm functionality works perfectly fine. The Grid is outside Editform. If I comment out the grid code, then the page works well. But I want all the Bank details to be visible under the same form.

@layout EventsHub.Components.Shared.Dashboard.DashboardLayout
@page "/BankDetails"

@inject EventsHub.Shared.Interface.IAccessTokenService _accessTokenService
@using System.Security.Claims
@inject NavigationManager _navigationManager
@inject ILocalStorageService _localstorage
@inject EventsHub.Shared.Interface.IEvents _eventsService


<style>
    .validation-message {
        color: red;
    }
</style>
<div class="d-md-flex align-items-center justify-content-between mb-4">
    <div>
        <ol class="breadcrumb fs-sm mb-1">
            <li class="breadcrumb-item">Payments</li>
            <li class="breadcrumb-item active" aria-current="page">Bank Details</li>
        </ol>
        <h4 class="main-title mb-0">Account Details For Receiving Payments</h4>
    </div>
    <div class="d-flex align-items-center gap-2 mt-3 mt-md-0">

    </div>
</div>

<div class="row g-3">
    <div class="col-xl-12">
        <div class="card card-settings mt-4">

            <div class="card-body p-0">
                <Toasts class="p-3" Messages="messages" Delay="6000" AutoHide="true" Placement="ToastsPlacement.BottomRight" />

                <EditForm Model="@_BankDetails" OnValidSubmit="NewDetails">
                    <DataAnnotationsValidator />

                    <div class="setting-item">
                        <div class="row g-2 align-items-center">
                            <div class="col-md-5">
                                <h6>Bank Name</h6>
                                <p>Example HDFC,PNB,SBI bank etc</p>
                            </div><!-- col -->
                            <div class="col-md">
                                <input type="text" class="form-control" @bind-value="@_BankDetails.BankName" placeholder="Enter bank name">
                                <ValidationMessage For="@(() => _BankDetails.BankName)" />
                            </div><!-- col -->
                        </div><!-- row -->
                    </div><!-- setting-item -->

                    <div class="setting-item">
                        <div class="row g-2 align-items-center">
                            <div class="col-md-5">
                                <h6>Branch Address</h6>
                                <p>Your bank branch address</p>
                            </div><!-- col -->
                            <div class="col-md">
                                <textarea class="form-control" rows="3" @bind="@_BankDetails.BankAddress" placeholder="Enter branch address"></textarea>
                                <ValidationMessage For="@(() => _BankDetails.BankAddress)" />
                            </div><!-- col -->
                        </div><!-- row -->
                    </div><!-- setting-item -->

                    <div class="setting-item">
                        <div class="row g-2 align-items-center">
                            <div class="col-md-5">
                                <h6>Account Number</h6>
                                <p>Your bank account number</p>
                            </div><!-- col -->
                            <div class="col-md">
                                <input type="text" class="form-control" @bind-value="@_BankDetails.AccountNumber" placeholder="Enter account number">
                                <ValidationMessage For="@(() => _BankDetails.AccountNumber)" />
                            </div><!-- col -->
                        </div><!-- row -->
                    </div><!-- setting-item -->

                    <div class="setting-item">
                        <div class="row g-2 align-items-center">
                            <div class="col-md-5">
                                <h6>IFSC Code</h6>
                                <p>Your bank account number</p>
                            </div><!-- col -->
                            <div class="col-md">
                                <input type="text" class="form-control" @bind-value="@_BankDetails.IFSC" placeholder="Enter IFSC code">
                                <ValidationMessage For="@(() => _BankDetails.IFSC)" />
                            </div><!-- col -->
                        </div><!-- row -->
                    </div><!-- setting-item -->

                    <div class="divider"><span></span></div>

                    <div class="row">

                        <div class="row g-2 justify-content-between">
                            <div class="col-2">

                            </div>
                            <div class="col-4 p-3">
                                @if (isEditable)
                                {
                                    <Button @ref="saveForm" class="btn btn-outline-success" Type="ButtonType.Submit"><i class="ri-save-3-line"></i> Save Details </Button>
                                }
                                else
                                {
                                    <p>To change bank details please write a mail to us [email protected] </p>
                                }

                            </div>
                        </div>

                    </div>

                </EditForm>
            </div>


            <Grid TItem="EventsHub.Shared.Users.BankDetails"
                  Class="table table-hover table-bordered table-striped"
                  DataProvider="BankDataProvider"
                  AllowFiltering="true"
                  AllowPaging="true"
                  AllowSorting="true"
                  Responsive="true"
                  ItemsPerPageText=""
                  PageSizeSelectorItems="@(new int[] { 5,10,20 })"
                  PageSizeSelectorVisible="true"
                  PaginationItemsTextFormat="{0} - {1}">

                <GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="Id" PropertyName="Id" SortString="Id" SortKeySelector="item => item.Id" FilterTextboxWidth="50" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
                    @context.Id
                </GridColumn>
                <GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="Bank Name" PropertyName="BankName" SortString="BankName" SortKeySelector="item => item.BankName" FilterTextboxWidth="80">
                    @context.BankName
                </GridColumn>
                <GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="Bank Address" PropertyName="BankAddress" SortString="BankAddress" SortKeySelector="item => item.BankAddress" FilterTextboxWidth="100">
                    @context.BankAddress
                </GridColumn>
                <GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="Account Number" PropertyName="AccountNumber" SortString="AccountNumber" SortKeySelector="item => item.AccountNumber" FilterTextboxWidth="120">
                    @context.AccountNumber
                </GridColumn>
                <GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="IFSC" PropertyName="IFSC" SortString="IFSC" SortKeySelector="item => item.IFSC" FilterTextboxWidth="150">
                    @context.IFSC
                </GridColumn>
                <GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="CreateDate" PropertyName="CreateDate" SortString="CreateDate" SortKeySelector="item => item.CreateDate" FilterTextboxWidth="80">
                    @context.CreateDate
                </GridColumn>

            </Grid>

        </div>
    </div>


    <ConfirmDialog @ref="dialog" />
</div>

@code {
    
    private Button saveForm;
    private ConfirmDialog dialog = default!;

    [CascadingParameter]
    public Task<AuthenticationState> authenticationState { get; set; } = default!;

    [Inject] protected PreloadService PreloadService { get; set; }
    private bool isEditable { get; set; } = true;

    public EventsHub.Shared.Users.BankDetails _BankDetails = new EventsHub.Shared.Users.BankDetails();
    public IEnumerable<EventsHub.Shared.Users.BankDetails> _BankdetailsList = default!;

    List<ToastMessage> messages = new();

    private void ShowMessage(ToastType toastType, string toastTitle, string toastMessage)
    {
        messages.Add(CreateToastMessage(toastType, toastTitle, toastMessage));
    }
    public async Task<GridDataProviderResult<EventsHub.Shared.Users.BankDetails>> BankDataProvider(GridDataProviderRequest<EventsHub.Shared.Users.BankDetails> gridDataProvider)
    {
        if (_BankdetailsList is null)
            _BankdetailsList = GetBankDetails();
        return await Task.FromResult(gridDataProvider.ApplyTo(_BankdetailsList));
    }

    private IEnumerable<EventsHub.Shared.Users.BankDetails> GetBankDetails()
    {
        return new List<EventsHub.Shared.Users.BankDetails>
        {
            new EventsHub.Shared.Users.BankDetails{ Id = 1,BankName="BankName",AccountNumber="asd",BankAddress="asd",IFSC="asd",CreateDate=DateTime.Now}

        };
    }
    //    public async Task<GridDataProviderResult<IEnumerable<EventsHub.Shared.Users.BankDetails>> BankDataProvider(GridDataProviderRequest<EventsHub.Shared.Users.BankDetails> request)
    //{
    //    return await Task.FromResult(new GridDataProviderResult<EventsHub.Shared.Users.BankDetails> { Data = result.Item1, TotalCount = result.Item2
    //});
    //}

    private ToastMessage CreateToastMessage(ToastType toastType, string toastTitle, string toastMessageBody)
    {
        var toastMessage = new ToastMessage();

        toastMessage.Type = toastType;
        toastMessage.Title = $"{toastTitle}";
        toastMessage.HelpText = $"{DateTime.Now}";
        toastMessage.Message = $"{toastMessageBody}";
        if (toastType == ToastType.Danger)
        {
            toastMessage.IconName = IconName.DashCircle;
        }
        if (toastType == ToastType.Success)
        {
            toastMessage.IconName = IconName.OneCircleFill;
        }
        // disable auto hide for `danger` and `warning` messages.
        toastMessage.AutoHide = !(toastType == ToastType.Danger || toastType == ToastType.Warning);

        return toastMessage;
    }

    async Task NewDetails()
    {
        var options = new ConfirmDialogOptions { IsVerticallyCentered = true };
        var confirmation = await dialog.ShowAsync(
            title: $"Saving Bank Details",
            message1: $"Please read carefully all the details filled. All your transactions will be transferred into above mentioned account.",
            message2: "Please confirm your action.",
            confirmDialogOptions: options);

        if (confirmation)
        {
            // do something
            await saveBankDetails();
        }
        else
        {
            // do something
        }
    }

    private async Task saveBankDetails()
    {
        saveForm?.ShowLoading("Saving...!");

        var authStates = await authenticationState;
        var user = authStates.User;
        var id = user.FindFirst(c => c.Type == ClaimTypes.NameIdentifier);

        if (_BankDetails.Id > 0)
        {
            _BankDetails.GetAction = EventsHub.Shared.ActionType.Action.Update;
        }
        else
        {
            _BankDetails.GetAction = EventsHub.Shared.ActionType.Action.Insert;
            _BankDetails.CreateDate = DateTime.Now;
            _BankDetails.Id = 0;
        }

        _BankDetails.IsEditable = false;
        _BankDetails.UserId = Convert.ToInt32(id.Value);

        var result = await _eventsService.GetBankDetails(_BankDetails);
        saveForm?.HideLoading();
        if (result != null)
        {
            if (result.Id > 0)
            {
                ShowMessage(ToastType.Success, "Bank details...!", "your details are updated with us.");
            }
            await LoadDetails(result.UserId);
            this.StateHasChanged();
        }
        else
        {
            ShowMessage(ToastType.Danger, "Unable to update bank details...!", "Please connect with us at [email protected]");
        }

    }





    private async Task LoadDetails(int UserId)
    {
        try
        {
            _BankDetails.GetAction = EventsHub.Shared.ActionType.Action.Get;
            _BankDetails.UserId = UserId;
            _BankDetails.BankName = "-------";
            _BankDetails.BankAddress = "-----";
            _BankDetails.AccountNumber = "------";
            _BankDetails.IFSC = "------";
            _BankDetails.Id = 0;
            PreloadService?.Show(SpinnerColor.Primary, "Loading details...!");
            var result = await _eventsService.GetBankDetails(_BankDetails);
            if (result != null)
            {
                _BankDetails = new EventsHub.Shared.Users.BankDetails();
                _BankDetails = result;
                isEditable = result.IsEditable;
            }
            else
            {
                _BankDetails = new EventsHub.Shared.Users.BankDetails();
            }
        }
        catch (Exception ex)
        {

        }

        PreloadService?.Hide();
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        try
        {
            var authStates = await authenticationState;
            var user = authStates.User;

            if (user?.Identity is not null && user.Identity.IsAuthenticated)
            {

            }
            else
            {
                _navigationManager.NavigateTo("/", true);
                return;
            }


            var defaultActiveEvent = await _localstorage.GetItemAsStringAsync("defaultActiveEvent");
            if (string.IsNullOrWhiteSpace(defaultActiveEvent))
            {
                _navigationManager.NavigateTo("/", true);
                return;
            }
            else
            {
                var id = user.FindFirst(c => c.Type == ClaimTypes.NameIdentifier);
                await LoadDetails(Convert.ToInt32(id.Value));
            }
            //await loadEventInformation();
        }
        catch (Exception ex)
        {

        }
        StateHasChanged();
    }
}