Question

I’ve feature to implement which is when user in the GridView footer and press on Enter key the row will be inserted. In the GridView I have 2 <asp:ImageButton> one in <EmptyDataTemplate> and the other in <FooterTemplate> I wrote JavaScript to execute the ImageButton Click event when use is in the last field, the ImageButton Server-Side Click event fired but the page is not updated.

Here is JavaScrip function:

 function insertByEnterKey(buttonId) {
        var button = document.getElementById(buttonId);
        var keyEvent = event.keyCode;

        if (keyEvent == 13) {
            button.click();

        }
    }

Here is the ASPX:

<asp:UpdatePanel ID="UpdatePanel" runat="server">
        <ContentTemplate>
            ...
            <asp:GridView ID="grvDonationDist" runat="server" AutoGenerateColumns="False" ShowFooter="True"
                DataKeyNames="reciept_num,donation_code" meta:resourcekey="grvDonationDistResource1"
                ShowHeaderWhenEmpty="True" BorderWidth="1px" BackColor="White" BorderColor="LightSteelBlue"
                CellPadding="0" Font-Name="tahoma" Font-Size="10pt" ForeColor="DarkBlue" HeaderStyle-BackColor="#aaaadd"
                GridLines="None">
                <EmptyDataTemplate>
                    <asp:Label CssClass="label" ID="lblEmptyDonationDist" runat="server" Text="No Donations"
                        meta:resourcekey="lblEmptyDonationDistResource1"></asp:Label>
                    <tr>
                        <td>
                            <asp:ImageButton ID="lbtnAdd" runat="server" OnClick="lbtnAdd_Click" meta:resourcekey="AddResource1"
                                ImageUrl="Content/images/add.png"></asp:ImageButton>
                        </td>
                        ...
                        <td>
                            <asp:TextBox ID="txtDonationNotesFooter" CssClass="textbox" runat="server" meta:resourcekey="txtDonationNotesResource1"
                                onKeyDown="insertByEnterKey('lbtnAdd');"></asp:TextBox>
                        </td>
                    </tr>
                </EmptyDataTemplate>
                <Columns>
                    <asp:TemplateField FooterText="Total" ShowHeader="False">
                        <EditItemTemplate>
                          ...
                        </EditItemTemplate>
                        <ItemTemplate>
                            ...
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:ImageButton ID="lbtnAdd" runat="server" OnClick="lbtnAddFromFooter_Click" meta:resourcekey="AddResource1"
                                ImageUrl="Content/images/add.png"></asp:ImageButton>
                        </FooterTemplate>
                    </asp:TemplateField>
                  ...
                    <asp:TemplateField HeaderText="Notes" SortExpression="distribution_remrks" meta:resourcekey="TemplateFieldResource3">
                        <EditItemTemplate>
                            ...
                        </EditItemTemplate>
                        <ItemTemplate>
                           ...
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtDonationNotesFooter" CssClass="textbox" runat="server" meta:resourcekey="txtDonationNotesResource1"
                                onKeyDown="insertByEnterKey('lbtnAdd');"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateField>                  
                </Columns>
            </asp:GridView>
      </ContentTemplate>
</asp:UpdatePanel>

Here is VB.NET:

Protected Sub lbtnAddFromFooter_Click(sender As Object, e As EventArgs)
    'Footer Add
    'Add Insert Logic here
    Try

        Dim donationDist As New DonationDist

        Dim txtDonationValueFooter As TextBox = grvDonationDist.FooterRow.FindControl("txtDonationValueFooter")
        Dim txtDonationNotesFooter As TextBox = grvDonationDist.FooterRow.FindControl("txtDonationNotesFooter")
        Dim ddlCountryFooter As DropDownList = grvDonationDist.FooterRow.FindControl("ddlCountryFooter")
        Dim ddlPurposeFooter As DropDownList = grvDonationDist.FooterRow.FindControl("ddlNewDonationPurposeType")
        Dim chkPartial As CheckBox = grvDonationDist.FooterRow.FindControl("chkPartialFooter")
        Dim standInstruct As Label = grvDonationDist.FooterRow.FindControl("lblStandInstructFooter")
        Dim donationValue As Decimal = Convert.ToDecimal(txtDonationValueFooter.Text)

        'Validation: Donation Value must be > 0
        If (donationValue <= 0) Then

            If (CultureInfo.CurrentUICulture.Name.Contains("ar")) Then

                ShowAlert("قيمة الترع يجب ان تكون أكبر من الصفر")

            ElseIf (CultureInfo.CurrentUICulture.Name.Contains("en")) Then

                ShowAlert("Donation Value must be greater than 0")

            End If

            Exit Sub

        End If

        myDonationDistDataTable = Session("myDonationDistDataTable")

        'Validation: Only one donation type per Receipt
        For Each row As DataRow In myDonationDistDataTable.Rows

            If (row.Item("donation_code") = ddlPurposeFooter.SelectedValue) Then

                If (CultureInfo.CurrentUICulture.Name.Contains("ar")) Then

                    ShowAlert("لا يمكن تكرار الغرض في نفس سند القبض")

                ElseIf (CultureInfo.CurrentUICulture.Name.Contains("en")) Then

                    ShowAlert("You cannot add more than on Donation Type per receipt")

                End If

                Exit Sub
            End If

        Next



        myDonationDistDataRow = myDonationDistDataTable.NewRow()
        myDonationDistDataRow("reciept_num") = 0
        myDonationDistDataRow("donation_code") = Convert.ToInt16(ddlPurposeFooter.SelectedValue)
        myDonationDistDataRow("donation_name") = ddlPurposeFooter.SelectedItem.Text
        myDonationDistDataRow("donation_value") = Convert.ToDecimal(txtDonationValueFooter.Text)
        myDonationDistDataRow("country_code") = Convert.ToInt16(ddlCountryFooter.SelectedValue)
        myDonationDistDataRow("country_name") = ddlCountryFooter.SelectedItem.Text
        myDonationDistDataRow("distribution_remrks") = txtDonationNotesFooter.Text
        myDonationDistDataRow("partial") = chkPartial.Checked
        myDonationDistDataRow("standing_inst_num") = If(String.IsNullOrWhiteSpace(standInstruct.Text), 0, Convert.ToInt32(standInstruct.Text))

        'add the new DataRow to DataTable's Row
        myDonationDistDataTable.Rows.Add(myDonationDistDataRow)

        Session("myDonationDistDataTable") = myDonationDistDataTable

        grvDonationDist.DataSource = myDonationDistDataTable
        grvDonationDist.DataBind()

    Catch ex As Exception
         'TODO: Log the exception
    End Try
End Sub

What is wrong with this code? Am I missing something?

Answer 1

I solve it just by add return false after the insertByEnterKey() function

onKeyDown="insertByEnterKey('lbtnAdd'); return false;"

Even better solution:

Make the JavaScript Function return False when the user press “Enter Key” otherwise return True.

function insertByEnterKey(buttonId) {
            var button = document.getElementById(buttonId);
            var keyEvent = event.keyCode;

            if (keyEvent == 13) {
                button.click();
                return false;
            } else {
                return true;
            }
        }

and use it in the Textbox like this:

<asp:TextBox ID="txtDonationNotesFooter" runat="server" onKeyDown="return insertByEnterKey('lbtnAdd');"></asp:TextBox>