EjsGrid dropdown list bind entire object

[Daniele]

Hi, I have this scenario where I need to have a dropdown inside a datagrid which shows a list of objects, which represent measure units.

When in edit mode, I need that the whole object MeasureUnit is assigned to the relative property on the object Article. Here's what I came up with:

<EjsGrid TValue="Article" AllowPaging="true" Toolbar="@(new List() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height ="315">

<EjsDataManager AdaptorInstance="@typeof(RegistryDataAdaptor

)" Adaptor="Adaptors.CustomAdaptor" />

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ShowDeleteConfirmDialog="true" />

<GridColumns>

<GridColumn Field=@nameof(Article.Id) HeaderText="Id" IsPrimaryKey="true" Visible="false" />

<GridColumn Field=@nameof(Article.Description) HeaderText="Descrizione" />

<GridColumn Field=@nameof(Article.Notes) HeaderText="Note" />

@* *@

<GridColumn Field="MeasureUnit.Description" HeaderText="Unitá di misura" >

<EditTemplate>

<EjsDropDownList TValue="string" TItem="MeasureUnit">

<EjsDataManager AdaptorInstance="@typeof(RegistryDataAdaptor)" Adaptor="Adaptors.CustomAdaptor" />

<DropDownListFieldSettings Text="Description" Value="MeasureUnit">DropDownListFieldSettings>

EjsDropDownList>

EditTemplate>

GridColumn>

<GridColumn Field=@nameof(Article.Price) HeaderText="Prezzo" Format="C2" EditType="EditType.NumericEdit" Edit="@PriceEditParams"/>

GridColumns>

EjsGrid>

The AdaptorInstance works, because the list of articles is loaded correctly, and is also used in other pages with other T types.

Can you point me in the right direction?

Thank you!

[Renjith Singh Rajendran]

Hi Daniele, 

Thanks for contacting Syncfusion support. 

We are quite unclear about your exact requirement or the problem you are facing. We need more details to further proceed on this and provide you a solution as early as possible. Kindly get back to us with the following details for better assistance. 

1. Are you facing problem when updating the selected value from the DropDownList to Grid?
2. Or else are you facing problem with binding the MeasureUnit to the DropDownList? Please share the issue screenshot/video demo.
3. Share with us the model class code (MeasureUnit, Article) you are binding to Grid and Dropdown.
4. Share with us the complete RegistryDataAdaptor class codes.
5. Share more details about your datasource.
6. Share a detailed explanation of your complete requirement.
7. If possible, kindly share the sample which you have tried from your side, along with the video demo showing the problem you are facing.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 

Renjith Singh Rajendran. 

[Daniele]

Hi Renjith,

sorry for being not clear, I've attached my whole solution. What I'm trying to accomplish, is to have inside the table in the Articles page, a dropdown list which contains the MeasureUnit.Description, and then I can select one and associate the whole MeasureUnit inside the Article (as the Article model suggests)

Thank you!

Attachment: CornaSnc.Razor_c3cce846.zip

[Renjith Singh Rajendran]

Hi Daniele, 

Thanks for your update. 

We suspect that you would like display the Complex field column(MeasureUnit.Description) values in Grid. And also during editing show a Dropdown and selecting the values from the dropdown should update the selected value to the complex field column in Grid.  

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/columns/#complex-data-binding 

 

If so then we suggest you to refer the below codes to achieve this requirement. In the below code, we have displayed the complex field value to Grid by following the above documentation. And to update the complex field value selected from the dropdown to Grid, we suggest you to bind the “OnActionBegin” event of Grid. In this event handler, we suggest you to fetch the value selected from the dropdown and assign the value to the complex column field. Please refer the codes below, 

 

<EjsGrid TValue="Order" ...> 

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

    ... 

    <GridColumns> 

        <GridColumn Field="MeasureUnit.Description" HeaderText="Freight" Width="150">              @*Bind the complex column in Grid*@ 

            <EditTemplate> 

                <EjsDropDownList @ref="DropDownInstance" TValue="string" TItem="MeasureUnit"> 

                    <EjsDataManager AdaptorInstance="@typeof(DropDownCustomAdaptor)" Adaptor="Adaptors.CustomAdaptor" /> 

                    <DropDownListFieldSettings Text="Description" Value="Description">             @*Provide Text and Value as Description*@ 

                    </DropDownListFieldSettings> 

                </EjsDropDownList> 

            </EditTemplate> 

        </GridColumn> 

    </GridColumns> 

</EjsGrid> 

 

@code{ 

    EjsDropDownList<string,MeasureUnit> DropDownInstance; 

    ... 

    public void OnActionBegin(ActionEventArgs<Order> args) 

    { 

        if(args.RequestType.ToString() == "Save") 

        { 

            args.Data.MeasureUnit.Description = DropDownInstance.Value;    //Based on selected value from dropdown assign the MeasureUnit.Description value for args.Data 

        } 

 

    } 

    ... 

} 

And also we are facing the below exception when running the attached sample. So, we suggest you to try the above provided suggestions, and if you are still facing difficulties kindly share with us a working sample demo, so that we could validate and provide a suggestion based on your scenario and based on your data source bind to Grid and Dropdown. 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Daniele]

Ok! I got it working with your suggestion, now the description is returned correctly, but I would like to get back the whole MeasureUnit object, there's a way to do so? I've tried the attached solution, but I got back a null object inside DropDownInstance.Value...

Thank you for your time!

Daniele

Attachment: Articles_43cfd442.zip

[Renjith Singh Rajendran]

Hi Daniele, 

Based on this requirement, we have prepared a sample binding complex data to Grid, perform editing and save the value selected from the DropDownList to Grid. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1635885497 

 

We suggest you to refer the above attached sample and modify your application based on the attached sample. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.