DropdownList not working inside nested Grid's EditTemplate

[Welol Next srl]

Hi, I'm trying to populate a Dropdown list with objects named MetalDTO. The value should be binded to a property of another object: ItemNestedDetail.

The DropDown list should show the objects inside MetalList, the datasource that I defined, which is a list of MetalDTO. The MetalList is valued.

The problem is that when I click on the small arrow to open the Nested Grid, it crashes and I get an error (as you can see in one of the pictures in the attached zipped folder).

I would like it to simply open the nested grid, as it happens when I remove the column for the Dropdown list with metals inside.

The part of code that is not working is the highlighted in yellow, while in green there's an example of a dropdown list which is working perfectly fine.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<SfGrid AllowPaging="true" DataSource="@TemporaryItemsData" Toolbar="@(new List<string>() { "Add","Edit","Delete","Update","Cancel" })">

                <GridEvents OnActionBegin="OnActionBegin" TValue="ItemDTO"></GridEvents>

                <GridEditSettings AllowAdding="@IsAddingAllowed" AllowEditing="@IsEditingAllowed" 

                                             AllowDeleting="@IsDeletingAllowed" Mode="@EditMode.Normal"></GridEditSettings>

                <GridColumns>

                    <GridColumn Field=@nameof(ItemDTO.Id) IsPrimaryKey="true" Visible="false" TextAlign="@TextAlign.Left" Width="140"></GridColumn>

[The following column works. I would like to have the same behaviour for the dropdown list inside the Nested Grid]

                    <GridColumn Field=ItemDetail.ItemType.Name HeaderText="@Loc["Oncia_Items_TypeName"]" Width="110" EditType="EditType.DropDownEdit">

                        <EditTemplate Context="contex">

                            <SfDropDownList ID="ItemTypeId" CssClass="e-custom-select" TItem="ItemTypeDTO" 

TValue="string" @bind-Value="@((contex as ItemDTO).ItemDetail.ItemType.Name)" 

Placeholder="@Loc["Oncia_Items_TypeName"]" DataSource="@TypeList">

                                <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>

                            </SfDropDownList>

                        </EditTemplate>

                    </GridColumn>

                </GridColumns>

<!-- Nested Grid - Item details -->

                <GridTemplates>

                    <DetailTemplate>

                        @{ var item = (context as ItemDTO);

                            <SfGrid TValue="ItemNestedDetail" DataSource="@ItemsDetailsData" Query="@GetItemDetailsQuery(item)">

                                <GridEvents OnActionBegin="OnNestedActionBegin" TValue="ItemNestedDetail"></GridEvents>

                                <GridEditSettings AllowAdding="IsAddingAllowed" AllowEditing="IsEditingAllowed" AllowDeleting="IsDeletingAllowed"></GridEditSettings>

                                <GridPageSettings PageSize="8"></GridPageSettings>

                                <GridColumns>

                                    <GridColumn Field=@nameof(ItemNestedDetail.Id) IsPrimaryKey="true" Visible="false" Width="110"></GridColumn>

[This is the Dropdown List which is not working]

                                    <GridColumn Field=@nameof(ItemNestedDetail.Metal.Name) HeaderText="@Loc["Oncia_Items_Metal"]" Width="110" EditType="EditType.DropDownEdit">

                                        <EditTemplate Context="nestedContex">

                                            <SfDropDownList ID="MetalName" CssClass="e-custom-select" TItem="MetalDTO" TValue="string" @bind-Value="@((nestedContex as ItemNestedDetail).Metal.Name)" Placeholder="@Loc["Oncia_Items_Metal"]" DataSource="@MetalList">

                                                <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>

                                            </SfDropDownList>

                                        </EditTemplate>

                                    </GridColumn>

                                    @if (IsActionColumnToShow)

                                    {

                                        <GridColumn HeaderText="@Loc["Oncia_Common_Actions"]" Width="110">

                                            <GridCommandColumns>

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

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

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

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

                                            </GridCommandColumns>

                                        </GridColumn>

                                    }

                                </GridColumns>

                            </SfGrid>

                        }

                    </DetailTemplate>

                </GridTemplates>

            </SfGrid>

Attached you'll find the screenshots of the problem, the full razor page and the utilized models

Attachment: DDL_not_working_on_nested_grid_b679f9e6.zip

[Vignesh Natarajan]

Hi Welol,  

 

Thanks for contacting Syncfusion support.  

 

Query: “The problem is that when I click on the small arrow to open the Nested Grid, it crashes and I get an error (as you can see in one of the pictures in the attached zipped folder).” 

 

We have analyzed your query and we are able to reproduce the reported issue at our end also while preparing a sample using your code example. This is because you have defined the Compex column wrongly in Grid component. Complex column Field property can be directly defined as a String without accessing it from model class.  

 

Refer the below code example.  

 

<GridTemplates> 

        <DetailTemplate> 

            @{ var item = (context as ItemDTO); 

                <SfGrid TValue="ItemNestedDetail" DataSource="@ItemsDetailsData" Query="@GetItemDetailsQuery(item)"> 

                    <GridEvents OnActionBegin="OnNestedActionBegin" TValue="ItemNestedDetail"></GridEvents> 

                    <GridEditSettings AllowAdding="IsAddingAllowed" AllowEditing="IsEditingAllowed" AllowDeleting="IsDeletingAllowed"></GridEditSettings> 

                    <GridPageSettings PageSize="8"></GridPageSettings> 

                    <GridColumns> 

                        <!--Primary Key - Editing feature requires a primary key column for CRUD operations.--> 

                        <GridColumn Field=@nameof(ItemNestedDetail.Id) IsPrimaryKey="true" Visible="false" Width="110"></GridColumn> 

  

                        <!-- Metallo --> 

                        <GridColumn Field="Metal.Name" HeaderText="@Loc["Oncia_Items_Metal"]" Width="110" EditType="EditType.DropDownEdit"> 

                            <EditTemplate Context="nestedContex"> 

                                <SfDropDownList ID="Metal___Name" CssClass="e-custom-select" TItem="MetalDTO" TValue="string" 

                                                @bind-Value="@((nestedContex as ItemNestedDetail).Metal.Name)" Placeholder="@Loc["Oncia_Items_Metal"]" DataSource="@MetalList"> 

                                    <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings> 

                                </SfDropDownList> 

                            </EditTemplate> 

                        </GridColumn> 

. . . .  

                    </GridColumns> 

                </SfGrid> 

            } 

        </DetailTemplate> 

    </GridTemplates> 

 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#complex-data-binding  

 

Please get back to us if you have further queries.      

 

Regards, 

Vignesh Natarajan 

[Welol Next srl]

Thanks a lot, it worked!

[Welol Next srl]

Thank you, this solution worked!

Reguards.

[Vignesh Natarajan]

Hi Welol,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan