Tuesday, July 21, 2009

Clicking AutoCompleteExtender scrollbar causes postback

Clicking the AutoCompleteExtender scrollbar causes postback when attached to a TextBox where AutoPostBack="true", below is a workaround to resolve issue.

Workaround is just to check whether focus is on extender popup. If focus is on extender do not sumit (postback) form.

See example below

<script language=javascript>
function checkFocusOnExtender()
{
//check if focus is on productcode extender
if ( $find('aceProductCode')._flyoutHasFocus )
return false;
}
</script>


<form id="form1" runat="server" onsubmit="return checkFocusOnExtender();">

<asp:TextBox ID="txtProductCode" runat="server" CssClass="textbox" AutoCompleteType="disabled"
AutoPostBack="true" OnTextChanged="txtProductCode_TextChanged"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="aceProductCode" runat="server" TargetControlID="txtProductCode"
UseContextKey="true" ServiceMethod="GetProductCode" CompletionInterval="10" EnableCaching="true"
CompletionSetCount="100" MinimumPrefixLength="1" DelimiterCharacters=";, :" CompletionListCssClass="autocomplete_completionListElement"
CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"">
</ajaxToolkit:AutoCompleteExtender>

</form>



5 comments:

  1. Great solution.

    I changed the if statement in the Javascript to include an else statement which returns true.

    This allows the postback to still occur when a list item is selected.

    -------------

    if ($find('ResAC')._flyoutHasFocus)
    return false;
    else
    return true;

    ReplyDelete
  2. how to achive this for textbox & autocompleteextender inside GRidview item template . control & grid created dynamicall?

    ReplyDelete
  3. Wow!! Great solution. Save me a ton of time. Thanks.

    ReplyDelete
  4. Good solution.

    How to achieve this for text box & autocompleteextender inside a GRidView item template?

    ReplyDelete