Question

When implementing JQGrid 4.3.0, Jquery 1.6.2, and JQuery UI 1.8.16 Ive come across an issue with the Inline edit. When the inline edit is activated, some of the elements get assigned an auto complete. When the inline edit is canceld or saved, the auto complete does not always go away (selecting text by double clicking it then hitting delete, then hitting escape to exit row edit). Leaving the auto complete controls in edit mode when the row is no longer considered in edit mode.

Perhaps you can tell me if there is a problem with the initialization or if I you are aware of an event post-“afterrestorefunc” that the fields can be returned to their “original” state. Original state being displayed as data in the JQGrid row.

I’ve tried removing the DOM after row close, .remove() and .empty():

 ... 
"afterrestorefunc": function(){ 
    $('.ui-autocomplete-input').remove();  }
...

but that causes other issues, such as the jqgrid is not able to find the cell when serializing the row for data or edit, and requires a refresh of the page, not just jqgrid, to be able to once again see the data from that row.

Auto complete functionality for the element is created on the double click of the row:

function CreateCustomSearchElement(value, options, selectiontype) {
...
            var el;
            el = document.createElement("input");
            ...
            $(el).autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/Services/AutoCompleteService.asmx/GetAutoCompleteResponse") %>',
                        data: "{ 'prefixText': '" + request.term + "', 'contextKey': '" + options.name + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                    return {
                                        label: Trim(item),
                                        value: Trim(item),
                                        searchVal: Trim(item)
                                    }

                            }))
                        }
                    });
                },
                select: function (e, item) {
                    //Select is on the event of selection where the value and label have already been determined.                        
                },
                minLength: 1,
                change: function (event, ui) {
                    //if the active element was not the search button                      
                    //...                       
                }
            }).keyup(function (e) {
                if (e.keyCode == 8 || e.keyCode == 46) {
                    //If the user hits backspace or delete, check the value of the textbox before setting the searchValue                
                    //...
                }
            }).keydown(function (e) {
                //if keycode is enter key and there is a value, you need to validate the data through select or change(onblur)
                if (e.keyCode == '13' && ($(el).val())) {
                    return false;
                }
                if (e.keyCode == '220') { return false }
            });
        }

Other Sources:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing

http://api.jqueryui.com/autocomplete/

Update:
I tried only creating the autocomplete when the element was focused, and removing it when onblur. That did not resolve the issue either. It seems to just need the autocomplete dropdown to be triggered.

Answer 1

I have a custom enable/disable function before the calling of the auto complete. This causes multiple reference calls to the same jqgrid cell causing conflict.
So during my double click event on the row where it’s supposed to open up inline-editing. The row is taken and analyzed for what cells need to be enabled/disabled based on the record type it is. It determines the fields that are available by an associative array, serialized into a hidden field value, from the code behind during page load.

function tableRowDoubleClick(id, iRow, iCol, e) {
...
setCellEditabilityByRecordType(id);
...    
}

The Cell editability is set by the following way:

 function setCellEditabilityByRecordType(id) {
//change some of the fields to read-only
var grid = $('#mygrid');
var i;
var cm;
var cellRecordType = grid.jqGrid('getCell', id, 'RecordType')
//Determine Fields Disabled by evaluation of data from a hidden field.
var disablefields = eval(pg_FieldDisable[cellRecordType]);
for (i = 0; i < disablefields.length; i++) {
cm = grid.jqGrid('getColProp', disablefields[i]);
cm.editable = false;
}
...
}
...

So when the initial setup of the row reacts to being double clicked, the cell editability is set. Then the “CreateCustomSearchElement” triggers.

However if the user double clicks on the row, it triggers the double click again, setting the cell editability, but for the same row. So this causes multiple references to the cell that, at this point, I’m not sure what’s happening. All I know is I have to centralize the row editability to one function or find a way to read if the current row that was double clicked really needs the editability set again.

References
JavaScript Assocaitive Arrays: http://blog.xkoder.com/2008/07/10/javascript-associative-arrays-demystified/