How to send GridView Row TextBox Value To Repeater TextBox fro same index using jQuery in ASP.Net

simflex

SOLVED CLOSED ACTIVE ANSWERED
User: simflex
Posted: on Jul 26, 2017 09:00 AM
Forum: Data Controls
Answer: 1
Views: 6918
Sample Code: Download

I am so sorry again for asking too many questions. I have been stuck since yesterday on these issues.

I have a couple of questions. Please tell me if I can ask two questions in one thread. If I can't then I can modify the question.

Different forums have different rules.

Thank you very much.

First issue, I have two textbox controls.

One is called txtboatregNum is inside a Gridview:

For simplicity, I will show just that control inside a gridview:

    <asp:MultiView ID="myMultiView" ActiveViewIndex="0" runat="server">
      <asp:View ID="view1" runat="server">
      <asp:GridView ID="Gridview1" Style="table-layout: fixed;" runat="server" ShowFooter="true"
        AutoGenerateColumns="false" onrowdatabound="Gridview1_RowDataBound" OnRowDeleting="Gridview1_RowDeleting">
        <Columns>
            <asp:BoundField DataField="RowNumber" Visible="false" HeaderText="Row Number" />
            <asp:TemplateField HeaderText="Aircraft Registration #:">
                <HeaderStyle HorizontalAlign="Left" />
                <ItemTemplate>
                    <asp:TextBox ID="txtboatregNum" runat="server" Style="width: 593px;" class="form-control" ></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
                <HeaderStyle Width="70" />
                <ItemStyle Width="70" />
                <ItemTemplate>
                    <asp:Button ID="BtnAdd" runat="server" Text="Add" OnClick="BtnAdd_Click" CssClass="grvDelButton" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:CommandField ShowDeleteButton="True">
                <ControlStyle CssClass="grvDelButton" />
            </asp:CommandField>
        </Columns>
       </asp:GridView>
      </asp:view>

The other control is called txtARegNo and is inside a Repeater control:

      <asp:Repeater ID="Repeater2" runat="server" OnItemDataBound="repeater_ItemDataBound">
        <ItemTemplate>
         <table style="width:100%;border: 1px solid black;">
             <tr>
              <td style="width:50%;border-collapse: collapse;border: 1px solid black;">
              <asp:TextBox ID="txtARegNo" style="width:270px;margin-left:195px;" runat="server"></asp:TextBox>
             </td>
           </tr>
        </table>
       </ItemTemplate>
      </asp:Repeater>
     </asp:View>
    </asp:MultiView>

When a user enters a value say 1234B into the txtboatRegNo in Gridview, how does that value automatically populate the txtARegNo that is inside a Repeater?

I tried the following script but it does nothing:

  <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
     <script type="text/javascript">
         $(function () {
             $('[id*=txtboatRegNo]').change(function () {
                 $('[id*=txtARegNo]').val(this.value);
             });
         });
 </script>

The other issue that I have been trying to resolve since yesterday is to be able to validate RadioButtonList inside a Repeater

The following RadioButtonList control has a Yes or No options. If user tries to continue to other page or try to submit without checking either Yes or No, we would like to raise an error that says, "Please choose either Yes or No.

      <asp:Repeater ID="Repeater2" runat="server" OnItemDataBound="repeater_ItemDataBound">
        <ItemTemplate>
         <table style="width:100%;border: 1px solid black;">
             <tr>
              <td style="width:50%;border-collapse: collapse;border: 1px solid black;">
                 Purchased:<asp:radiobuttonlist ID="rblPurchaseType" runat="server" RepeatDirection="Horizontal" TextAlign="Right" style="display:inline;">
                 <asp:ListItem Text="New" />
                 <asp:ListItem Text="Used" />
                </asp:RadioButtonList>
             </td>
           </tr>
        </table>
       </ItemTemplate>    
      </asp:Repeater>

Can you please help?

dharmend...

0 1

Reply
User: dharmendr
Replied: on Jul 26, 2017 09:07 AM
Report

Hi simflex,

Will you please let me know is your gridview and repeater contains single or multiple row.

If multiple row then for which row of gridview value should display in which row of repeater.

simflex

0 2

Reply
User: simflex
Replied: on Jul 26, 2017 10:01 AM
Modified: on Jul 26, 2017 10:02 AM
Report

H dharmendr,

Great question!

Both have multi row.

For instance, in Gridview, user can enter value txtboatRegNo for first row, then click Add New Row to add another row so s/he can enter another value.

Same with Repeater.

It also uses Add New to add another row.

So for instance, if user creates two rows of Gridview, then it will add in two rows of Repeater the values of txtARegNo. The value of txtboatRegNo is always going to be the same value for txtARegNo.

If this is too complicated, we can just do it for one row and the user will have to manually enter another row in Repeater.

I hope my explanation is clear.

Now, I think this makes it more complicated.

For the RadioButtonList, it is just in GridView and user can also click to add another row. So the validation will need to validate also for the additional row(s).

dharmend...

0 3

Reply
User: dharmendr
Replied: on Jul 26, 2017 10:07 AM
Report

Ok.

I will get back to you tomorrow.

simflex

0 4

Reply
User: simflex
Replied: on Jul 26, 2017 10:10 AM
Report

Ok, thank you.

dharmend...

0 5

Reply
ANSWER
User: dharmendr
Replied: on Jul 27, 2017 04:29 AM
Modified: on Jul 27, 2017 04:32 AM
Report

Hi simflex,

I have created sample as per your requirement.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $('[id*=txtboatregNum]').change(function () {
                var value = $(this).val();
                index = $(this).closest('tr').index();
                var tr = $('[id*=repeaterTable]').find('tr')[index - 1];
                $(tr).find("[id*=txtARegNo]").val(value);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="Gridview1" Style="table-layout: fixed;" runat="server" ShowFooter="true"
            AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="Row No" />
                <asp:TemplateField HeaderText="Aircraft Registration #:">
                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemTemplate>
                        <asp:TextBox ID="txtboatregNum" runat="server" class="form-control"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    <br />
    <div>
        <asp:Repeater ID="Repeater2" runat="server">
            <HeaderTemplate>
                <table id="repeaterTable" style="border: 1px solid black;">
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td style="width: 50px;">
                        <asp:Label Text='<%#Eval("ID") %>' runat="server" />
                    </td>
                    <td style="border-collapse: collapse; border: 1px solid black;">
                        <asp:TextBox ID="txtARegNo" class="form-control" runat="server"></asp:TextBox>
                    </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        Gridview1.DataSource = dt;
        Gridview1.DataBind();
        Repeater2.DataSource = dt;
        Repeater2.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
	If Not IsPostBack Then
		Dim dt As New DataTable()
		dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id", GetType(Integer)), New DataColumn("Name", GetType(String)), New DataColumn("Country", GetType(String))})
		dt.Rows.Add(1, "John Hammond", "United States")
		dt.Rows.Add(2, "Mudassar Khan", "India")
		dt.Rows.Add(3, "Suzanne Mathews", "France")
		dt.Rows.Add(4, "Robert Schidner", "Russia")
		Gridview1.DataSource = dt
		Gridview1.DataBind()
		Repeater2.DataSource = dt
		Repeater2.DataBind()
	End If
End Sub

Screenshot

How to send GridView Row TextBox Value To Repeater TextBox fro same index using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us