Content of secondary Foreign column dependent on the primary Foreign column

[Mike Chafin]

I have a grid that has two foreign columns.

                <GridForeignColumn Field=@nameof(VendorBillToTransaction.PropertyId) ForeignDataSource="Properties" ForeignKeyField="RentalId" ForeignKeyValue="Name" HeaderText="Property" HeaderTextAlign="TextAlign.Center" Format="" TextAlign="TextAlign.Center" AllowEditing="false" Type="ColumnType.String" />

                <GridForeignColumn Field=@nameof(VendorBillToTransaction.UnitId) ForeignDataSource="propertyUnits" ForeignKeyField="UnitId" ForeignKeyValue="Designation" HeaderText="Unit" HeaderTextAlign="TextAlign.Center" Format="" TextAlign="TextAlign.Center" AllowEditing="false" Type="ColumnType.String" />

When a property is selected from the Property column the Unit column should only display those unit belonging to the property.

Is there an event that can be used after the property is selected to populate the unit column?

How do I accomplish this?

[Prathap Senthil]

Hi Mike Chafin,

Before proceeding with the requirement, we require some additional clarification from your end. Please share the below details to proceed further at our end.

• Are you expecting a cascading dropdown list behavior, where the options in the Unit column are dynamically filtered based on the selected Property?
• Could you clarify how you want the Unit column to be populated after a property is selected?(ex.Whether you want the units to automatically refresh, initialize rendering, edit, or select the row?)
• Could you please share us the more details bout your requirement.?

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

Regards,
Prathap Senthil

[Mike Chafin]

The user selects the property, and then the unit dropdown displays the available units at the property.

With non-grid dropdowns, I would use an event from the property dropdown to query the units for the unit dropdown.  

How do I accomplish this in the Datagrid component using a foreign column for the Property and the Unit?

To answer your questions above :

1. yes
2. I want the units to refresh automatically with only the units available for the selected property.
3. See above.
4. 
   

Thanks

[Prathap Senthil]

Based on your requirement, we suggest using the following approach to filter the list of units based on the selected PropertyId in the first dropdown. You need to modify the ValueChange method to update FilteredUnits based on the selected value. Please refer to the code snippet and sample provided below for your reference.

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

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

     

        <GridColumns>

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

 

            <!-- Property Column -->

            <GridForeignColumn Field=@nameof(OrderData.PropertyId) HeaderText="Property" ForeignKeyValue="Name" ForeignDataSource="@Properties" Width="150">

                <EditTemplate>

                    @{

 

 

                    <SfDropDownList ID="PropertyId"  TItem="PropertyData" TValue="int" @bind-Value="@((context as OrderData).PropertyId)" DataSource="@Properties">

                        <DropDownListEvents TValue="int" TItem="PropertyData" ValueChange="ValueChange"></DropDownListEvents>

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

                </SfDropDownList>

                    }

                </EditTemplate>

            </GridForeignColumn>

 

            <!-- Unit Column -->

            <GridForeignColumn Field=@nameof(OrderData.UnitId) HeaderText="Unit" ForeignKeyValue="Designation" ForeignDataSource="@AllUnits" Width="150">

 

                <EditTemplate>

                @{

                    <SfDropDownList ID="UnitId" TItem="UnitData" TValue="int" @bind-Value="@((context as OrderData).UnitId)" DataSource="@FilteredUnits">

                        <DropDownListEvents TValue="int" TItem="UnitData"></DropDownListEvents>

                        <DropDownListFieldSettings Text="Designation" Value="UnitId"></DropDownListFieldSettings>

                    </SfDropDownList>

 

                }

                </EditTemplate>

 

            </GridForeignColumn>

 

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

            <GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

        </GridColumns>

    </SfGrid>

 

@code {

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

    public List<PropertyData> Properties { get; set; }

    public List<UnitData> AllUnits { get; set; }

    public List<UnitData> FilteredUnits { get; set; }

 

    public async Task ValueChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<int, PropertyData> args)

    {

        var value = args.Value;

        // Filter the units based on the selected property

        FilteredUnits = AllUnits.Where(unit => unit.PropertyId == value).ToList();

 

    

         GridRef.PreventRender(false);

    }

    }

 

 

Sample:https://blazorplayground.syncfusion.com/embed/htLfWjrfpoozCkED?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference:Cascading DropDownList in Blazor DataGrid Component | Syncfusion