DropDownList inside a GridColumn - How to bind to the currently selected row on edit

[Andy Richard]

I have a dropdownlist inside a grid column, which works perfectly well for viewing data. I would like to bind it to the currently selected row so that the item in the list that is showing when viewing the grid gets selected in the dropdownlist when the its row is being edited. Currently, when a row is in edit mode, the dropdownlist item selected becomes blank.

<SfGrid DataSource="@model.AgencyProducts" EnableVirtualization="true" TValue="AgencyProduct" AllowSelection="true" AllowSorting="true" AllowReordering="true" AllowResizing="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Save", "Cancel" })">

<GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Single"></GridSelectionSettings>

<GridEditSettings AllowEditing="true" AllowEditOnDblClick="true" AllowNextRowEdit="true" AllowAdding="true" AllowDeleting="true" NewRowPosition="Syncfusion.Blazor.Grids.NewRowPosition.Bottom" ShowDeleteConfirmDialog="true"></GridEditSettings>

<GridEvents TValue="AgencyProduct" OnActionComplete="OnActionComplete" />

<GridColumns>

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

<GridColumn Field=@nameof(AgencyProduct.Name) HeaderText="Product" AutoFit="true" DataSource="@agencyProducts">

<EditTemplate Context="ap">

<div class="btn-container">

<SfDropDownList TItem="Product" TValue="string" Placeholder="Select a product" DataSource="@products" AutoFit="true">

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

</SfDropDownList>

</div>

</EditTemplate>

</GridColumn>

<GridColumn Field=@nameof(AgencyProduct.ConnectOnHand) HeaderText="Connect On Hand*" AutoFit="true" AllowEditing="false"></GridColumn>

<GridColumn Field=@nameof(AgencyProduct.OrderQuantity) HeaderText="Order Quantity" AutoFit="true"></GridColumn>

<GridColumn Field=@nameof(AgencyProduct.LotCodes) HeaderText="Lot Codes" AutoFit="true"></GridColumn>

<GridColumn Field=@nameof(AgencyProduct.PalletSpaces) HeaderText="Pallet Spaces" AutoFit="true"></GridColumn>

</GridColumns>

</SfGrid>

[Vignesh Natarajan]

Hi Andy,  

Thanks for contacting Syncfusion support.  

Query: “ I would like to bind it to the currently selected row so that the item in the list that is showing when viewing the grid gets selected in the dropdownlist when the its row is being edited” 

We have analyzed your query and we understand that you have rendered the DropDownList (which appear on editing a column) component in a Text and Value pair which is similar to foreign key behavior. We have provided support for similar behavior in Grid using GridForeignColumn. Using foreign key column feature, you can render the column with foreign key behavior. By default, dropdownlist component will be rendered for foreignkey column and while editing the record, value will be displayed properly.  

  

Refer the below code example.  

<SfGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings>    <GridColumns>        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>        <GridForeignColumn Field=@nameof(Order.EmployeeID) ForeignKeyField="ID" ForeignKeyValue="Name" ForeignDataSource="products" HeaderText="Customer Name" Width="150"></GridForeignColumn>        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" EditType="EditType.NumericEdit" Format="C2" Width="140" TextAlign="@TextAlign.Right"></GridColumn>        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" EditType="EditType.DatePickerEdit" Format="d" Type="ColumnType.Date" Width="160"></GridColumn>    </GridColumns></SfGrid>

For your convenience we have prepared a sample which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/163804/ze/DataGrid1758000920  

Refer our UG documentation for your reference 

https://blazor.syncfusion.com/documentation/datagrid/columns/#foreign-key-column---local-data 

https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template -  Refer our UG documentation to display selected value in DropDownList inside Grid while using EditTemplate 

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan  

 

[Andy Richard]

That almost worked but i wasn't able to make the product dropdownlist editable. My issue is more complicated than that. The model has a list of products and other editable fields. Each of those products have to be in the grid as a dropdown. The source of the dropdownlist is the products table in the database. Each dropdownlist has to be bound to one of the products in the model's list of products.

[Vignesh Natarajan]

Hi Andy,  

 

Thanks for the update.  

 

Query: “but i wasn't able to make the product dropdownlist editable. ” 

 

We understand that you are facing trouble in populating the drop down list with the datasource from your database. But we need some details to validate the reported query further at our end. So kindly share the following details.  

 

1. Share your model class objects for Grid and DropDownList.
2. Share the details (screenshot) about the issue you are facing in Grid while using ForeignKey column.
3. Are you facing any exception or script error in browser console. If yes, share the screenshot of the issue.
4. Do you want to display different datasource to dropdownlist component other than the foreignkey data?
5. If possible share a simple issue reproducible sample or ty to reproduce the reported issue in provided sample and revert back to us.    

 

 Above requested details will be very helpful for us to validate the reported query at our end and provide solution as early as possible.  

 

Regards, 

Vignesh Natarajan 

[Andy Richard]

Your solution does work. I must have done something wrong. Thank you.

[Renjith Singh Rajendran]

Hi Andy, 

Thanks for your update. Please check this from your side. 

If you are still facing difficulties, then kindly get back to us with the requested details to proceed further. 

Regards, 

Renjith R