Cuando doy clic en Editar y se carga el modal del Grid no muestra los valores seleccionados en los listbox

[Cristian Tascon]

Buenos dias, tengo un SFGrid, el cual al hacer clic en el boton edit abre un modal con unos listbox (DropDowns) que deben cargarse con el valor de Pais, Estado y ciudad, ya logré llenar los dataSources antes de que se abra el modal, pero una vez abierto el modal no me muestra el valor cargado desde la bsae de datos referenciado  en @bind-value, este es mi codigo:

<div class="col-md-12 mt-3">

    <SfGrid ID="Grid" @ref="Grid" DataSource="@dataBankGrid" AllowPaging="true" Toolbar="@(new List<string>() { " Search","Add", "ExcelExport","PdfExport" })" AllowTextWrap="true" AllowSorting="true" AllowExcelExport="true" AllowPdfExport="true">

        <GridPageSettings PageCount="10" PageSizes="true"></GridPageSettings>

        <GridEvents OnActionBegin="ActionBeginHandler" CommandClicked="GoBankAccount" TValue="DtoBank" OnToolbarClick="ToolbarClick"></GridEvents>

        <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="@EditMode.Dialog" Dialog="DialogParams">

            <Template>

                @{

                    var oBank = (context as DtoBank);

                    valueCountry = oBank.BanCountry;

                    valueState = oBank.BanState;

                    valueCity = oBank.BanCity;

                    populateDropdowns2(valueCountry, valueState, valueCity);

                }

                <div class="row">

                   

                    <div class="form-group col-md-6">

                        <label class="example-label">@_Localizer.GetString("lblCountry")</label>

                        <SfComboBox TValue="string" TItem="DtoCountry" @ref="ddlCountry" AllowFiltering="true" AllowCustom="false" class="form-control" @bind-Value=oBank.BanCountry PopupHeight="230px" DataSource="@dataCountry">

                            <ComboBoxFieldSettings Text="Name" Value="Code" />

                            <ComboBoxEvents TValue="string" TItem="DtoCountry" ValueChange="PopulateState" />

                        </SfComboBox>

                        <ValidationMessage For="@(() => oBank.BanCountry)" />

                    </div>

                    <div class="form-group col-md-6">

                         

                    </div>

                        <div class="form-group col-md-6">

                            <label class="example-label">@_Localizer.GetString("lblState")</label>

                            <SfComboBox TValue="string" TItem="DtoState" @ref="ddlState" AllowFiltering="true" AllowCustom="false" class="form-control" @bind-Value=oBank.BanState PopupHeight="230px" DataSource="@dataState">

                                <ComboBoxFieldSettings Text="Name" Value="Code" />

                            <ComboBoxEvents TValue="string" TItem="DtoState" ValueChange="PopulateCity" />

                            </SfComboBox>

                            <ValidationMessage For="@(() => oBank.BanState)" />

                        </div>

                    <div class="form-group col-md-6">

                         

                    </div>

                    <div class="form-group col-md-6">

                        <label class="example-label">@_Localizer.GetString("lblCity")</label>

                        <SfComboBox TValue="string" TItem="DtoCity" @ref="ddlCity" AllowFiltering="true" AllowCustom="false" class="form-control" @bind-Value=oBank.BanCity PopupHeight="230px" DataSource="@dataCity">

                            <ComboBoxFieldSettings Text="Name" Value="Code" />

                            <ComboBoxEvents TValue="string" TItem="DtoCity" />

                        </SfComboBox>

                        <ValidationMessage For="@(() => oBank.BanCity)" />

                    </div>

                    <div class="form-group col-md-6">

                        <br />

                    </div>

                </div>

            </Template>

        </GridEditSettings>

        <GridColumns>

            <GridColumn Field=@nameof(DtoBank.BanCode) Width="150px" HeaderText="@_Localizer.GetString("lblCode")" TextAlign="TextAlign.Left"></GridColumn>

            <GridColumn Field=@nameof(DtoBank.BanNameGrid) HeaderText="@_Localizer.GetString("lblName")" TextAlign="TextAlign.Left"></GridColumn>

            <GridColumn Field=@nameof(DtoBank.BanZipGrid) HeaderText="@_Localizer.GetString("lblZipCode")" TextAlign="TextAlign.Left"></GridColumn>

            <GridColumn Field=@nameof(DtoBank.BanAddressGrid) HeaderText="@_Localizer.GetString("lblAddress")" TextAlign="TextAlign.Left"></GridColumn>

            <GridColumn HeaderText="@_Localizer.GetString("lblBankAccount")" Width="150">

                <GridCommandColumns>

                    <GridCommandColumn Type="CommandButtonType.None" ButtonOption="@(new CommandButtonOptions() { IconCss="e-icons e-eye", CssClass="e-primary"})" Title="Accounts"></GridCommandColumn>

                </GridCommandColumns>

            </GridColumn>

            <GridColumn HeaderText="" Width="150">

                <GridCommandColumns>

                    <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-edit", CssClass="e-flat" })" Title="Edit"></GridCommandColumn>

                    <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-delete", CssClass="e-flat" })" Title="Delete"></GridCommandColumn>

                </GridCommandColumns>

            </GridColumn>

        </GridColumns>

    </SfGrid>

</div>

@code{

 protected override async Task OnInitializedAsync()

 {

     AuthenticationState authState = await _authStateProvider.GetAuthenticationStateAsync();

     if (!authState.User.Identity.IsAuthenticated)

     {

         NavigationManager.NavigateTo("/", true);

     }

     else

     {

         await PopulateCountry();

         await PopulateBankAndBankGrid();

     }

 }

 public async Task PopulateCountry()

 {

     configSec = _config.GetSection("UrlAPI:Location");

     UrlCountry = configSec.Value;

     UrlCountry += "Country/";

     configSec = _config.GetSection("IdApplication");

     IdAppSys = configSec.Value;

     _dtoCountry = await GetAllCountries();

     dataCountry = _dtoCountry.Data;

 }

public async Task populateDropdowns2(string country, string state, string city )

{

    configSec = _config.GetSection("UrlAPI:Location");

    UrlState = configSec.Value;

    UrlState += "State/";

    _dtoState = await GetStateByCountry(country);

    if (_dtoState != null && _dtoState.Data.Count > 0)

    {

        dataState = _dtoState.Data;

    }

    else

    {

        dataState = null;

    }

    configSec = _config.GetSection("UrlAPI:Location");

    UrlCity = configSec.Value;

    UrlCity += "City/";

    _dtoCity = await GetCityByState(country, state);

    if (_dtoCity != null && _dtoCity.Data.Count > 0)

    {

        dataCity = _dtoCity.Data;

    }

    else

    {

        dataCity = null;

    }

    //StateHasChanged();

    Grid.CallStateHasChanged();

    Grid.ForceUpdate = true;

    Grid.PreventRender(false);

}

}

[Prathap Senthil]

Hi Cristian,

Based on the reported problem that "when editing the Grid modal loads, it does not display the selected values in the listboxes," it seems that your code is missing the primary key. We would like to clarify that the CRUD operation requires the presence of a primary key to execute successfully. Therefore, please ensure that the primary key is included as a unique value in the Grid column. Refer to the code snippet and documentation below for your reference.

Sample: https://blazorplayground.syncfusion.com/embed/rtBJXyCqCIBmWofv?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5
UG: Editing in Blazor DataGrid Component | Syncfusion

GridColumns>

 

            <GridColumn Field=@nameof(DtoBank.BanCode) Width="150px" HeaderText="lblCode" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left"></GridColumn>

 

            <GridColumn Field=@nameof(DtoBank.BanNameGrid) HeaderText="lblName" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left"></GridColumn>

 

            <GridColumn Field=@nameof(DtoBank.BanZipGrid) HeaderText="lblZipCode" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left"></GridColumn>

 

            <GridColumn Field=@nameof(DtoBank.BanAddressGrid) HeaderText="lblAddress" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left"></GridColumn>

 

            <GridColumn HeaderText="lblBankAccount" Width="150">

 

                <GridCommandColumns>

 

                    <GridCommandColumn Type="Syncfusion.Blazor.Grids.CommandButtonType.None" ButtonOption="@(new CommandButtonOptions() { IconCss="e-icons e-eye", CssClass="e-primary"})" Title="Accounts"></GridCommandColumn>

 

                </GridCommandColumns>

 

            </GridColumn>

 

            <GridColumn HeaderText="" Width="150">

 

                <GridCommandColumns>

 

                    <GridCommandColumn Type="Syncfusion.Blazor.Grids.CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-edit", CssClass="e-flat" })" Title="Edit"></GridCommandColumn>

 

                    <GridCommandColumn Type="Syncfusion.Blazor.Grids.CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-delete", CssClass="e-flat" })" Title="Delete"></GridCommandColumn>

 

                </GridCommandColumns>

 

            </GridColumn>

 

 

 

        </GridColumns>

Regards,
Prathap Senthil