jQWidgets Forums

Tagged: Cell, edit, editing, enter edit mode, grid, jqxgrid, minus, negative number, setSelectionRange, start edit

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

Entering negative dollar amount in grid cell Posts

January 20, 2015 at 3:08 pm Entering negative dollar amount in grid cell #65693

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>

January 21, 2015 at 7:35 am Entering negative dollar amount in grid cell #65722

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/

January 21, 2015 at 6:10 pm Entering negative dollar amount in grid cell #65789

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.

January 22, 2015 at 6:56 am Entering negative dollar amount in grid cell #65821

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/

Author

Posts

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

You must be logged in to reply to this topic.