Update Another Grid Column Based on A Selection of A Grid Combobox Column

[Todd]

I have a Blazor grid with two columns -- gridcolumn 1 = SecuritySymbol combobox with two columns (SecuritySymbol, SecurityName) and gridcolumn 2 = SecurityName.

I would like column 2 (SecurityName) be automatically populated with the SecurityName (2nd column in the combobox) during inline editing when a SecuritySymbol is selected from the SecuritySymbol combobox in gridcolumn 1.

I have attached the code that I have been working with to accomplish this. When a SecuritySymbol is selected, the associated SecurityName (column 2 in the combobox) populates the inline gridcolumn 2 as expected. However, when I click on the update button or move to a new row, the SecurityName in the inline editor never saves to the grid or db once editing is complete. If I type something directly into the SecurityName (gridcolumn 2) and click the update button or select a new row, the data I manually entered in gridcolumn 2 saves without any issue.

I am using inline editmode.

What do I need to do so that what is residing in the inline editor SecurityName column commits to the grid and db?

Todd

Attachment: Grid_With_Multicolumn_Combo.txt_5fc32c21.zip

[Prathap Senthil]

Hi Todd

Based on your requirement , we would like to inform you that we have prevented unwanted rendering of Grid component during the external action for better performance. So, we suggest you use PreventRender(false) on value change event to reflect the changes in textbox values to achieve your requirement. Kindly refer the attached code snippet for your reference.

 

<SfGrid DataSource="@Orders" @ref="Grid" TValue="Order" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315">

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

    <GridColumns>

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="Syncfusion.Blazor.Grids.EditType.DropDownEdit" Width="150">

            <EditTemplate>

                @{

                    var data = context as Order;

                    <SfComboBox ID="ShipCountry" TItem="Country" TValue="string" @bind-Value="@(data.ShipCountry)" DataSource="@Countries">

                        <ComboBoxFieldSettings Value="CountryName" Text="CountryName"></ComboBoxFieldSettings>

                        <ComboBoxEvents TItem="Country" ValueChange=@((args)=>ValueChangeSecurity(args , data)) TValue="string"></ComboBoxEvents>

                    </SfComboBox>

                }

             

            </EditTemplate>

        </GridColumn>

 

        <GridColumn Field="@nameof(Order.ShipState)" Width="150">

 

            <EditTemplate>

                @{

                    var data = context as Order;

                     <SfTextBox ID="SecurityName" @bind-Value="@data.ShipState" ></SfTextBox>

                }

              

            </EditTemplate>

 

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

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

    public SfGrid<Order> Grid { get; set; }

    public void ValueChangeSecurity(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Country> args, Order order)

    {

        order.ShipState = "Updated";

        Grid.PreventRender(false);

    }

 

}

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

Documentation: Cascading DropDownList in Blazor DataGrid Component | Syncfusion

Regards,
Prathap S