JEditable, KeyTable & DataTables Help

jdmorton25

I apologize if this a repeat or similar to other postings. I've spent hours (or maybe days now) trying numerous different things, digging through the forums and google, scrapping my code and restarting, etc. trying to get KeyTables and JEditable to play well together. I can get both of them to work fine separately, but combining them has been the problem. The gist of what I'm trying to accomplish is simple. I want a user to be able to scroll using the keyboard, press enter to edit, and then press enter again or click off of the cell to commit changes. In addition, I want a user to be able to click a cell, have the KeyTable adjust focus to that cell, and the cell enter edit mode. Then, they can press enter to commit changes or click of the cell to commit changes. I've tried a number of different things: adding a click event to attempt to trigger a "enter" keypress, trying to use the "keys.event.focus" event as a workaround, embedding editable inside of click/onmouseup, and other differing variations of the jEditable setup and I think I've exhausted my knowledge. The main problems I'm running into with my latest attempt are the following:

1. I have to click twice on a cell to get it to enter edit mode.
2. Once I have a cell in edit mode by clicking on it twice, I can use the arrow keys to make it switch to another cell.
3. Once I have a cell in edit mode by clicking on it twice, I have to hit enter twice to get my change to Submit.

Here's my debug data: http://debug.datatables.net/exofis
And here's a link to my DataTable: http://stonetimberriver.dyndns.org/JDM/selecttestdatatables.html

For my example, I've only made the "Quantity" column editable to try and make it as simple as possible. Also, I've been doing my testing primarily on Chrome.

Any help would be greatly appreciated!

jdmorton25

Of course, after one more trip to the drawing board following this post, I took a different approach and decided to attempt to make a keyboard press mimic a click, rather than a click mimic a keyboard press and it seems to be working well thus far. Here's the important bits of code in case it may save anyone else the headaches I've had with this:

[code]
keys.event.action(quantitycol - 2, null, function (nCell)
{
keys.block = true;
setTimeout(function () { $(nCell).click(); }, 0);
});


$('.quantity').on('click', function ()
{
var aPos = oTable.fnGetPosition(this);
keys.fnSetPosition(aPos[1], aPos[0]);
keys.block = true;
});

oTable.$('.quantity').editable(function (value, settings) { return value; },
{
"event": "click",
"callback": function (newvalue, settings)
{
var aPos = oTable.fnGetPosition(this);
var row = aPos[0];
var quantityold = oTable.fnGetData(row, quantitycol);
var revenueold = oTable.fnGetData(row, revenuecol);
var rateold = oTable.fnGetData(row, ratecol);
var expenseold = oTable.fnGetData(row, expensecol);
var revenue = (revenueold / quantityold) * newvalue;
var rate = (rateold / quantityold) * newvalue;
var expense = (expenseold / quantityold) * newvalue;
oTable.fnUpdate(revenue, row, revenuecol, false, false);
oTable.fnUpdate(rate, row, ratecol, false, false);
oTable.fnUpdate(revenue / rate, row, ratepercentcol, false, false);
oTable.fnUpdate(expense, row, expensecol, false, false);
oTable.fnUpdate(expense / revenue, row, expensepercentcol, false, false);
oTable.fnUpdate(newvalue, row, quantitycol, true, true);
keys.block = false;
},
"onblur": "submit",
"onreset": function()
{
keys.block = false;
}
});
[/code]

sandeepadreno

Hi ,

And here's a link to my DataTable: http://stonetimberriver.dyndns.org/JDM/selecttestdatatables.html

There is no such directory please check i am not able to download the files,

Thanks and Regards,
Sandeep Dhiman