Update column value based on input of another column

[Jasin Kadrioski]

Hello,

i have found similar questions however they are unrelated to blazor or target dropdownlists specifically but in my case Im working with a standard textbox as a column. What i want to achieve is basically whenever a user inputs a number inside the columns text field, the corresponding "name" column should be autofilled based on matching values. The backend logic is pretty simple, but i don't know how to achieve the event handling.

EDIT: I forgot to add: The field should be filled with data as soon as the user leaves the "cell". But i already tried using OnCellSave or OnCellEdit and this did not work like i expected it to.

This is my current code:   

<div id="purchasing_grid">

        <SfGrid AllowTextWrap="true" @ref="purchasing_grid" AllowFiltering="true" AllowPaging="false" AllowResizing="true" DataSource="@purchases" AllowSorting="true" AllowExcelExport="true" Toolbar="@(new List<string>() {"Add","Edit", "Delete", "Cancel", "Update","ExcelExport"})">

            <GridEvents TValue="purchasing" OnToolbarClick="ToolbarClickHandler" OnActionBegin="ActionHandler"></GridEvents>

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

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

            <GridColumns>

                <GridColumn Type='ColumnType.CheckBox' Width="50"></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.mbs5_name)" Width="10%" AllowAdding="false" AllowEditing="false" HeaderText="MBS5 Name"></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.mbs5_nr)" Width="6%" HeaderText="MBS5 Nr."></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.article_name_supplier)" Width="8%" ValidationRules="@(new ValidationRules { Required = true })" HeaderText="Artikelname - Lieferant"></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.article_nr)" Width="6%" ValidationRules="@(new ValidationRules { Required = true })" HeaderText="Artikel Nr."></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.container_unit)" Width="4.5%" ValidationRules="@(new ValidationRules { Required = true })" HeaderText="Einheit Gebinde"></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.container_weight)" Width="4.5%" Format="0.000" ValidationRules="@(new ValidationRules { Required = true })" HeaderText="Gewicht Gebinde (in kg)">

                    <EditTemplate>

                        <SfNumericTextBox TValue="double?" @bind-Value="@((context as purchasing).container_weight)" Format="0.000" Decimals="4" ShowClearButton="false" ShowSpinButton="false" Min="0">

                        </SfNumericTextBox>

                    </EditTemplate>

                </GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.container_content)" Width="4%" ValidationRules="@(new ValidationRules { Required = true })" HeaderText="GebindeInhalt">

                    <EditTemplate>

                        <SfNumericTextBox TValue="double?" @bind-Value="@((context as purchasing).container_content)" ShowClearButton="false" ShowSpinButton="false" Min="0">

                        </SfNumericTextBox>

                    </EditTemplate>

                </GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.container_content_unit)" Width="4%" ValidationRules="@(new ValidationRules { Required = true })" HeaderText="Einheit GebindeInhalt"></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.price_per_container)" ValidationRules="@(new ValidationRules { Required = true })" Format="0.00 '€'" HeaderText="Preis pro Gebinde">

                    <EditTemplate>

                        <SfNumericTextBox TValue="double?" @bind-Value="@((context as purchasing).price_per_container)" ShowClearButton="false" ShowSpinButton="false" Min="0">

                        </SfNumericTextBox>

                    </EditTemplate>

                </GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.price_per_kg)" Width="3.7%" AllowAdding="false" AllowEditing="false" Format="0.000 '€'" HeaderText="Preis pro kg">

                    <EditTemplate>

                        <SfNumericTextBox TValue="double?" @bind-Value="@((context as purchasing).price_per_kg)" Width="4.5%" Enabled="false" ShowClearButton="false" ShowSpinButton="false" Min="0">

                        </SfNumericTextBox>

                    </EditTemplate>

                </GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.valid_from)" Width="4.5%" Type="ColumnType.DateTime" Format="dd.MM.yyyy" ValidationRules="@(new ValidationRules { Required = true })" HeaderText="Gültig von"></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.valid_to)" Width="4.5%" Type="ColumnType.DateTime" Format="dd.MM.yyyy" ValidationRules="@(new ValidationRules { Required = true })" HeaderText="Gültig bis"></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.supplier)" Width="11%" ValidationRules="@(new ValidationRules { Required = true })" HeaderText="Lieferant">

                    <Template>

                        @{

                            var matter = (context as purchasing);

                            @matter.supplier

                        }

                    </Template>

                    <EditTemplate>

                        <SfDropDownList @ref="DropdownLieferanten" ID="lieferanten" TItem="string" TValue="string" @bind-Value="@((context as purchasing).supplier)" DataSource="lieferanten">

                        </SfDropDownList>

                    </EditTemplate>

                </GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.comments)" Width="5.9%" HeaderText="Kommentare"></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.transmitted)" Width="5.3%" DisplayAsCheckBox="true" AllowAdding="false" AllowEditing="false" HeaderText="übermittelt"></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.timestamp)" Width="5.3%" Format="dd.MM.yyyy HH:mm" AllowAdding="false" AllowEditing="false" HeaderText="übermittelt am"></GridColumn>

                <GridColumn TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Field="@nameof(purchasing.processed)" Width="5.7%" DisplayAsCheckBox="true" AllowAdding="false" AllowEditing="false" HeaderText="bearbeitet"></GridColumn>

            </GridColumns>

        </SfGrid>

    </div>

}

[Sarveswaran Palani]

Hi Jasin,

Greetings from Syncfusion support.

Query: “The field should be filled with data as soon as the user leaves the "cell"

From your query, we suspect that you want to change value of one column based on another column after performing edit operation. We have achieved your requirement using Template feature by utilizing the context value. We have attached the sample and code snippet for your reference. You can use this sample as a reference to make similar modifications in your project to meet your specific requirements.

<GridColumn Field=@nameof(Order.FinalCost) HeaderText="Final price" Format="C2" TextAlign="TextAlign.Center" Width="120">

     <Template>

         @{

             var value = (context as Order);

             var finalAmount = value.ManfCost;

             <div>$@finalAmount</div>

         }

     </Template>

</GridColumn>

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

In the above sample, if you change the Manufacturing cost column, it’ll automatically change the value in Final price column.

If you  have any further queries, please get back to us.

Regards,
Sarvesh