ASP WebForms AutoCompleteExtender in GridView not firing - asp.net

Question

I have this webform with 3 AutoCompleteExtenders using the AjaxControlToolkit. The first one deals with customers from a database and that works very well. I have place 2 others in a gridview, AutoCompleteExtenders 2 and 3 to fetch items. For some reason, these do not work and a breakpoint in Items.asmx does not reach when running the code. I have setup these 2 extenders same as the customer one.
What am I doing wrong? I have searched articles online on use in gridviews but am unable to find the issue.
I have
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
in the masterpage.
Code in webform:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PipemanWebPortal.Views.PurchaseOrders.Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Add Purchase Order</h2>
<script type="text/javascript">
$(document).ready(function () {
window.setTimeout(function () {
$(".alert").fadeTo(1500, 0).slideUp(500, function () {
$(this).remove();
});
}, 3000);
});
// On Page Load
$(function () {
SetDatePicker();
});
// On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
SetDatePicker();
$(".datepicker-orient-bottom").hide();
}
});
};
function SetDatePicker() {
$('#datetimepicker').datepicker
({
format: 'dd.MM.yyyy',
inline: true,
todayHighlight: true,
autoclose: true
});
}
</script>
<div runat="server" visible="false" id="AlertDanger" class="alert alert-danger">
×
<strong>You must choose a date</strong>
</div>
<div runat="server" visible="false" id="AlertSuccess" class="alert alert-success">
×
<strong>Purchase requisition saved successfully</strong>
</div>
<asp:Panel ID="PODetails" runat="server">
<div>
<asp:UpdatePanel ID="UpdatePanelPO" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" BackColor="#E6E6E6">
<fieldset class="form-horizontal">
<div class="row">
<div class="form-group col-sm-6">
<asp:Label runat="server" CssClass="col-sm-6 control-label">Required Date</asp:Label>
<div class="col-sm-6">
<div class="input-group date" id="datetimepicker">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<asp:TextBox ID="txtRequiredDate" runat="server" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtRequiredDate" Display="Dynamic"
CssClass="text-danger" ErrorMessage="The Required Date field is required." />
</div>
</div>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" CssClass="col-sm-6 control-label">No.</asp:Label>
<div class="col-sm-6">
<asp:Label ID="lblDocNum" runat="server" CssClass="form-control"></asp:Label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-horizontal">
<div class="row">
<div class="form-group col-sm-6">
<asp:Label runat="server" CssClass="col-sm-6 control-label" class="">Cust. PO No.</asp:Label>
<div class="col-sm-6">
<div class="input-group">
<asp:TextBox ID="txtPurchaseOrderNo" runat="server" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtPurchaseOrderNo" Display="Dynamic"
CssClass="text-danger" ErrorMessage="The Cust. Purchase Order No field is required." />
</div>
</div>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" CssClass="col-sm-6 control-label">Contact</asp:Label>
<div class="col-sm-6">
<div class="input-group">
<asp:TextBox ID="txtContact" runat="server" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtContact" Display="Dynamic"
CssClass="text-danger" ErrorMessage="The Contact field is required." />
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-horizontal">
<div class="row">
<div class="form-group col-sm-3">
<asp:Label runat="server" CssClass="col-sm-12 control-label" class="">Customer Name</asp:Label>
</div>
<div class="form-group col-sm-9">
<asp:TextBox ID="txtCustomer" runat="server" CssClass="form-control"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender
ID="AutoCompleteExtender1"
runat="server"
TargetControlID="txtCustomer"
ServicePath="../../Web_Service/Customers.asmx"
ServiceMethod="GetCustomers"
MinimumPrefixLength="2"
EnableCaching="true"
CompletionSetCount="10"
CompletionInterval="10"
DelimiterCharacters=";, :"
ShowOnlyCurrentWordInCompletionListItem="true">
</ajaxToolkit:AutoCompleteExtender>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtCustomer" Display="Dynamic"
CssClass="text-danger" ErrorMessage="The Customer field is required." />
</div>
</div>
</div>
</fieldset>
</asp:Panel>
<asp:GridView ID="pOGridView"
runat="server"
AutoGenerateColumns="False"
AllowPaging="True"
AllowSorting="True"
ShowFooter="True"
OnRowEditing="pOGridView_RowEditing"
OnRowUpdating="pOGridView_RowUpdating"
OnPageIndexChanging="pOGridView_PageIndexChanging"
OnRowCancelingEdit="pOGridView_RowCancelingEdit"
PagerStyle-CssClass="bs-pagination"
ShowHeaderWhenEmpty="True"
EmptyDataText="No Records Found"
CssClass="table table-striped table-bordered table-hover table-condensed">
<Columns>
<asp:TemplateField ItemStyle-Width="30px" HeaderText="#">
<ItemTemplate>
<asp:Label ID="lblLineNum" Text='<%# Container.DataItemIndex + 1 %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="120px" HeaderText="Item">
<ItemTemplate>
<asp:Label ID="lblItem" runat="server"
Text='<%# Bind("Item")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtItem" runat="server" Width="300px" Text='<%# Bind("Item")%>'></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender
ID="AutoCompleteExtender2"
runat="server"
TargetControlID="txtItem"
ServicePath="../../Web_Service/Items.asmx"
ServiceMethod="GetItems"
MinimumPrefixLength="2"
EnableCaching="true"
CompletionSetCount="10"
CompletionInterval="10"
DelimiterCharacters=";, :"
ShowOnlyCurrentWordInCompletionListItem="true">
</ajaxToolkit:AutoCompleteExtender>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtItem" Display="Dynamic" ValidationGroup="Edit"
CssClass="text-danger" ErrorMessage="The Item field is required." />
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtItem" runat="server" Width="300px"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender
ID="AutoCompleteExtender3"
runat="server"
TargetControlID="txtItem"
ServicePath="../../Web_Service/Items.asmx"
ServiceMethod="GetItems"
MinimumPrefixLength="2"
EnableCaching="true"
CompletionSetCount="10"
CompletionInterval="10"
DelimiterCharacters=";, :"
ShowOnlyCurrentWordInCompletionListItem="true">
</ajaxToolkit:AutoCompleteExtender>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtItem" Display="Dynamic" ValidationGroup="Insert"
CssClass="text-danger" InitialValue="-1" ErrorMessage="The Item field is required." />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="60px" HeaderText="Qty.">
<ItemTemplate>
<asp:Label ID="lblQuantity" runat="server"
Text='<%# Bind("Quantity")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server" Width="100px"
Text='<%# Bind("Quantity")%>'></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtQuantity" Display="Dynamic" ValidationGroup="Edit"
CssClass="text-danger" ErrorMessage="The Quantity field is required." />
<asp:RegularExpressionValidator ControlToValidate="txtQuantity" runat="server" CssClass="text-danger" Display="Dynamic"
ErrorMessage="Only integers allowed." ValidationExpression="^(0|[1-9]\d*)$"
ValidationGroup="Edit"></asp:RegularExpressionValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtQuantity" runat="server" Width="100px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtQuantity" Display="Dynamic" ValidationGroup="Insert"
CssClass="text-danger" ErrorMessage="The Quantity field is required." />
<asp:RegularExpressionValidator ControlToValidate="txtQuantity" runat="server" CssClass="text-danger" Display="Dynamic"
ErrorMessage="Only integers allowed." ValidationExpression="^(0|[1-9]\d*)$"
ValidationGroup="Insert"></asp:RegularExpressionValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="80px" HeaderText="Unit Price">
<ItemTemplate>
<asp:Label ID="lblUnitPrice" runat="server"
Text='<%# Bind("UnitPrice")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtUnitPrice" runat="server" Width="100px"
Text='<%# Bind("UnitPrice")%>'></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtUnitPrice" Display="Dynamic" ValidationGroup="Edit"
CssClass="text-danger" ErrorMessage="The Unit Price is required." />
<asp:RegularExpressionValidator ControlToValidate="txtUnitPrice" runat="server" CssClass="text-danger" Display="Dynamic"
ErrorMessage="Only numbers allowed." ValidationExpression="^[0-9]{0,6}(\.[0-9]{1,2})?$"
ValidationGroup="Edit"></asp:RegularExpressionValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtUnitPrice" runat="server" Width="100px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtUnitPrice" Display="Dynamic" ValidationGroup="Insert"
CssClass="text-danger" ErrorMessage="The Unit Price is required." />
<asp:RegularExpressionValidator ControlToValidate="txtUnitPrice" runat="server" CssClass="text-danger" Display="Dynamic"
ErrorMessage="Only numbers allowed." ValidationExpression="^[0-9]{0,6}(\.[0-9]{1,2})?$"
ValidationGroup="Insert"></asp:RegularExpressionValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="80px" HeaderText="Order Price">
<ItemTemplate>
<asp:Label ID="lblOrderPrice" runat="server"
Text='<%# Bind("OrderPrice")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtOrderPrice" runat="server" Width="100px"
Text='<%# Bind("OrderPrice")%>'></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtOrderPrice" Display="Dynamic" ValidationGroup="Edit"
CssClass="text-danger" ErrorMessage="The Order Price is required." />
<asp:RegularExpressionValidator ControlToValidate="txtOrderPrice" runat="server" CssClass="text-danger" Display="Dynamic"
ErrorMessage="Only numbers allowed." ValidationExpression="^[0-9]{0,6}(\.[0-9]{1,2})?$"
ValidationGroup="Edit"></asp:RegularExpressionValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtOrderPrice" runat="server" Width="100px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtUnitPrice" Display="Dynamic" ValidationGroup="Insert"
CssClass="text-danger" ErrorMessage="The Order Price is required." />
<asp:RegularExpressionValidator ControlToValidate="txtOrderPrice" runat="server" CssClass="text-danger" Display="Dynamic"
ErrorMessage="Only numbers allowed." ValidationExpression="^[0-9]{0,6}(\.[0-9]{1,2})?$"
ValidationGroup="Insert"></asp:RegularExpressionValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" ValidationGroup="Edit" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkRemove" runat="server"
CommandArgument='<%# Bind("LineNum")%>'
OnClientClick="return confirm('Are you sure you want to delete this row?')"
Text="Delete" OnClick="DeleteRowPurchaseOrder"></asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Button ID="btnAdd" runat="server" Text="Add" ValidationGroup="Insert" CssClass="btn btn-primary btn-sm"
OnClick="AddRowPurchaseOrder" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div class="form-group">
<div class="row">
<div class="col-sm-3">
<asp:Button runat="server" ID="InsertButton" OnClick="Insert" Text="Insert" CssClass="btn btn-block btn-primary" />
</div>
<div class="col-sm-3">
<asp:Button runat="server" ID="CancelButton" OnClick="Cancel" Text="Cancel" CausesValidation="false" CssClass="btn btn-block btn-default" />
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Panel>
</asp:Content>

Answer 1

Looks like the other two AutoCompleteExtender are on two different <asp:Panel>, try put on same Panel,
<asp:Panel ID="Panel1" runat="server" BackColor="#E6E6E6">. that's probably the reason why the first one is working, and other two are not.