manipulating asp grid view text box data using jquery RSS

• • Reply
  scala_1988

  Member

  42 Points

  184 Posts

  manipulating asp grid view text box data using jquery

  Jun 12, 2020 08:32 AM|scala_1988|LINK

  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?

• • Reply
  jzero

  Participant

  1091 Points

  673 Posts

  Re: manipulating asp grid view text box data using jquery

  Jun 12, 2020 03:58 PM|jzero|LINK

  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);
  }

  
  
  
  

• • Reply
  yogyogi

  Participant

  1253 Points

  943 Posts

  Re: manipulating asp grid view text box data using jquery

  Jun 13, 2020 03:53 AM|yogyogi|LINK

  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()));
  });

  Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.
  ♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
• • Reply
  XuDong Peng

  Contributor

  2340 Points

  736 Posts

  Re: manipulating asp grid view text box data using jquery

  Jun 15, 2020 03:45 AM|XuDong Peng|LINK

  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

  ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >