Assign Selected Text Value Of Dropdown List To Textbox In Another Cell Of Same Row

Assigning selected text of dropdown in textbox of GridView

If you want to assign selected text value of dropdown list to textbox that is present in another cell of the same row, you can use jQuery to achieve the same. Kindly refer to the below example for the same.

Add GridView to ASPX page

<asp:GridView ID="grvCurrency" runat="server" CssClass="tablesaw table table-condensed table-striped table-bordered tablesaw-swipe hdt" AutoGenerateColumns="False" OnRowDataBound="grvCurrency_OnRowDataBound">
<Columns>
<asp:TemplateField HeaderText="Currency">
<ItemTemplate>
<asp:Label ID="lblProjectCurrency" runat="server" Text='<%# Bind("ProjectCurrencyID")%>' Visible="false"></asp:Label>
<asp:Label ID="lblCurrency" runat="server" Text='<%# Bind("CurrencyID")%>' Visible="false"></asp:Label>
<asp:DropDownList ID="ddlCurrency" CssClass="form-control ddlclass" runat="server"> </asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:TextBox ID="txtProjectCurrencyName" MaxLength="100" Text='<%# Bind("ProjectCurrencyName") %>' CssClass="form-control" runat="server"> </asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Value">
<ItemTemplate>
<asp:TextBox ID="txtCurrencyValue" MaxLength="100" Text='<%# Bind("ProjectCurrencyValue") %>' CssClass="form-control" runat="server"> </asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" HeaderStyle-Width="5%">
<ItemTemplate>
<asp:LinkButton ID="lnkAdd" runat="server" CommandArgument='<%# Eval("ProjectCurrencyID") %>' ToolTip="Add" Text="Add" OnClick="lnkAdd_OnClick"> <span class="fa fa-plus"></span> </asp:LinkButton>
<asp:LinkButton ID="lnkDelete" runat="server" CommandArgument='<%# Eval("ProjectCurrencyID") %>' ToolTip="Delete" OnClientClick="return DeleteConfirmation()" Text="Delete" OnClick="lnkDelete_OnClick"> <span class="fa fa-trash"></span> </asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Now, bind the currency with data.

private void BindProjectCurrencies(DataTable dtCurrencies) {
if (dtCurrencies != null && dtCurrencies.Rows.Count > 0) {
List < ProjectCurrency > projectCurrency = new List < ProjectCurrency > ();
foreach(DataRow dr in dtCurrencies.Rows) {
projectCurrency.Add(new ProjectCurrency() {
ProjectCurrencyID = Convert.ToInt32(dr[FIELD_PROJECT_CURRENCY_ID]),
CurrencyID = Convert.ToInt32(dr[FIELD_CURRENCY_ID]),
ProjectID = Convert.ToInt32(dr[FIELD_PROJECT_ID]),
ProjectCurrencyName = dr[FIELD_PROJECT_CURRENCY_NAME].ToString(),
CreatedBy = Convert.ToInt32(dr[FIELD_CREATED_BY]),
CreatedOn = Convert.ToDateTime(dr[FIELD_CREATED_ON]),
ModifiedBy = Convert.ToInt32(dr[FIELD_MODIFIED_BY]),
ModifiedOn = Convert.ToDateTime(dr[FIELD_MODIFIED_ON]),
ProjectCurrencyValue = dr[FIELD_PROJECT_CURRENCY_VALUE].ToString(),
IsActive = Convert.ToBoolean(dr[FIELD_IS_ACTIVE])
});
}
projectCurrency.Insert(0, new ProjectCurrency());
grvCurrency.DataSource = projectCurrency;
grvCurrency.DataBind();
}

Add the following script for the same.

$(function() {
$("[id*=ddlCurrency]").change(function() {
var ddy = $(this).find('option').filter(':selected').text();
// ddy = ddy.substr(ddy.indexOf("-") + 1);
var row = $(this).closest("tr");
$("[id*=txtProjectCurrencyName]", row).val(ddy);
});
});

Here, we are triggering change event of controls which are having name ending with ddlCurrency

i.e.

$("[id*=ddlCurrency]")

.change

Afte this, we are finding the selected value of dropdown list i.e.

var ddy = $(this).find('option').filter(':selected').text();

Now, we are trying to get closest tr of that control.

After this, we are fetching control whose name is ending with txtProjectCurrencyName of that row

i.e.

$("[id*=txtProjectCurrencyName]",row)

And finally, we are assigning value to the textbox i.e. $

("[id*=txtProjectCurrencyName]",row).val(ddy);

Now, we want to validate values of controls of a row on click of button

In the above Grid, we have taken link button as lnkAdd.

Now, in script, use the below code.

$(function() {
$("[id*=grvCurrency] [id*=lnkAdd]").click(function() {
//Find the GridView Row using the LinkButton reference.
var row = $(this).closest("tr");
//Find the TextBox control.
var txtPrjCurrencyName = row.find("[id*=txtProjectCurrencyName]");
var txtCurrencyValue = row.find("[id*=txtCurrencyValue]");
var ddlCurrency = row.find("[id*=ddlCurrency]");
var message = "";
if (ddlCurrency.val().trim() === "---Select Currency ---") {
message += "Please select Currency.";
}
if ($.trim(txtPrjCurrencyName.val().trim()) === "") {
message += "Please enter Name.\n";
}
if ($.trim(txtCurrencyValue.val().trim()) === "" || $.trim(txtCurrencyValue.val()) === '0') {
message += "Please enter value.\n";
}
//Display error message.
if (message !== "") {
alert(message);
return false;
}
return true;
});
});

Now, here we are triggering click event of controls which are having names ending with lnkAdd i.e.

$("[id*= lnkAdd]")

After this, we are fetching closet row of the control.

click i.e. $(this).closest("tr");

Now, we are trying to fetch controls present in that row by their name.

row.find("[id*=txtProjectCurrencyName]");

And after that, we are putting validation for specific control.

if (ddlCurrency.val().trim() === "---Select Currency ---")
{
message += "Please select Currency.";
}