Connect GridColumn ForeignKeyValue to EditTemplate

[Kenney Phan]

Hi,

I have a DataGrid with a GridForeignColumn. Within my  GridForeignColumn, I have an "EditTemplate" with a  SfDropDownList component. 

The problem I am having is displaying the same values from the ForeignKeyValue from my GridForeignColumn to the  SfDropDownList  in the EditTemplate.

I want to be able to bind the ForeignKeyValue to the '@bind-Value' attribute in SfDropDownList component as shown in the attached screenshot. However, this breaks the program because currently '@bind-Value' can only bind to the 'Field' attribute and not the ' ForeignKeyValue' in the GridForeignColumn.

Is there another way around this? Why is there no 'ForeignKeyValue' attribute for  SfDropDownList ?

Thanks,

Kenney

[Vignesh Natarajan]

Hi Kenney,  

 

Thanks for contacting Syncfusion support.  

 

Query: “The problem I am having is displaying the same values from the ForeignKeyValue from my GridForeignColumn to the  SfDropDownList  in the EditTemplate.” 

 

We have analyzed your query with the provided code example and we suspect that you are trying to display different value in dropdown list based on the loop up value in foreign key column instead of Foreignkey field. We would like to inform you that type of @bind-Value Value must be used similar to GridForeignColumn Field property, so that its corresponding value gets updated in Grid datasource based on lookup value. Since the scenario is difference in your sample, reported issue has occurred.    

 

We have prepared a modified solution to achieve your requirement. We have used OnActionBegin event to update the correct geofence id value in Grid based on the selected loctypeid value in DropDownList.   

 

Kindly refer the below code example for your reference.  

 

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

    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings> 

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

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridForeignColumn Field=@nameof(Order.GeoFenceListID) HeaderText="Employee Name" ForeignKeyValue="LocTypeID" ForeignDataSource="@Employees" Width="150"> 

            <Template> 

                @{ 

                    var ord = context as Order; 

                    var geofence = Employees.SingleOrDefault(x => x.GeoFenceListID == ord.GeoFenceListID); 

                    if (geofence != null) 

                    { 

                        var loctype = LocationTypes.SingleOrDefault(x => x.LocTypeID == geofence.LocTypeID); 

                        <div>@loctype.LocType</div> 

                    } 

                } 

            </Template> 

            <EditTemplate> 

                @{ 

                    var ord = context as Order; 

                    var geofence = Employees.SingleOrDefault(x => x.GeoFenceListID == ord.GeoFenceListID); 

                    <SfDropDownList @ref="Ddl" ID="GeoFenceListID" TItem="NameList" TValue="int?" Value="@geofence.LocTypeID" DataSource="@LocationTypes"> 

                        <DropDownListFieldSettings Text="LocType" Value="LocTypeID"></DropDownListFieldSettings> 

                    </SfDropDownList> 

                } 

            </EditTemplate> 

        </GridForeignColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    public List<Order> Orders { get; set; } 

    public List<EmployeeData> Employees { get; set; } 

    public List<NameList> LocationTypes { get; set; } 

    SfDropDownList<int?, NameList> Ddl { get; set; } 

  

  

    public void ActionBegin(ActionEventArgs<Order> Args) 

    { 

        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save) 

        { 

            var GeoFenceId = Employees.SingleOrDefault(x=>x.LocTypeID == Ddl?.Value).GeoFenceListID; 

            Args.Data.GeoFenceListID = GeoFenceId; 

        } 

    } 

 

 

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

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/342565/ze/DataGrid_Server299783955.zip 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/events#onactionbegin 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan