Redirect on Enter in WebNumericEditor (JS Guide)

Cornuau Olivier asked on May 29, 2012 2:35 PM

Hello,

How
to redirect to a Javascript function when the Enter key is used in a field of type WebNumericEditor? For
example, the JavaScript function is used to trigger another action in the form of the page …

Thank you for your answers

Replies

0

[Infragistics] Michael H. answered on May 16, 2012 3:05 PM

Hello ocornuau,

You can use the javascript event handler for onkeydown to check for this. The code sample below demonstrates how to do this:

Place this in the <head> tags:

    function doKeyDown() {
        if (event.keyCode == 13)
            alert("You pressed enter.");
    }

And use this property for your WebNumericEditor:

<ig:WebNumericEditor onkeydown="javascript:doKeyDown();">
</ig:WebNumericEditor>

Please let me know if you need further assistance with this issue and I'll be glad to help.
- 0
  
  Cornuau Olivier answered on May 21, 2012 9:35 AM
  
  Hello,
  
  Thank you for your response. After that I encounter another problem. Indeed, I enter a value in the field txtStartField, it is automatically copied into the field txtEndField and when I post the form to validate the use of the Enter key in the field txtStartField, the value field txtEndField returned the server side is still empty! Why??
  
  …
  
  <script language=javascript>
  
  //Copies the value in the field in the field txtStartField txtEndField
  function copyValue() {
  var ctrlSrc = window.$get('<%=txtStartField.ClientID%>');
  var ctrlDst = window.$get('<%=txtEndField.ClientID%>');
  
  ctrlDst.value = ctrlSrc.value;
  }
  
  //Required if the field does not format properly txtEndField value copied !
  function activeEndField() {
      var ctrlDst = window.$get('<%=txtEndField.ClientID%>');
  
      ctrlDst.focus();
      ctrlDst.blur();
  }
  
  //Post the form after the Enter key was used in one of two fields WebNumericEditor
  function postForm(){
  var button = ig_getWebControlById("<%=wibSearch.ClientID %>");
  
     if (event.keyCode == 13)
        if (button != null)
           button.click();
  }
  
  </script>
  …
  
  …
  
      <ig:WebNumericEditor NullText="" ClientEvents-Blur="activeEndField" ClientEvents-TextChanged="copyValue"
          DataMode="Decimal" ID="txtStartField" runat="server" Width="100px" MaxLength="16" MinDecimalPlaces="0" MaxDecimalPlaces="2" onkeyDown="BLOCKED SCRIPTpostForm();">
      </ig:WebNumericEditor>
  
      <ig:WebNumericEditor NullText="" ID="txtEndField" runat="server" Width="100px" DataMode="Decimal" MaxLength="16" MinDecimalPlaces="0" MaxDecimalPlaces="2" >
      </ig:WebNumericEditor>
  
      <br>
  
      <igtxt:WebImageButton ID="wibSearch" runat="server" Text="OK" SkinID="BoutonRechercher" OnClick="wibSearch_Click" Width="100px">
      </igtxt:WebImageButton>
  
  ….
  
  
  
  c# :
  
      protected void wibSearch_Click(object sender, Infragistics.WebUI.WebDataInput.ButtonEventArgs e)
      {
  
          string a1 = txtStartField.Text;// is ok !
          decimal a2 = Convert.ToDecimal(txtStartField.Value); //is ok
  
          string a2 = txtEndField.Text; //is null or empty ????
          decimal b2 = Convert.ToDecimal(txtEndField.Value); //is null ????
      }
  
  Why no value is returned when the field txtStartField is filled ?
  
  cordially
  - 0
    
    Cornuau Olivier answered on May 21, 2012 9:40 AM
    
    Oups….
    
    An error has crept into my last question … it should read:
    
    Why no value is returned when the field txtEndField is filled ?
  - 0
    
    [Infragistics] Michael H. answered on May 21, 2012 6:05 PM
    Hello ocornuau,
    
    I followed the steps you suggested and was unable to reproduce the behavior you’re describing. I added your markup and code to my project. I made a slight change to my C# code because the a2 variable is already used. Then I ran the page, filled in a random number in the txtStartTime, then filled in the txtEndTime and pressed the button. I had a breakpoint in wibSearch_Click() and I checked if the correct values were returned and they were.
    
    I have attached the sample project I used to test this. Please test this project on your PC; whether or not it works correctly may help indicate the nature of this problem.
    
    If the project does not work correctly, this indicates either a problem possibly specific to your environment, or a difference in the DLL versions we are using. My test was performed using version 11.2.20112.2086 in NetAdvantage for ASP.NET 2011 Volume 2.
    
    If the project does show the product feature working correctly, this indicates a possible problem in the code of your application. It will help if you can provide a small, isolated sample application that demonstrates the behavior you are seeing.
    
    Or, if this sample project is not an accurate demonstration of what you’re trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
    
    Please let me know if I can provide any further assistance.
    
    Attachments:
    
    WNE_JSEnterRedirect.zip
  - 0
    
    Cornuau Olivier answered on May 22, 2012 7:14 AM
    
    Hello,
    
    The met slows down the rendering does not occur when a valid form by clicking the 'OK' button but if:
    
    1) You enter a value in the 'txtStartField',
    2) the field 'txtEndField is completed automatically,
    3) You submit the form using the 'Enter' key in the 'txtStartField'
    
    Result = field 'txtEndField' returns nothing!?
    
    CAUTION:
    Do not click on 'OK' but validate the form using the Enter key in the 'txtStartField'! Obviously using the 'OK' button the form returns the value contained much in the 'txtEndField', BUT, if you submit the form by giving the focus to 'txtStartField' cause then you re-mailing via the input of key 'Enter' txtEndField the field contains nothing!!
    
    Do you understand me?
    
    cordially
  - 0
    
    [Infragistics] Michael H. answered on May 22, 2012 8:42 PM
    
    Hi ocornuau,
    
    Thank you for the clarification. I recommend using the following code for your copyValue() function:
    
    function copyValue() {
        var ctrlSrc = $find("<%=txtStartField.ClientID%>");
        var ctrlDst = $find("<%=txtEndField.ClientID%>");
    
        ctrlDst.set_value(ctrlSrc.get_value());
    }
    
    This provides direct access to our component and allows more functionality. Please see our following documentation for more information on what you can access:
    
    http://help.infragistics.com/NetAdvantage/ASPNET/2011.2/CLR4.0/?page=WebTextEditor~Infragistics.Web.UI.WebNumericEditor_members.html
    
    This should also cause the formatting to update properly, so you should be able to remove the activeEndField() event also.
    
    Please let me know if you have any further questions or concerns with this issue and I'll be glad to help.
  - 0
    
    [Infragistics] Michael H. answered on May 29, 2012 2:35 PM
    
    Hello ocornuau,
    
    Please let me know if you need further assistance with this issue.