Datatable with Editable Plugin

pbhomia

Hi,

I am new to DataTables and must say falling in love with it. Although I am stuck in last 6-7 hr trying to figure out what is the best way to solve the issue. Below are the details:
- My page has a grid whose few columns are editable.
- On single clicking the row, I display the details section also for the selected row. The data in details section is different from what is displayed in the grid.
- On double clicking the column of the selected row, it becomes editable. However data is not persisted immediately on blur. The data gets persisted ONLY when user clicks Save button after doing modifications on the selected row (in details, by double clicking any column of the selected row)
- If user modifies the selected row data and try to navigate away, i want to display a confirmation dialogue asking unsaved change for previous row will be lost.

This is how my DataTable initialization looks.
[code]
function initializeDataTable() {
oTable = $('#tbl-lib-scoretypes')
.dataTable(
{
"bSearchable" : false,
"sAjaxSource" : ctxRoot + '/ScoreType/data.do',
"bFilter" : false,
"sScrollY" : "207px",
"bAutoWidth" : false,
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ 7 ]
}, {
"bVisible" : false,
"aTargets" : [ 8 ]
} ],
"aoColumns" : [
{
sWidth : '20px'
},
{
sWidth : '110px',
sClass : 'editable'
},
{
sWidth : '100px',
"sSortDataType" : "dom-select",
sClass : 'editable'
},
{
sWidth : '60px',
"sSortDataType" : "dom-select",
sClass : 'editable'
},
{
sWidth : '50px',
sClass : 'editable'
},
{
sWidth : '50px',
sClass : 'editable'
},
{
sWidth : '50px',
"sSortDataType" : "dom-select",
sClass : 'editable'
},
{
"sName" : "Test",
sWidth : '80px',
"bSearchable" : false,
"bSortable" : false,
"fnRender" : function(oObj) {
return "";
}
}, ],
"bPaginate" : false,
"bDeferRender" : true,
"bScrollCollapse" : true,
"bInfo" : false,
"oLanguage" : {
"sSearch" : ""
}
})
.makeEditable(
{
sUpdateURL : function(value, settings) {
// Need to make a flag true here is data is changed. Also can I use onChange in aoColumn to make the flag as true
var iPos = oTable.fnGetPosition(this);
var oSettings = oTable.fnSettings();
var col_name = oSettings.aoColumns[iPos[1]].mDataProp;
var rows = oTable.fnGetNodes();
// var test = $(this).revert();
return value;
},
"aoColumns" : [
null,
{
indicator : 'Saving ...',
tooltip : 'double click to edit',
loadtext : 'loading...',
onblur : 'submit',
type : 'text',
event : 'dblclick',
oValidationOptions : {
rules : {
value : {
required : true,
maxlength : 25
}
}
}
},
null,
{
tooltip : 'double click to edit',
type : 'select',
event : 'dblclick',
data : " {'1':'Discrete','2':'Continuous', 'selected':'1'}"
},
{
tooltip : 'double click to edit',
type : 'text',
event : 'dblclick'
},
{
tooltip : 'double click to edit',
type : 'text',
event : 'dblclick'
},
{
tooltip : 'double click to edit',
type : 'select',
event : 'dblclick',
data : " {'1':'1','2':'2','3':'3','4':'4','5':'5','6':'6','7':'7','8':'8','9':'9','10':'10','11':'11','12':'12', 'selected':'1'}"
} ],

});
}
[/code]

and row clicking

[code]
$("#tbl-lib-scoretypes tbody tr")
.live(
"click",
function(e) {
var originalScrollPosition = $(
".dataTables_scrollBody")
.scrollTop();
aPos = oTable.fnGetPosition(this);
if (!uneditable) {
if (previousEditedRow == aPos) {
if (previousEditedRow != lastRowCancelled) {
return;
}
lastRowCancelled = null;
} else {
if (previousEditedRow != undefined) {
var revert = false;
if (scoreTypeModified) {
if (confirm("Score Type is modified do you want to continue")) {
revert = true;
} else {
aPos = previousEditedRow;
return;
}
} else {
var oldRowData = oTable
.fnGetData(previousEditedRow);
var old_key_int_id = oldRowData[8];
revertCurrentRow(old_key_int_id);
}
if (revert) {
var oldRowData = oTable
.fnGetData(previousEditedRow);
var old_key_int_id = oldRowData[8];
revertCurrentRow(old_key_int_id);
scoreTypeModified = false;
}
}
previousEditedRow = aPos;
}
}

var currentRowData = oTable
.fnGetData(this);
var cr_key_int_id = currentRowData[8];

if (!uneditable) {
$
.getJSON(
ctxRoot
+ '/ScoreType/scoreTypeDetails.do',
{
scoreTypeID : cr_key_int_id
},
function(data) {
updateRowInTable(data);
prepareDetailsSection(data);
$(
".dataTables_scrollBody")
.scrollTop(
originalScrollPosition);
})
.error(
function(e) {
alert("could not get score type detail. reason: "
+ e.responseText);
}).complete(
function() {
});

}
oTable.fnDraw();
});

[/code]