manipulating asp grid view text box data using jquery

Question

User364607740 posted

I have a jquery function which need to be implemented in asp.net grid view. In each row there will be two text boxes, where each row text box has different value according to the user input. The value of second text box depends upon the value of first text box entered by the user which is calculated using jquery function. And every row will have different user input in the first text box.

<asp:GridView ID="GridCustomer"
runat="server"
AutoGenerateColumns="false">
<Columns>
	<asp:TemplateField HeaderText="S No." ItemStyle-Width="8%">
		<ItemTemplate>
			<%#Container.DataItemIndex+1 %>
		</ItemTemplate>
	</asp:TemplateField>                                     
	</asp:TemplateField>
	<asp:TemplateField HeaderText="Reader Date">
		<ItemTemplate>
		   <input type="text" runat="server" id="nepaliDate9" class="nepaliDate9" placeholder="YYYY-MM-DD"/>
		   <input type="text" runat="server" id="englishDate9" readonly="true" class="englishDate9"/>
		</ItemTemplate>
	</asp:TemplateField>
</Columns>
</asp:GridView>

My jquery ::

$(".englishDate9").change(function () {
	$(".nepaliDate9").val(AD2BS($(this).val()));
});

$(".nepaliDate9").change(function () {
	$(".englishDate9").val(BS2AD($(this).val()));
});

the problem with this approach is that whenever I change the value of the first text box in any cell, the value of second text box changes in every row. I think I need to retrieve value of each row, but I do not know how to do this?

Answer 1

User-943250815 posted

Your changes are based on class not ID.

Due to nature of Gridview, each control inside is rendered with a generated ID, you did not show how you binding data to gridview, but assuming you binding on code-behind
My suggestion is a small change on your Gridview and use RowDataBound to set onChange event pointing to 2 distinct JS functions
Here is your griview using TextBox control instead of Input, at the end TextBox render as Input.

<asp:GridView ID="GridCustomer" runat="server" AutoGenerateColumns="false">
  <Columns>
    <asp:TemplateField HeaderText="S No." ItemStyle-Width="8%">
      <ItemTemplate><%#Container.DataItemIndex+1 %></ItemTemplate>
    </asp:TemplateField>                                     
    <asp:TemplateField HeaderText="Reader Date">
      <ItemTemplate>
        <asp:TextBox ID="nepaliDate9" runat="server" class="nepaliDate9" placeholder="YYYY-MM-DD" Text='<%# Eval("nepaliDate9") %>' ></asp:TextBox>
        <asp:TextBox ID="englishDate9" runat="server" class="englishDate9" readonly="true" Text='<%# Eval("englishDate9") %>' ></asp:TextBox>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

With help of Gridview.rowDatabound event, add "OnChange" attribute to each TextBox and point to Javascript Function

protected void GridCustome_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        TextBox zTbx1 = e.Row.Cells(4).FindControl("englishDate9");
        TextBox zTbx2 = e.Row.Cells(4).FindControl("nepaliDate9");
        zTbx1.Attributes.Add("onchange", "englidshTonepal('" + zTbx2.ClientID + "')"); // Set onchange and js function
        zTbx2.Attributes.Add("onchange", "nepalToenglish('" + zTbx1.ClientID + "')");  // set onchange and js function
    }
}

Then on Javascript, make your changes on Textbox using ID

function englidshTonepal(tBoxID) {
  //$("#" + tboxID).val(AD2BS($(this).val()));
  alert(tBoxID);
}

function nepalToenglish(tBoxID) {
  //$("#" + tboxID).val(BS2AD($(this).val()));
  alert(tBoxID);
}

Answer 2

User-2054057000 posted

You should use jQuery Siblings method here.

$(".englishDate9").change(function () {
	$(this).siblings(".nepaliDate9").val(AD2BS($(this).val()));
});

$(".nepaliDate9").change(function () {
	$(this).siblings(".englishDate9").val(BS2AD($(this).val()));
});

Answer 3

User-939850651 posted

Hi, scala_1988

If a suitable selector is used, it can also be implemented. I think jQuery find maybe can help you.

Please refer to the following simple example:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="ID">
                        <ItemTemplate>
                            <asp:Label runat="server" Text='<%#Eval("id") %>' Width="100" Align="center"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Reader Date">
                        <ItemTemplate>
                            <input type="text" runat="server" id="nepaliDate9" class="nepaliDate9" placeholder="YYYY-MM-DD" />
                            <input type="text" runat="server" id="englishDate9" class="englishDate9" readonly="readonly" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

$('input[id*=nepaliDate9]').change(function () {
                $(this).val("input222");
                $(this).closest('tr').find("input:last").val("input333");
            });

Result:

Best regards,

Xudong Peng