Friday, July 27, 2012

How to show aspxpopup control on button click instead of enter key press

Steps:
====
1. I have two textboxes  and one button and one aspxpopupcontrol in a aspxwebpage
 2. I attached  Keypress event for two textboxes and i have attached button OnClientClick event from C# code behind to show aspxpopupcontrol.
3. Here problem is when ever i enter some data in any one of the text and press enter it is executing textbox keypress event as well as it showing aspxpopupcontrol. it very annoying to the user.
4. I resolved this issue by using the following devexpress client side method  in textbox keypress event.
                       ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);

 Example:
========

  <dx:ASPxTextBox runat="server" ID="txtSearch" ClientInstanceName="txtSearch" NullText="Search by Text"  Style="border-radius: 4px 4px 4px 4px;">
  <ClientSideEvents  KeyPress="function(s,e){ 
                                                                var keypressed=ASPxClientUtils.GetKeyCode(e.htmlEvent);
                                                                if(keypressed ==13)
                                                                  {
                                                                        //Your client side functionality goes here
                                                                        ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);
                                                                  }}" />
  </dx:ASPxTextBox>

<dx:ASPxTextBox runat="server" ID="txtTagSearch" ClientInstanceName="txtTagSearch" NullText="Search by Tag"  Style="border-radius: 4px 4px 4px 4px;">
  <ClientSideEvents  KeyPress="function(s,e){ 
                                                                var keypressed=ASPxClientUtils.GetKeyCode(e.htmlEvent);
                                                                if(keypressed ==13)
                                                                  {
                                                                        //Your client side functionality goes here
                                                                        ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);
                                                                  }}" />
  </dx:ASPxTextBox>

 <asp:ImageButton ID="btnShowCustomViewBuilder" CausesValidation="true" runat="server" ImageUrl="~/Styles/Images/FilterIcon.png"
                                                         OnClientClick=" popup.Show();  return false"    />

<dx:ASPxPopupControl ID="AspxPopupControl1" runat="server" Modal="True" AutoUpdatePosition="true" HeaderStyle-Font-Bold="true"
    PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" AllowDragging="true" AccessibilityCompliant="false" 
    ShowLoadingPanel="false" HeaderText="Example Popup" ClientInstanceName="popup"  PopupAction="LeftMouseClick" 
    Width="520px">
    <ContentCollection>
        <dx:PopupControlContentControl ID="PopupControlContentControl3" runat="server" SupportsDisabledAttribute="True">

<table>
<tr>
<td> //Your content goes here  </td>
</tr>
</table>

  </dx:PopupControlContentControl>
    </ContentCollection>
</dx:ASPxPopupControl>


Reference to resolve above issue

Please let me know if you have any doubts on this.

No comments:

Post a Comment