w2ui grid: Unable to get focus in editable divs - w2ui

Question

I want to be able to expand a row and show an editable div and be able to edit it. However when i put my text cursor in the editable div it almost immediately loses focus.
Is there any way to stop the div from losing focus?
I have made a jsFiddle to demonstrate the problem: http://jsfiddle.net/h2zoqm0n/1/
The sample code:
$(function () {
$('#grid').w2grid({
name: 'grid',
header: 'List of Names',
records: [
{ "recid": 1, "fname": "John", "lname": "Doe", "email": "jdoe#gmail.com", "sdate": "4/3/2012" },
{ "recid": 2, "fname": "Stuart", "lname": "Motzart", "email": "jdoe#gmail.com", "sdate": "4/3/2012" },
{ "recid": 3, "fname": "Jin", "lname": "Franson", "email": "jdoe#gmail.com", "sdate": "4/3/2012" },
{ "recid": 4, "fname": "Susan", "lname": "Ottie", "email": "jdoe#gmail.com", "sdate": "4/3/2012" },
{ "recid": 5, "fname": "Kelly", "lname": "Silver", "email": "jdoe#gmail.com", "sdate": "4/3/2012" },
{ "recid": 6, "fname": "Francis", "lname": "Gatos", "email": "jdoe#gmail.com", "sdate": "4/3/2012" },
{ "recid": 7, "fname": "Mark", "lname": "Welldo", "email": "jdoe#gmail.com", "sdate": "4/3/2012" },
{ "recid": 8, "fname": "Thomas", "lname": "Bahh", "email": "jdoe#gmail.com", "sdate": "4/3/2012" },
{ "recid": 9, "fname": "Sergei", "lname": "Rachmaninov", "email": "jdoe#gmail.com", "sdate": "4/3/2012" }
],
method: 'GET', // need this to avoid 412 error on Safari
show: {
header : true,
toolbar : true,
footer : true,
lineNumbers : true,
selectColumn: true,
expandColumn: true
},
columns: [
{ field: 'fname', caption: 'First Name', size: '30%' },
{ field: 'lname', caption: 'Last Name', size: '30%' },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px' }
],
searches: [
{ type: 'int', field: 'recid', caption: 'ID' },
{ type: 'text', field: 'fname', caption: 'First Name' },
{ type: 'text', field: 'lname', caption: 'Last Name' },
{ type: 'date', field: 'sdate', caption: 'Start Date' }
],
onExpand: function (event) {
var data = w2ui.grid.get(event.recid);
var cmp1 = data.fname;
var cmp2 = data.lname;
$('#' + event.box_id).html('<div style=""><table style="width: 100%;"><tr><td>' + cmp1 + '</td><td><div id="d" style="white-space: nowrap; border: 1px solid black;" contenteditable="true">' + cmp2 + '</div></td></tr></table ></div>');
}
});
});
... and there is a div with the id "grid":
<div id="grid" style="width: 100%; height: 400px; overflow: hidden;"></div>

Answer 1

use input element with autofocus attribute inside div for edit cmp2 value
an example for your onExpand function
onExpand: function (event) {
var data = w2ui.grid.get(event.recid);
var cmp1 = data.fname;
var cmp2 = data.lname.replace("\n", "<br>");
$('#' + event.box_id).html('<div style=""><table style="width: 100%;"><tr><td>' + cmp1 + '</td><td><div id="DataInExcelEdit" style="white-space: nowrap; border: 1px solid black;" contenteditable="true"> <input style="width:100%" autofocus value=' + cmp2 + ' /></div></td></tr></table ></div>');
}
and more
I think you should edit in cell not when column expanded, this is not effective way look at that