jqxNumberInput increment - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: jqxnumberinput, Number Input, spinButtonsStep

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 12 years, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

jqxNumberInput increment Posts

January 16, 2013 at 4:57 pm jqxNumberInput increment #13717

Participant

Hi ,

Currently i am using jqxNumberInput in jqxgrid. its initial value will be 0.00. I need to increment or decrement value by 0.25. can you please suggest how to achieve this.

thanks

naseer

January 17, 2013 at 10:12 am jqxNumberInput increment #13761

Dimitar

Participant

Hello naseer,

You should initialize the widget witgh the spinButtonsStep property specified, i.e.:

            $("#numericInput").jqxNumberInput({ width: '250px', height: '25px', symbol: "$", min: 0, theme: theme, spinButtons: true, spinButtonsStep: 25 });

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

January 17, 2013 at 11:46 pm jqxNumberInput increment #13826

09097037

Participant

Thanks Dimitar,

$(“#numericInput”).jqxNumberInput({ width: ‘250px’, height: ’25px’, symbol: “$”, min: 0, theme: theme, spinButtons: true, spinButtonsStep: 25 });

i want the spinButtonsStep to .25 (point 25 increment or decrement) which is not working

please let me know if any changes to be made. and can you please send some sample to show it work.

thanks
naseer

January 18, 2013 at 6:21 am jqxNumberInput increment #13845

Dimitar

Participant

Hi naseer,

Here is a working example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Input, Number Input, Currency Input, Percentage Input, Floating-Point Input, Decimal Input, jqxNumberInput" />
    <meta name="description" content="This demo demonstrates how to trigger the jqxNumberInput's valuechanged and textchanged events." />
    <title id='Description'>This demo demonstrates how to trigger the jqxNumberInput's valuechanged
        and textchanged events.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // Create jqxNumberInput
            $("#numericInput").jqxNumberInput({ width: '250px', height: '25px', theme: theme, spinButtons: true, spinButtonsStep: 0.25, spinMode: 'simple' });
            $('#Events').css('border', 'none');
            $('#Events').jqxPanel({ theme: theme, height: '250px', width: '300px' });
            $('#numericInput').bind('valuechanged', function (event) {
                var value = event.args.value;
                $('#Events').jqxPanel('clearcontent');
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Value: ' + value + '</div>');
            });
            $('#numericInput').bind('textchanged', function (event) {
                var text = event.args.text;
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Text: ' + text + '</div>');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div style='margin-top: 10px;'>
                Number</div>
            <div style='margin-top: 3px;' id='numericInput'>
            </div>
            <div style='margin-left: 0px; margin-top: 20px; float: left;'>
                <div>
                    <span>Events:</span>
                    <div id='Events'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

February 1, 2013 at 10:44 pm jqxNumberInput increment #14513

09097037

Participant

Hi Dimitar,

What version of jqxWidget you are using. I dont see the desired results with 2.4.1 and 2.5.0 . please help me asap

thanks
naseer

February 4, 2013 at 7:51 am jqxNumberInput increment #14612

Dimitar

Participant

Hi naseer,

We are using the latest version of jQWidgets. As of today, it is 2.6.1.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.