jQWidgets Forums

jQuery UI Widgets Forums Grid Entering negative dollar amount in grid cell

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 10 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • jbuwidgets
    Participant

    Looking at the sample below…

    If I wish to enter an amount of $33.00 in a cell I simply select the cell and type in 33. This activates the cell editor and places the desired amount in the field. However, if I wish to enter a negative amount the leading minus sign does not activate the editor. So, in effect, typing in -33 results in 33 in the cell editor.

    I understand that I can press Enter to activate the editor, and then type in -33… but that represents an inconvenience for our users that we wish to avoid. We want the same behavior regardless of positive or negative value.

    Is there a simple way to achieve the desired behavior?

    Thanks for any help you can provide.

    ——————————–

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>Simple Grid.</title>
        <link rel="stylesheet" href="content/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="scripts/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="scripts/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="scripts/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="scripts/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="scripts/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="scripts/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="Scripts/jqWidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="scripts/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = new Array();
                var accounts =
                [
                    "Payroll", "Misc Expenses", "Office Supplies"
                ];
                var amounts =
                [
                    "2.25", "1.5", "3.0"
                ];
                for (var i = 0; i < 15; i++) {
                    var row = {};
                    var index = Math.floor(Math.random() * accounts.length);
                    var amount = parseFloat(amounts[index]);
                    row["account"] = accounts[Math.floor(Math.random() * accounts.length)];
                    row["amount"] = amount;
                    data[i] = row;
                }
                var source =
                {
                    localdata: data,
                    datatype: "array"
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                $("#jqxgrid").jqxGrid(
                {
                    source: dataAdapter,
                    editable: true,
                    selectionmode: 'singlecell',
                    columns: [
                      { text: 'Account', datafield: 'account', width: 250 },
                      { text: 'Amount', datafield: 'amount', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid"></div>
        </div>
    </body>
    </html>
    

    Dimitar
    Participant

    Hello jbuwidgets,

    Here is a workaround on the matter:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>Simple Grid.</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/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.selection.js"></script>
        <script type="text/javascript" src="../../jqWidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = new Array();
                var accounts =
                [
                    "Payroll", "Misc Expenses", "Office Supplies"
                ];
                var amounts =
                [
                    "2.25", "1.5", "3.0"
                ];
                for (var i = 0; i < 15; i++) {
                    var row = {};
                    var index = Math.floor(Math.random() * accounts.length);
                    var amount = parseFloat(amounts[index]);
                    row["account"] = accounts[Math.floor(Math.random() * accounts.length)];
                    row["amount"] = amount;
                    data[i] = row;
                }
                var source =
                {
                    localdata: data,
                    datatype: "array"
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
    
                var pressedKey = null;
    
                var initeditor = function (row, cellvalue, editor, celltext, pressedChar) {
                    if (pressedKey == '-') {
                        editor.val('-');
                        setTimeout(function () {
                            editor[0].setSelectionRange(1, 1);
                        }, 100);
                    }
                    pressedKey = null;
                };
    
                $("#jqxgrid").jqxGrid(
                {
                    source: dataAdapter,
                    editable: true,
                    selectionmode: 'singlecell',
                    handlekeyboardnavigation: function (event) {
                        var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                        if (key == 189) {
                            var selectedCell = $('#jqxgrid').jqxGrid('getselectedcell');
                            if (selectedCell) {
                                pressedKey = '-';
                                $("#jqxgrid").jqxGrid('begincelledit', selectedCell.row, selectedCell.datafield);
                            }
                        }
                    },
                    columns: [
                      { text: 'Account', datafield: 'account', width: 250, initeditor: initeditor },
                      { text: 'Amount', datafield: 'amount', width: 90, cellsalign: 'right', cellsformat: 'c2', initeditor: initeditor },
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    jbuwidgets
    Participant

    Excellent, just what I was looking for!

    I do have a couple of quick follow-up questions on this portion of your code:

    var initeditor = function (row, cellvalue, editor, celltext, pressedChar) {
                    if (pressedKey == '-') {
                        editor.val('-');
                        setTimeout(function () {
                            editor[0].setSelectionRange(1, 1);
                        }, 100);
                    }
                    pressedKey = null;
                };

    1) why use setTimeout() instead of just setting the editor’s value?
    2) why use editor[0].setSelectionRange(1, 1); instead of editor.setSelectionRange(1, 1);? Why is the index [0] needed?

    Thanks again.


    Dimitar
    Participant

    Hi jbuwidgets,

    1) By default, the value of the cell is selected when you enter edit mode. With setSelectionRange(1, 1), the selection is cleared (after it has been made, that is why we need the 100 ms timeout) and the cursor is positioned at the end of the value. You can then start entering the part of the number after the minus sign.

    2) setSelectionRange is a JavaScript (not jQuery) method and it has to be called for the actual HTML element, not the jQuery selection which is editor.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.