Change value of textbox based on value of dropdown

[Preveen]

Hi,

I have a grid with 2 columns:

• Customer name
• Customer address

The Customer name cell is of EditType DropDownEdit.

I want the Customer address cell to get it's data from what I select for Customer name.

Here's the model:

public class Customer

{

     public int Id { get; set; }

     public string FullName { get; set; }

     public string Address{ get; set; }

}

For example:

If I select customer A with address A1, I want the Customer name cell set to A and the Customer address cell to A1

How can I do this?

[Vignesh Natarajan]

Hi Preveen,  

Thanks for contacting Syncfusion support.  

Query: “If I select customer A with address A1, I want the Customer name cell set to A and the Customer address cell to A1” 

We have analyzed your query and we suggest you to achieve your requirement using Edit Template feature of the GridColumn. Using EditTemplate we can render custom edit components inside the edit form. In FullName column, we have rendered DropDownList component with ValueChange event which will be triggered  when value is changed in DropdonwList.  In the value change event, we have updated the value of Address column textbox component.  

Refer the below code example.  

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

    <GridEvents OnActionBegin="OnBegin" TValue="Customer"></GridEvents> 

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

    <GridColumns> 

        <GridColumn Field=@nameof(Customer.Id) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn> 

        <GridColumn Field=@nameof(Customer.FullName) HeaderText="Customer Name" Width="150"> 

            <EditTemplate> 

                <SfDropDownList ID="FullName" TItem="Customer" TValue="string" @bind-Value="@((context as Customer).FullName)" DataSource="@Orders"> 

                    <DropDownListFieldSettings Value="FullName"></DropDownListFieldSettings> 

                    <DropDownListEvents ValueChange="OnChange" TItem="Customer" TValue="string"></DropDownListEvents> 

                </SfDropDownList> 

            </EditTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Customer.Address) HeaderText="Freight" Width="140" TextAlign="@TextAlign.Right"> 

            <EditTemplate> 

                @{ 

                    Address = (context as Customer).Address; 

                    <SfTextBox @ref="TxtBox" ID="Address" @bind-Value="@Address"></SfTextBox> 

                } 

            </EditTemplate> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

  

@code{ 

    SfTextBox TxtBox { get; set; } 

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

    public string Address { get; set; } 

    public void OnBegin(ActionEventArgs<Customer> Args) 

    { 

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

        { 

            Args.Data.Address = TxtBox.Value; 

        } 

    } 

    public void OnChange(ChangeEventArgs<string, Customer> Args) 

    { 

        TxtBox.Value = Args.Value + 1.ToString(); 

        TxtBox.FocusIn(); 

    } 

Note: To save the changes (Address column) in Grid, we have updated the Address column in OnActionBegin event of the Grid when RequestType is Save.  

For your convenience we have prepared a sample using above solution, which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/160149/ze/DataGrid-164648180  

Refer our Ug documentation for your reference 

Editing in Blazor DataGrid component - Syncfusion 

Editing in Blazor DataGrid component - Syncfusion  

Events in Blazor DataGrid component - Syncfusion  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan