Why @onChange event is not working when we have two dropdowns in a same row (like cascading dropdowns) that the first one defines the second dropdown?

[Syncfusion Support]

Answer:

We realized that your requirement is to change the value of one dropdown based on the selected value from other dropdown in another column. If that is the case, it can be achieved through valueChange event instead of using onChange. We already have a documentation that explains about cascading dropdowns in Blazor Grid. You can find the code snippet of valueChange event and the documentation link below,

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

<GridEvents OnActionBegin="OnActionBegin" TValue="Orders">GridEvents>

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

<GridColumns>

. . . . . . . .

<GridColumn Field=@nameof(Orders.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150">

<EditTemplate>

<SfDropDownList ID="ShipCountry" Placeholder="Select a Country" TItem="string" TValue="string" @bind-Value="@((context as Orders).ShipCountry)" DataSource="@Countries">

<DropDownListEvents TValue="string" ValueChange="ValueChange">DropDownListEvents>

<DropDownListFieldSettings Text="ShipCountry" Value="ShipCountry">DropDownListFieldSettings>

SfDropDownList>

EditTemplate>

GridColumn>

<GridColumn Field=@nameof(Orders.ShipState) HeaderText=" ShipState" EditType="EditType.DropDownEdit" Width="150">

<EditTemplate>

<SfDropDownList ID="ShipState" Placeholder="Select a State" TItem="string" Enabled="@Enabled" TValue="string" @bind-Value="@((context as Orders).ShipState)" DataSource="@States">

<DropDownListFieldSettings Text="ShipState" Value="ShipState">DropDownListFieldSettings>

SfDropDownList>

EditTemplate>

GridColumn>

GridColumns>

SfGrid>

@code{

public void ValueChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)

{

if (args.Value == "United States")

{

States = new List<string>() { "New York", "Virginia", "Washington" };

}

else if (args.Value == "Australia")

{

States = new List<string>() { "Queensland", "Tasmania", "Victoria" };

}

Enabled = true;

}

}

Documentation - https://blazor.syncfusion.com/documentation/datagrid/how-to/cascading-dropdownlist-with-grid-editing/