Make input group editor behave the same as the standard cell editor

[alesParticipant]

I have tried a grid widget with a template column with custom column editor using an input group (input widget together with “…” button to start special editor) according to your suggestion.

Everything works fine (clicking on the button to start special editor, returning the edited value to the cell, etc.), but I could not manage to make the editor to behave exactly in the same manner as the “standard” cell editor:

1. The grid uses multiplecellsextended selectionmode and selectedcell editmode. Standard editor automatically selects all cell text after the editor is displayed and it does not matter if the edit mode is triggered by F2 key or mouse click. My “input group” editor behaves the same only after pressing F2 key. When clicking on the cell, the editor is displayed, but not focused and after the second click the input is focused and all text selected (but the text is not selected every time!, from time to time nothing is selected). What should I do to make the input focused and text selected after first click to the selected cell?

2. The “input group” editor is not properly sized, the width and height of the editor is smaller than the size of the cell a it does not fit exactly to the cell area. It is strange, because I set the width and height of the editor in the createeditor event.

Here is part of my code:

columns: [
                { text: 'Name', datafield: 'name' },
                { text: 'Address', datafield: 'address' },
                { text: 'Parent', datafield: 'parentName', columntype: 'template',
                   createeditor: function (row, cellvalue, editor, cellText, width, height) {
                       // construct the editor.
                       var inputElement = $("<div><input /><div id='selectParent' title='Choose parent' style='width:16; heght:16; cursor: pointer;'>...</div></div>").prependTo(editor);
                       inputElement.jqxInput({ width: width, height: height });
                       inputElement.keydown (function (event) {
                           if (event.which == 13)  // Enter
                             doSelect();
                       });
                   },
                   initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
                       // set the editor's current value. The callback is called each time the editor is displayed.
                       currentRow = row;
                       $("#selectParent").off("click").on("click", doSelect);
                       inputField = editor.find('input');
                       inputField.val(cellvalue);
                       //inputField.jqxInput('focus'); // this does not work
                       //inputField.jqxInput('selectAll'); // this does not work
                       inputField.focus();
                       inputField.select();
                 },
               geteditorvalue: function (row, cellvalue, editor) {
                   // return the editor's value.
                   return editor.find('input').val();
                 }
               }
            ] 

Thank you for any hints.
Ales

[DimitarParticipant]

Hello Ales,

Here is what you may do:

columns: [
    { text: 'Name', datafield: 'name' },
    { text: 'Address', datafield: 'address' },
    { text: 'Parent', datafield: 'parentName', columntype: 'template',
        createeditor: function (row, cellvalue, editor, cellText, width, height) {
            // construct the editor.
            var inputElement = $("<div><input /><div id='selectParent' title='Choose parent' style='width:16; heght:16; cursor: pointer;'>...</div></div>").prependTo(editor);
            inputElement.jqxInput({ width: width + 7, height: height + 1 });
            inputElement.keydown(function (event) {
                if (event.which == 13)  // Enter
                    doSelect();
            });
        },
        initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
            // set the editor's current value. The callback is called each time the editor is displayed.
            currentRow = row;
            $("#selectParent").off("click").on("click", doSelect);
            inputField = editor.children(':eq(0)');
            inputField.val(cellvalue);
            inputField.jqxInput('focus'); // this does not work
            inputField.jqxInput('selectAll'); // this does not work
        },
        geteditorvalue: function (row, cellvalue, editor) {
            // return the editor's value.
            return editor.find('input').val();
        }
    }
],

The jqxInput methods could not be called because you had selected only the input of the input group and not the whole group which is the widget itself.

Best Regards,
Dimitar

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

[alesParticipant]

Great! It works! Many thanks.

[vinothrParticipant]

Hi Dimitar,

It works, but the value typed in input box is not appearing in grid after blur. Any clue to solve this?

Thanks in advance.

[DimitarParticipant]

Hello vinothr,

Please make sure you have implemented geteditorvalue, too.

Best Regards,
Dimitar

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

[vinothrParticipant]

hi Dimitar,

Thanks for your reply. It works fine.
And I have another issue. How to call a change event for this inputbox?

Thanks in advance.

[vinothrParticipant]

OK…. It works.

[Author]

Posts