jQuery UI Widgets Forums Editors NumberInput Back spacing he Jqxnumberinput field

This topic contains 1 reply, has 2 voices, and was last updated by  Nadezhda 8 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Back spacing he Jqxnumberinput field #69118

    raghu501
    Participant

    Hi,
    I have a jqxnumberinput (v.3.6.0) cell with input Mode set to “advanced” and
    want to edit cell value by pressing back space button on the cell,
    but cursor is not moving to the left after the decimal point and Cursor
    moving until it reaches the decimal point when back spacing the whole
    cell value (eg.123.78 it reaches up to the digit 7 only).

    My code:using in jqx grid
    { text: ‘AvgComp’, datafield: ‘AvgComp’,cellsformat:’c2′,columntype:’numberinput’,width: 130, cellvaluechanging: defaultInt,
    validation: NumberValidation,
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({decimalDigits: 0,
    digits: 10,
    decimalDigits: 2,
    max: 9999999999,
    inputMode: ‘advanced’,
    spinButtons:false
    });
    }
    },

    Is there any feature to move cursor position as like when set inputMode:’simple’?

    Regards
    Raghu

    • This topic was modified 8 years, 11 months ago by  raghu501.
    Back spacing he Jqxnumberinput field #69132

    Nadezhda
    Participant

    Hello Raghu,

    In the above code you are using ‘decimalDigits’ two times which is not correctly. Please, find the following example where the back space button goes to the left side of decimal point.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>  
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = generatedata(200);
    
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failder.
                        commit(true);
                    },
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'available', type: 'bool' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'date', type: 'date' }
                    ]
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    editable: true,
                    enabletooltips: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
                      { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                      { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                      {
                          text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                      validation: function (cell, value) {
                              if (value == "")
                                 return true;
    
                              var year = value.getFullYear();
                              if (year >= 2015) {
                                  return { result: false, message: "Ship Date should be before 1/1/2015" };
                              }
                              return true;
                          }
                      },
                      {
                          text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                          validation: function (cell, value) {
                              if (value < 0 || value > 150) {
                                  return { result: false, message: "Quantity should be in the 0-150 interval" };
                              }
                              return true;
                          },
                          createeditor: function (row, cellvalue, editor) {
                              editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                          }
                      },
                      { text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                          validation: function (cell, value) {
                              if (value < 0 || value > 15) {
                                  return { result: false, message: "Price should be in the 0-15 interval" };
                              }
                              return true;
                          },
                          createeditor: function (row, cellvalue, editor) {
                              editor.jqxNumberInput({
                                  digits: 10,
                                  decimalDigits: 2,
                                  max: 9999999999,
                                  spinButtons: false,
                                  inputMode: 'advanced'
                              });
                          }
    
                      }
                    ]
                });
    
                // events
                $("#jqxgrid").on('cellbeginedit', function (event) {
                    var args = event.args;
                    $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
                });
    
                $("#jqxgrid").on('cellendedit', function (event) {
                    var args = event.args;
                    $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid"></div>
            <div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; margin-top: 30px;">
                <div id="cellbegineditevent"></div>
                <div style="margin-top: 10px;" id="cellendeditevent"></div>
           </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

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

You must be logged in to reply to this topic.