2

Part 1) In my grid, I have some editable columns which I would like to do inline editing to. However when I select any particular cell and if the inline editing is available on that cell (editable: true), it should select the text to be edited.

For example if this is the default grid: enter image description here then upon selecting any cell in Quantity, the result should be something like this: enter image description here

When we click on a cell to edit that row in jqGrid, current implementation does not highlight the selected text like this. Is there any way to achieve this?

Part 2) Migrated to this question as per Oleg's suggestion

GRID CODE: jsFiddle

Note: My real application datatype is JSON

Community
  • 1
  • 1
Dipen Shah
  • 1,911
  • 10
  • 29
  • 45

1 Answers1

3

I'm not sure about all versions of old web browsers, but you can modify the code of onSelectRow to the following

onSelectRow: function (id) {
    var $self = $(this);
    if (id && id !== lastsel2) {
        $self.jqGrid('restoreRow', lastsel2);
        $self.jqGrid('editRow', id, {
            keys: true,
            focusField: 'Quantity',
            oneditfunc: function (rowid, options) {
                $control = $("#" + rowid + "_Quantity");
                if ($control.length > 0) {
                    $control[0].select();
                }
            },
            aftersavefunc: reload
        });
        lastsel2 = id;
    }
}

see http://jsfiddle.net/OlegKi/HJema/163/. It uses focusField: 'Quantity' option to set the focus on the 'Quantity' column. It uses select() method to select the text of <input> field.

The second part of your question (about bindKeys) seems to me a separate question. The method bindKeys allows to implement custom callbacks onLeftKey, onRightKey. Which one you would like better to use is not full clear for me.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Hi @Oleg this works perfectly but only for the quantity field. What if there are multiple editable fields? And I want the focus of it to be on any field (not just the quantity field in this case) sorry I should have specified this in my question itself. But how would I do this? I have tried retrieving the colModel of the grid but I can't compare with the selected column. Is there any better approach for what I want? – Dipen Shah Sep 21 '15 at 21:48
  • @DipenShah: I'm not sure that I full understand what you want to implement. `$("#" + rowid + "_" + columnName).select();` allow you to select the text in any input field. On the other side you can of cause set focus only on one input field. – Oleg Sep 21 '15 at 21:55
  • Sorry I was not clear before. In other words I have to assume that the name 'Quantity' is not known to me. Let's say I have another field called 'Received' which is editable. Now if I click on any cell on 'Received' column, this should work for 'Received' column too and it should select and highlight the text of that received column. Does that help? – Dipen Shah Sep 21 '15 at 21:59
  • @DipenShah: If I correctly understand you then you can execute `.select()` method inside of onfocus event handler of `` of inline editing. You can register the `focus` or `focusin` event handler using `editoptions.dataEvents`. Is it what you need? – Oleg Sep 21 '15 at 22:08
  • @DipenShah: Look at [the demo](http://jsfiddle.net/OlegKi/HJema/165/) which have two editable input fields `I_ItemNumID` and `Quantity`. The `Quantity` get input initially, but if one click on `I_ItemNumID` or back to `Quantity` one will always get selected text on set focus. Is it what you need? – Oleg Sep 21 '15 at 22:28
  • Hi @oleg sorry for misunderstanding. But when one clicks on `I_ItemNumID` the focus should be on 'I_ItemNumID` itself and NOT quantity field. Does that help? – Dipen Shah Sep 21 '15 at 22:58
  • @DipenShah: I hope that I understand you correctly now. Try http://jsfiddle.net/OlegKi/HJema/168/. It gets the name of clicked column and set the focus on the column if the column is editable. Is it what you want? – Oleg Sep 21 '15 at 23:20
  • Thank you @Oleg this is exactly what I wanted. Can I give you a suggestion to include this feature as a part of grid base code itself in the case of inline editing? Maybe have it in the form of one of the various options we can set? I think it's important because the user will click only on the cell one wants to edit. I think it could be a really useful feature. I don't know about jqGrid as much as you do so let me know your thoughts on this. – Dipen Shah Sep 21 '15 at 23:24
  • Do you have any thoughts about the part 2 of my question? Thanks – Dipen Shah Sep 21 '15 at 23:25
  • @DipenShah: I will think about changing the default behavior of jqGrid to be close to your suggestion. About the part 2. I wrote that I don't full understand what you want. If we have text input field and the user press left key then the cursor should be moved **inside of the input field** and not goes to another input field. Isn't so. I understand that it could be different special cases, but all the discussion seems to me a separate question independent from the part with the focus. – Oleg Sep 21 '15 at 23:30
  • @DipenShah: The goal of stackoverflow is sharing common questions and answers with other people. By separation of questions the answers can be better indexed and other users can easy to find the problem. It seems to me that you could find in FAQ of stackoverflow that one should not post communicative questions with part1, part2 and so on. Sorry. – Oleg Sep 21 '15 at 23:32
  • Sorry i will ask a new question instead. I think I will have to reformulate the question to explain it a bit better in a new question later. This answers my current question so thanks again @Oleg for all the help. I'll post the link of the new question here in case you don't see it. Thanks again :) – Dipen Shah Sep 21 '15 at 23:39
  • Hi @Oleg I posted a new question [here](http://stackoverflow.com/questions/32718411/jqgrid-bindkeys-change-arrow-and-tab-keys-behavior) can you please take a look when you have time? Thanks. – Dipen Shah Sep 22 '15 at 13:38
  • @DipenShah: I though about implementing close requirements in `editRow` as default behavior. The main problem is compatibility with old version of `editRow` and the break between the click and starting the inline editing. For example if the user clicks on the cell of the grid then `click` handler be called which calls `onSelectRow` for example. Only one uses all 3 parameters of `onSelectRow` then one have access to click `e` and to `e.target` which can be used to locale which column was clicked by the user. So **the existing old code** which use `editRow` in `onSelectRow` can't be improved. – Oleg Sep 22 '15 at 15:20
  • @DipenShah: You are welcome! One still could add **new** parameter (new property) to `editRow` which could be the original click event. One can use the option in `formatter: "action"` and `inlineNav`. So that old (existing) code could do have advantage of new feature if one would start inline editing *indirectly* (`formatter: "action"` or `inlineNav`). I will try not forget about the enhancement and will try to implement it later in free jqGrid. – Oleg Sep 22 '15 at 15:30
  • This makes sense. So the `action` can contain the action to select the text which will work for the existing code too. Makes sense. Thank you @Oleg. Your contribution to free-jqGrid is priceless. – Dipen Shah Sep 22 '15 at 15:37
  • @DipenShah: I posted two small changes to GitHub: [this one](https://github.com/free-jqgrid/jqGrid/commit/9e2617caa9d909418add47aecfb53167c4981fef) and [this one](https://github.com/free-jqgrid/jqGrid/commit/836a00d0866aa26ec4d680f45b028c7d39418405). One can use now `$self.jqGrid('editRow', id, {focusField: e.target, defaultFocusField: 'Quantity'}` where `e` is the third parameter of `onSelectRow` callback (`onSelectRow: function (rowid, status, e)`) – Oleg Oct 15 '15 at 17:39
  • This is amazing. Thank you so much for implementing this feature. I have a question. If I don't specify the `defaultFocusField` will it default to the currently clicked cell if its editable? – Dipen Shah Oct 15 '15 at 17:43
  • @DipenShah: Yes exactly. If no `defaultFocusField` is specified the the focus will be set on the first ``, ` – Oleg Oct 15 '15 at 17:55
  • I see. Thank you once again for implementing this feature. – Dipen Shah Oct 16 '15 at 17:38