Edit DropdownList within SfGrid Template => not selectable/usable Dropdown

[Gökhan]

Dear Syncfusion Team,

could you please so kind as to help me out of the following issue:

when I try to edit an entry via a drop down list I am facing the situation shown in the attached screenshot:

Do you have an idea what is causing this problem?

In the following you see my code for this part:

@page "/contacts"
 
@using DataLibrary
@using BlazorServer.Models
@using Microsoft.Extensions.Configuration
@inject IDataAccess _data
@inject IConfiguration _config
@inject NavigationManager UriHelper
 
<h3>LumiSky Kontakte</h3>
 
<button class="btn btn-primary" @onclick="@Navigate">Neuen Kontakt anlegen</button>
 
@{
    var Tool = (new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" });
}
 
<SfGrid DataSource="@PersonData" Toolbar="@Tool" Height="820" Width="auto">
    <GridEvents TValue="PersonModel" OnActionBegin="OnActionBeginHandler"></GridEvents>
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog">
        <Template>
            @{ var personmodel = (context as PersonModel); }
            <div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <SfNumericTextBox @bind-Value="@(personmodel.Id)"
                                          Enabled="@IsAddNew"
                                          FloatLabelType="FloatLabelType.Always"
                                          Placeholder="Person ID"
                                          TValue="int">
                        </SfNumericTextBox>
                    </div>
                </div>
            </div>
            <div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <SfDropDownList DataSource="@PersonData"
                                        TItem="PersonModel"
                                        TValue="string"
                                        @bind-Value="@(personmodel.Anrede)"
                                        Enabled="@IsAddNew"
                                        FloatLabelType="FloatLabelType.Always"
                                        Placeholder="Anrede auswählen"
                                        AllowFiltering="true"
                                        FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains">
                            <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </div>
                </div>
            </div>
        </Template>
    </GridEditSettings>
    <GridColumns>
        <GridColumn Field="@nameof(PersonModel.Id)"
                    HeaderText="Id"
                    TextAlign="TextAlign.Right"
                    AutoFit="true"
                    IsPrimaryKey="true">
        </GridColumn>
        <GridColumn Field="@nameof(PersonModel.Anrede)"
                    HeaderText="Anrede"
                    TextAlign="TextAlign.Right"
                    AutoFit="true"
                    EditType="EditType.DropDownEdit"
                    EditorSettings="@ShipNameEditParams">
        </GridColumn>
        <GridColumn Field="@nameof(PersonModel.Titel)"
                    HeaderText="Titel"
                    TextAlign="TextAlign.Right"
                    AutoFit="true">
        </GridColumn>
        <GridColumn Field="@nameof(PersonModel.Vorname)"
                    HeaderText="Vorname"
                    TextAlign="TextAlign.Right"
                    AutoFit="true">
        </GridColumn>
        <GridColumn Field="@nameof(PersonModel.Nachname)"
                    HeaderText="Nachname"
                    TextAlign="TextAlign.Right"
                    AutoFit="true">
        </GridColumn>
        <GridColumn Field="@nameof(PersonModel.Position)"
                    HeaderText="Position"
                    TextAlign="TextAlign.Right"
                    AutoFit="true">
        </GridColumn>
        <GridColumn Field="@nameof(PersonModel.Tel)"
                    HeaderText="Telefon"
                    TextAlign="TextAlign.Right"
                    AutoFit="true">
        </GridColumn>
        <GridColumn Field="@nameof(PersonModel.Mob)"
                    HeaderText="Mobil"
                    TextAlign="TextAlign.Right"
                    AutoFit="true">
        </GridColumn>
        <GridColumn Field="@nameof(PersonModel.E_Mail)"
                    HeaderText="E-Mail"
                    TextAlign="TextAlign.Right"
                    AutoFit="true">
        </GridColumn>
    </GridColumns>
</SfGrid>
 
@code {
 
    List<PersonModel> PersonData { get; set; }
 
    protected override async Task OnInitializedAsync()
    {
        string sql = "select * from tbl_PERSON";
 
        PersonData = await _data.LoadData<PersonModel, dynamic>(sql, new { }, _config.GetConnectionString("default"));
    }
 
    void Navigate()
    {
        UriHelper.NavigateTo("Kontakt_Anlegen");
    }
 
 
    // Props für Übergabe an SQL Parameter
    public string Anrede { get; set; }
    public string Titel { get; set; }
    public string Vorname { get; set; }
    public string Nachname { get; set; }
    public string Position { get; set; }
 
    // Klasse für DropDown
    public class DD_Anrede
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
 
    // Einträge für DropDpwn --> später Anbindung an Tabelle in MySql
    List<DD_Anrede> anrede = new List<DD_Anrede>()
{
        new DD_Anrede() { ID = "1", Name = "Frau"},
        new DD_Anrede() { ID = "2", Name = "Herr"}
    };
 
    public IEditorSettings ShipNameEditParams = new DropDownEditCellParams
    {
        Params = new DropDownListModel<object, object>() { AllowFiltering = true, ShowClearButton = true }
    };
 
 
    public bool IsAddNew = false;
    private void OnActionBeginHandler(ActionEventArgs<PersonModel> args)
   => IsAddNew = args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add); }
 
}
 
<style>
    .form-group .col-md-6 {
        width: 200px;
    }
</style>

Looking forward for your feedback and thanks in advance for your efforts.

All the best from Germany.

Gökhan

Attachment: Screenshot20210523_3117a760.zip

[Vignesh Natarajan]

Hi Gökhan, 

 

Thanks for contacting Syncfusion support.  

 

Query: “when I try to edit an entry via a drop down list I am facing the situation shown in the attached screenshot: Do you have an idea what is causing this problem?”  

 

We have analyzed your query and we are able to reproduce the reported behavior at our end also. This is because you have enabled the IsAddNew Boolean variable only when RequestType is Add. While editing a records, RequestType will be BeginEdit. So we request you to modify the condition as below to enable the drop down list as well as Numerictext box control while editing and inserting a record.  

 

private void OnActionBeginHandler(ActionEventArgs<OrdersDetails> args) 

 => IsAddNew = args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add) || args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.BeginEdit); 

 

 

Note: If you want to enable only the dropdownlist control alone , kindly maintain separate Boolean variable. As IsAddNew will enable both the controls while editing and inserting.   

 

We have attached the sample using the modified solution, which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/165725/ze/DataGrid-296225843.zip  

 

If above solution does not resolve your query or if we misunderstood your query, kindly get back to us with more details about your requirement.    

 

Regards, 

Vignesh Natarajan