JQGrid and JQuery Autocomplete
Posted
by
Neff
on Stack Overflow
See other posts from Stack Overflow
or by Neff
Published on 2012-10-15T18:58:35Z
Indexed on
2012/10/17
17:01 UTC
Read the original article
Hit count: 403
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.
© Stack Overflow or respective owner