Needing to highlight the contents of a jqxNumberInput on click

Question

I have been struggling to get a very simple feature working using jqxGrid and a cell rendered with a jqxNumberInput

  editor.jqxNumberInput({ decimalDigits: 2, spinButtonsStep: 0.1, spinMode: "simple", decimalSeparator: decimalSeparator, groupSeparator: groupSeparator });

Basically when the user clicks on the cell the cursor is placed all the way to the right of the text (number), my boss wants the contents of the cell to be highlighted (text selected) so the user does not have to move the cursor to the left in order to start typing

I have been digging through the jqx grid docs for quite some time and there doesnt seem to be anything I can find to achieve this. http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

I attempted to tie into the cellbeginedit event and assumed I could use the event to get the target element and selected it that way, but the event.target value is the entire grid, not the cell itself.

 $(element).on('cellbeginedit', function (event) { // event.target == grid  not cell });

I also attempted to get the cell by using the getcell method, but this returns the data for that cell not the element itself.

 var cell = $(element).jqxGrid("getcell", args.rowindex, args.datafield);
 //  cell then equals the data for the row not with no reference to the 

element in question To reiterate, i need to modify, hack update do something so when a user clicks on a jqxNumberInput and the cell goes into edit mode all the text in the cell is selected (highlighted)

any help on this issue would be greatly appreciated

Answer 1

You should put your editor customization logic within your column's initeditor callback function. There you can try with jqxNumberInput API such as "focus" or code for selecting all text within input.

var input = editor.find('input');
var length = input.val().length;
            try {
                if ('selectionStart' in input) {
                    input.focus();
                    input.setSelectionRange(0, length);
                }
                else {
                    var range = input.createTextRange();
                    range.collapse(true);
                    range.moveEnd('character', length);
                    range.moveStart('character', 0);
                    range.select();
                }
            }
            catch (error) {
            }

In the above code, editor is the argument passed from jqxGrid to your column's initeditor function.