how to end inline edit started with formatter edit action button if other row is clicked in jqgrid

Question

Inline editing is started using edit formatter action button. If clicked in other row, old row remains in inline edit mode.

How to end old row indline edit if clickedin other row.

According to http://www.trirand.com/blog/?page_id=393/bugs/wrong-hovering-effect-in-actions-formatter-of-jqgrid-4-1-0

it looks line this is solved in 4.1.2 but actually the problem persists.

Update

Using Oleg workaround exception occurs if custom element is used. Line where exception occurs is marked in comment in code below

// this is jqgrid custom_element property value:
function combobox_element(value, options, width, colName, entity, andmetp) {
    var elemStr;
    if (options.id === options.name)
    // form 
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content ui-corner-all" style="vertical-align:top" size="' +
                options.size + '"';
    else
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content " style="height:17px;vertical-align:top;width:' +
                width + 'px" '; 

    elemStr += ' value="' + value + '"' + ' id="' + options.id + '"/>';
    elemStr += '<button style="height:21px;width:21px;" tabindex="-1" /></div>';

    var newel = $(elemStr)[0];
    setTimeout(function () {
        $(newel).parent().css({ display: "inline-block" }).parent().css({ 'padding-bottom': 0 });
  // click in edit button in action input variable is undefined, newel does not contain input element:
   var input = $("input", newel);
    }, 500);
    return newel;
}

Update2

I try to explain new issue more clearly. Before adding

                onEdit = @"function (id) {
                if (typeof (lastSelectedRow) !== 'undefined' && id !== lastSelectedRow) {
                   cancelEditing($('#grid'));
                   }
                 lastSelectedRow = id;
              }

event handler exception on custom element does not occur. After adding onEdit event handler below custom editing elements are not created anymore. So custom editing elements cannot used in inline editing if this onEdit handler is present. I commented out cancelEditing code but problem persists. It looks like this onEdit event handler prevents custom editing element creation.

Update 3

I tried demo provided in Oleg answer. If inline edit is started by double click in row, action buttons do not change. It is not possible to use save and cancel buttons in this case.

score 5 · Accepted Answer · answered Aug 13 '11 at 10:39

5

You are right. It seems bug in the formatter:"actions" of the current version of jqGrid. If you examine the source code you will find no variable which saves the information about the last editing row. So depend on the implementation of your code which use formatter:"actions" you can has either multiple editing rows:

enter image description here

or at least wrong icons in the old editing row

enter image description here

and you will not be able to edit the previous editing icon ever more (because you have no "edit" action icon).

In the demo I suggest as the workaround to cancel the previous editing unsaved row in both onSelectRow jqGrid event and in the onEdit event of the formatter:'actions'. The corresponding code fragment look as following

var grid=$("#list"),
    lastSel,
    cancelEditing = function(myGrid) {
        var lrid;
        if (typeof lastSel !== "undefined") {
            // cancel editing of the previous selected row if it was in editing state.
            // jqGrid hold intern savedRow array inside of jqGrid object,
            // so it is safe to call restoreRow method with any id parameter
            // if jqGrid not in editing state
            myGrid.jqGrid('restoreRow',lastSel);

            // now we need to restore the icons in the formatter:"actions"
            lrid = $.jgrid.jqID(lastSel);
            $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").show();
            $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
        }
    };

grid.jqGrid({
    // ...
    colModel:[
        {name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
            formatoptions:{
                keys: true,
                delOptions: myDelOptions,
                onEdit: function (id) {
                    if (typeof (lastSel) !== "undefined" && id !== lastSel) {
                        cancelEditing(grid);
                    }
                    lastSel = id;
                }
            }},
        ...
    ],
    onSelectRow: function(id) {
        if (typeof (lastSel) !== "undefined" && id !== lastSel) {
            cancelEditing($(this));
        }
        lastSel = id;
    }
});

In the demo I use inline editing on double clicking on the grid row in addition to the action formatter. It is not really required, but both can work together without any conflicts.

answered Aug 13 '11 at 10:39

Oleg

220,925
34
403
798

thank you. Grid contains jqueryUI autocomplete box created as custom_element from setTimeout call using your great sample from other answer. Click in edit button causes exception since custom element is not yet created for unknown reason. How to use this button with custom_element ? – Andrus Aug 13 '11 at 11:45
I updated question and added code sample which shows that custom element is not creatred if clicked in button. – Andrus Aug 13 '11 at 11:50
@Andrus: Sorry, but I see no relation of the code which you posted with your original question. In the code are not used the `formatter:"actions"`. Probably you have some *general inline editing problem* in your code. Moreover you wrote that you have an exception somewhere in the jQuery UI autocomplete, but I can't find any autocomplete usage in the code which you posted. – Oleg Aug 13 '11 at 14:41
I'm sorry I was not clear. After adding onEdit event handler custom editing elements are not created anymore. It looks like onEdit presence blocks custom element creation. If this onEdit is used custom edititng element cannot used in inline edition anymore. If onEdit event handler is removed, custom editing elements work ok. So it looks like this is related to the question and proposed solution. I updated question about this. I can provide testcase if requested. – Andrus Aug 13 '11 at 21:04
@Andrus: The testcase would be clear all. I still don't see any code which use jQuery UI autocomplete, but you say that in the autocomplete you have seen the origin of the problem. Is there one more problem, that custom element will be not created? – Oleg Aug 13 '11 at 21:11
Issue occurs at line `var input = $("input", newel);` which does not find input element for unknown reason. Autocomplete is called after this so this is not related to autocomplete call. I'm sorry for confusion. – Andrus Aug 13 '11 at 21:11
For unknown reason `$("input", newel);` does not return input element. I changed question text, replaced autocomplete with custom element. – Andrus Aug 13 '11 at 21:15
@Andrus: All what you wrote sound very strange. I don't have any explanation now, but the detailed testcase could clear all. One thing would I change: `500` timeout you can change to `50` or even `0`. After the `var input = $("input", newel);` you can test whether `input.length > 0`, so whether the input still exist (or already exist) and only inside of `if (input.length > 0) {/*here*/}` use `ìnput` for autocomplete for example. Moreover in the case if `var input` is undefined I would examine the editing line with respect of IE Developer Tools to see the current HTML markup. – Oleg Aug 13 '11 at 21:21
I changed timeout to 50 as in your sample in other answer but problem persists. I created testcase. You can use same credentials and url as in last time and click in edit button in column. Javascript exception occurs since in $("input", newel) newel does not contain input element, newel outerHTML property shows only div, not input element. – Andrus Aug 13 '11 at 21:48
there is other issue: edit and delete icons are in different rows and row height is too big. The same columns width 55 as in your sample is used, so they should appear in same row as in your sample and row height should not increase. How to force icons to appear in same row ? – Andrus Aug 13 '11 at 21:53
note that if inline edit is started using double click, all is ok. custom element is not created only if inline edit is started by clicking edit icon in column. – Andrus Aug 13 '11 at 21:56
@Andrus: I examined the problem and it seems that the reason of the problem is my previous suggestion you to include the `' id="' + options.id + '"/>'` in the code of `combobox_element`. It's the wrong way! [The line](https://github.com/tonytomov/jqGrid/blob/v4.1.2/js/grid.common.js#L457) will add to `
` over `` element **the same id** which you use for the `input`. So you should remove the code which place `id` for the input element and one should go to the problem which we tried to solve and find another solution.
– Oleg Aug 13 '11 at 22:25
@Andrus: In any way I recommend you to include in the code of `input_autocomplete` the test whether `input.length > 0` so whether the input control are found. – Oleg Aug 13 '11 at 22:28
@Andrus: In [the answer](http://stackoverflow.com/questions/6968507/how-to-clear-autocomplete-box-contents-in-add-form-after-adding-in-jqgrid/6969498#6969498) I suggested to add `id` to the input element because you can't use jQuery UI Autocomplete on controls having no id. To fix the problem you can use ' id="' + options.id + '_a"/>' or some another `id` which derived from the `options.id` you can use `$.jgrid.randId()` as the `id` value instead. Important is just that `` has any unique id, but which value has the id is not important. – Oleg Aug 13 '11 at 22:35
I implemented all your suggestions but problems persist: on inline edit button click input element is not found, inline edit is not started, buttons do not appear in same row. – Andrus Aug 14 '11 at 07:09
@Andrus: In the testcase I see still the code of `combobox_element` in the eevaerp.js having `elemStr += ' value="' + value + '"' + ' id="' + options.id + '"/>';`. So I can't see any changes and reproduce your problem. – Oleg Aug 14 '11 at 07:22
Additional information: Inline edit flashes on click. It looks line **cancelEdit call from onEdit cancels itself**, ie. it cancels current row editing, not old row edit. This explains first two issues. Please let me know do you need updated testcase after this new information. – Andrus Aug 14 '11 at 07:28
@Andrus: I can't see what you new version of the code. The eevaerp.js has still the old code with `options.id + '"/>';`. Could you update the testcase? – Oleg Aug 14 '11 at 08:20
@Andrus: I see the reason of the problem inside `onSelectRow`. In your testcase you made an error. Instead of `if (typeof (lastSelectedRow) !== "undefined" && lastSelectedRow !== rowID) { $(this).jqGrid('restoreRow', lastSelectedRow); }` you used `if (lastSelectedRow) $(this).jqGrid('restoreRow', lastSelectedRow);` – Oleg Aug 14 '11 at 10:49
I found also issue in demo provided in answer (icons do not change on double click) and updated question about this. – Andrus Aug 14 '11 at 12:27
@Andrus did you manged to change the icons at double-click editing? – Yair Nevet Sep 25 '12 at 09:49
@Oleg did you manged to change the icons on double-click editing? – Yair Nevet Sep 27 '12 at 11:58
@YairNevet: I see the problem not complex. One can easy change it. The problem is that it's important to have the demo which *has* the problem. Moreover I hate the questions which have a lot of comments and a lot of "Updates". Such answers bring some benefit only for the person who ask the question. So it's better to open new question. You can describe exactly the problem which you has. It's important to know *how* you use the inline editing or `formatter:"actions"` feature. So it would be important to post the code which you use. – Oleg Sep 27 '12 at 12:14
@YairNevet, @Oleg: It looks like I used `ondblClickRow: function() {return}` – Andrus Sep 27 '12 at 19:30

how to end inline edit started with formatter edit action button if other row is clicked in jqgrid

1 Answers1

Linked