EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on November 17, 2014, 04:32:49 PM



Title: Datagrid end edit on datagrid loose focus
Post by: devnull on November 17, 2014, 04:32:49 PM
How can I end cell / row editing when the datagrid looses focus to another element on the page ?

I have tried several onblur() methods but none of them fire.

Thanks



Title: Re: Datagrid end edit on datagrid loose focus
Post by: stworthy on November 17, 2014, 06:24:23 PM
The datagrid panel must have a 'tabindex' attribute defined otherwise it can not get focus. Listening to the 'blur' event to end editing a row is not a good solution. An alternative way to solve this issue is to handle the 'mousedown' event on the document.
Code:
$(function(){
var curr = null;
$(document).bind('mousedown',function(e){
var v = $(e.target).closest('div.datagrid-view');
if (v.length){
var dg = v.children('table');
if (!curr){
curr = dg;
} else if (dg[0] != curr[0]){
endEditing(curr);
curr = dg;
}
} else {
endEditing(curr);
curr = null;
}
});
function endEditing(dg){
if (!$(dg).length){return}
var opts = dg.datagrid('options');
opts.finder.getTr(dg[0], null, 'editing').each(function(){
var index = parseInt($(this).attr('datagrid-row-index'));
dg.datagrid('endEdit', index);
});
}
})