locked
manipulating asp grid view text box data using jquery RRS feed

  • 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?

    Friday, June 12, 2020 8:32 AM

All replies

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




    Friday, June 12, 2020 3:58 PM
  • 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()));
    });

    Saturday, June 13, 2020 3:53 AM
  • 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

    Monday, June 15, 2020 3:45 AM