jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Entering negative dollar amount in grid cell
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.
-
Author
-
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>
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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 useeditor[0].setSelectionRange(1, 1);
instead ofeditor.setSelectionRange(1, 1);
? Why is the index[0]
needed?Thanks again.
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.