HOW TO Use the NumericUpDown Control

HOW TO Use the NumericUpDown Control 

Great help taken from 

http://www.asp.net/ajaxlibrary/HOW%20TO%20Use%20the%20NumericUpDown%20Control.ashx

NumericUpDown Demonstration

















NumericUpDown Description

NumericUpDown is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to add "up" and "down" buttons that increment and decrement the value in the TextBox. The increment and decrement can be simple +1/-1 arithmetic, they can cycle through a provided list of values (like the months of the year), or they can call a Web Service to determine the next value. Page authors can also provide custom images to be used instead of the default up/down button graphics.

Video - How Do I: Use the ASP.NET AJAX NumericUpDown Control?

NumericUpDown Client Code Sample

view plaincopy to clipboardprint?
  1. <script runat="server">  
  2.     [System.Web.Services.WebMethod]  
  3.     [System.Web.Script.Services.ScriptMethod]  
  4.     public static int GetDown(int current) {  
  5.         return current / 10;  
  6.     }  
  7.       
  8.     [System.Web.Services.WebMethod]  
  9.     [System.Web.Script.Services.ScriptMethod]  
  10.     public static int GetUp(int current) {  
  11.         return current * 10;  
  12.     }  
  13. </script>  
  14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  15.   
  16. <html xmlns="http://www.w3.org/1999/xhtml" >  
  17. <head runat="server">  
  18.     <title>Untitled Page</title>  
  19.     <style type="text/css">  
  20.     </style>  
  21.     <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script>      
  22.     <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script>  
  23.     <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script>  
  24. </head>  
  25. <body>  
  26.   
  27. <form id="form1" runat="server">  
  28. <asp:AjaxScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="false" />  
  29.   
  30.   
  31. <input id="updown1" type="text" value="0" style="width:85px" />      
  32. <br />  
  33. <input id="updown2" type="text" value="a" style="width:85px" />      
  34. <br />  
  35. <input id="updown3" type="text" value="50000" style="width:150px" />      
  36.   
  37. <script type="text/javascript">  
  38.     Sys.debug = true;  
  39.     Sys.require(Sys.components.upDown, function() {  
  40.         $("#updown1").upDown(-10, 10, 100);  
  41.         $("#updown2").upDown(-10, 10, 100, {  
  42.             RefValues: "a;b;c"  
  43.         });  
  44.         $("#updown3").upDown(null, null, 150, {  
  45.             ServiceDownMethod: "GetDown",  
  46.             ServiceUpMethod: "GetUp"  
  47.         });  
  48.     });  
  49. </script>  
  50.       
  51. </form>  
  52.       
  53. </body>  
  54. </html>  

NumericUpDown Client Reference

Sys.Extended.UI.NumericUpDownBehavior Class

  • Summary - The NumericUpDownBehavior control is used to add up and down buttons to any textbox.
  • Parameters - Sys.UI.DomElement element

Events

  • currentChanged(handler) - Add or removes an event handler for the currentChanged event.
    • Parameters - A function representing the event handler.

Methods

  • initialize() - Initializes the NumericUpDown control's behavior.
  • dipose() - Disposes the NumericUpDown control's behavior.
  • raiseCurrentChanged(Sys.EventArgs) - Raises the currentChanged event.
    • Parameters - A Sys.EventArgs object representing event arguments for the currentChanged event.
  • readValue() - Reads the value of the associated textbox.
  • setCurrentToTextBox(value) - Sets the value of the associated textbox.

Properties

  • Width - Gets or sets a number that specifies the combined size of the TextBox and Up/Down buttons. Minimum value 25.
    • Remarks - This property is not used if you provide custom buttons.
  • Tag - Gets or sets a string that specifies a custom parameter to pass to the Web Service.
  • TargetButtonUpID - Gets or sets a reference to a custom Up button.
  • TargetButtonDownID - Gets or sets a reference to a custom Down button.
  • ServiceUpPath - Gets or sets the path to a Web service that returns data used to get the next value.
    • Remarks - If the ServiceUpPath property is empty, a PageMethod will be used instead of a Web service.
  • ServiceUpMethod - Gets or sets the name of the method to call on the Web service (or the name of a PageMethod) to get the next value.
  • ServiceDownPath - Gets or sets the path to a Web service that returns data used to get the previous value.
    • Remarks - If the ServiceDownPath property is empty, a PageMethod will be used instead of a Web service.
  • ServiceDownMethod - Gets or sets the name of the method to call on the Web service (or the name of a PageMethod) to get the previous value.
  • RefValues - Gets or sets a string containing a list of strings separated by semicolons (;) to be used as an enumeration.
  • Step - Gets or sets a number that specifies the step value used for simple numeric incrementing and decrementing.
  • Minimum - Gets or sets a number that specifies the minimum value for the NumericUpDown control.
  • Maximum - Gets or sets a number that specifies the maximum value for the NumericUpDown control.

NumericUpDown Server Code Sample

view plaincopy to clipboardprint?
  1. <table>  
  2.     <tr>  
  3.         <td>Enter a numeric value and use the up and down  
  4.             buttons to increment/decrement (min:1 and max:7)</td>  
  5.         <td ><asp:TextBox ID="TextBox1" runat="server"  
  6.             Text="3" Width="120" style="text-align:center" /></td>  
  7.     </tr>  
  8.     <tr>  
  9.         <td>Choose your favorite month</td>  
  10.         <td ><asp:TextBox ID="TextBox2" runat="server"  
  11.             Text="June" Width="120" style="text-align:center" /></td>  
  12.     </tr>  
  13.     <tr>  
  14.         <td>Let the web service pick a random number between 0 and 1000  
  15.             that is higher/lower than the displayed value</td>  
  16.         <td ><asp:TextBox ID="TextBox3" runat="server"  
  17.             Text="500" Width="120" style="text-align:center" /></td>  
  18.     </tr>  
  19.     <tr>  
  20.         <td>Use the arrow images to increment/decrement the value</td>  
  21.         <td>  
  22.             <asp:TextBox ID="TextBox4" runat="server"  
  23.                 Text="0" Width="60" style="text-align:center" />  
  24.             <asp:ImageButton ID="img1" runat="server" ImageUrl="~/images/down.gif"  
  25.                 AlternateText="Down" Width="15" Height="15"/>  
  26.             <asp:ImageButton ID="img2" runat="server" ImageUrl="~/images/up.gif"  
  27.                 AlternateText="Up" Width="15" Height="15"/>  
  28.         </td>  
  29.     </tr>  
  30. </table>  
  31. <br />  
  32.   
  33. <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />  
  34. <br /><br />  
  35.   
  36. <asp:Label ID="Label1" runat="server" Text="[No response provided yet]" />  
  37.   
  38. <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server"  
  39.     TargetControlID="TextBox1"  
  40.     Width="120"  
  41.     RefValues=""   
  42.     ServiceDownMethod=""  
  43.     ServiceUpMethod=""  
  44.     TargetButtonDownID=""  
  45.     TargetButtonUpID=""   
  46.     Minimum = "1"  
  47.     Maximum = "7" />  
  48. <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender2" runat="server"  
  49.     TargetControlID="TextBox2"  
  50.     Width="120"  
  51.     RefValues="January;February;March;April;May;June;July;August;September;October;November;December"  
  52.     ServiceDownMethod=""  
  53.     ServiceUpMethod=""  
  54.     TargetButtonDownID=""  
  55.     TargetButtonUpID="" />  
  56. <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender3" runat="server"  
  57.     TargetControlID="TextBox3"  
  58.     Tag=""  
  59.     Width="120"  
  60.     ServiceUpPath="NumericUpDown.asmx"  
  61.     ServiceDownPath="NumericUpDown.asmx"  
  62.     ServiceUpMethod="NextValue"   
  63.     ServiceDownMethod="PrevValue"  
  64.     RefValues=""  
  65.     TargetButtonDownID=""  
  66.     TargetButtonUpID="" />  
  67. <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender4" runat="server"  
  68.     TargetControlID="TextBox4"  
  69.     Width="80"  
  70.     TargetButtonDownID="img1"  
  71.     TargetButtonUpID="img2"  
  72.     RefValues=""  
  73.     ServiceDownMethod=""  
  74.     ServiceUpMethod="" />  

NumericUpDown Server Reference

The properties in italics are optional.

view plaincopy to clipboardprint?
  1. <ajaxToolkit:NumericUpDownExtender ID="NUD1" runat="server"  
  2.     TargetControlID="TextBox1"   
  3.     Width="100"  
  4.     RefValues="January;February;March;April"  
  5.     TargetButtonDownID="Button1"  
  6.     TargetButtonUpID="Button2"  
  7.     ServiceDownPath="WebService1.asmx"  
  8.     ServiceDownMethod="PrevValue"  
  9.     ServiceUpPath="WebService1.asmx"  
  10.     ServiceUpMethod="NextValue"  
  11.     Tag="1" />  

  • TargetControlID - The ID of the TextBox to modify
  • Width - Combined size of the TextBox and Up/Down buttons (min value 25). This property is not used if you provide custom buttons.
  • RefValues - A list of strings separated by semicolons (;) to be used as an enumeration by NumericUpDown
  • Step - Step used for simple numeric incrementing and decrementing. The default value is 1.
  • TargetButtonDownID/TargetButtonUpID - Reference to custom Up/Down buttons.
  • ServiceDownPath/ServiceUpPath - Path to a web service that returns the data used to get the next or previous value. This property should be left null if ServiceUpMethod or ServiceDownMethod refers to a page method. The web service should be decorated with the System.Web.Script.Services.ScriptService attribute.
  • ServiceDownMethod/ServiceUpMethod - Web service method that returns the data used to get the next or previous value, or the name of a method declared on the Page which is decorated with the WebMethodAttribute. The signature of this method must match the following: 

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public int NextValue(int current, string tag) { ... }

Note you can replace "NextValue" with a name of your choice, but the return type and parameter name and type must exactly match, including case.
  • Tag - Specifies a custom parameter to pass to the Web Service
  • Minimum - The minimum value allowed by the extender. Currently, it does not prevent out of range values from being entered into the textbox even if Minimum or Maximum are specified on the extender, but using the up/down buttons should bring the value into the allowed range when clicked.
  • Maximum - The maximum value allowed by the extender.

NumericUpDown Known Issues

The display of the default up/down buttons in Safari is such that Safari's "shiny" button style makes the up/down arrows difficult to see. Custom images can be used for complete control over the appearance.

Comments

Post a Comment

Popular posts from this blog

Executing PowerShell scripts from C#

Image
Please refer the original post from here http://blogs.msdn.com/b/kebab/archive/2014/04/28/executing-powershell-scripts-from-c.aspx I n today’s post, I will demonstrate the basics of how to execute PowerShell scripts and code from within a C#/.NET applications. I will walk through how to setup your project prerequisites, populate the pipeline with script code and parameters, perform synchronous and asynchronous execution, capture output, and leverage shared namespaces. Update 8/7/2014 : Here is the downloadable solution file. Update 11/5/2014 : Added a section on execution policy behavior. Prerequisites: First, ensure that PowerShell 2.0 or later is installed on the system you are developing on. The features used below will not be supported on PowerShell 1.0. Next, start by making a new console application (targeting .NET 4.0) in Visual Studio. In the solution explorer, add a project reference to the System.Management.Automation assembly * . On my machine (PowerShe...
Read more

Exposing Agile Software Development Myths

Agile development is a movement that started 11 years ago and now is a commonplace discussion for software development teams. Prior to the signing of the Agile Manifesto in Utah in 2001 [endnote 1], the world was using a phased methodology called “Waterfall,” introduced (but not named) by Winston W. Royce [2], ironically trying to explain why that methodology was a bad idea. The methodology forced the completion of a phase in order to continue with the next one. That caused some problems since, no matter how hard the developers tried to gather all requirements and create a full system design, there was always the need in the following phases to go back and change things. Those regressions had a big impact on cost. The Agile principles tried to eliminate all the rigidity of Waterfall by focusing on more productive tasks, like working code over comprehensive documentation, adding more customer collaboration, enforcing individual interactions instead of tools and being a...
Read more