add an editable row to the Datatable

asifhussain

Hi,
I am using makeEditable for my Datatable, and i have only one column that is editable. however, when i add a new Row using fnAddData(), the new row created is not editable.
Here is my code -

var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"bRetrieve": true,
"bDestroy": true,
"sPaginationType": "full_numbers"

});
oTable.makeEditable({
sUpdateURL: "/servlets/ProjectScopeScratchPadServlet?FWAction=update&sessionId="+sessionId+"&item=1",

sAddHttpMethod: "GET", //Used only on google.code live example because google.code server do not support POST request
"aoColumns": [
null,
null,
{ indicator: 'Saving...',
tooltip: 'Click to edit Description',
loadtext: 'loading...',
"onblur": "submit",

oValidationOptions :
{
rules:{
value: {
maxlength: 30
}
},
messages: {
value: {
maxlength: "Description can only be upto 30 characters" }
}
},
callback: function( sValue, x) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1], true, true);
}
},
null,
null,
null,
null,
null,
null,
null,
null
]
});

function fnClickAddRow() {
if(giCount==''||giCount=='undefined') {
giCount=0;
}
giCount++;
jQuery.ajaxSetup({async:false,cache: false});
var uri = "/servlets/ProjectScopeScratchPadServlet";
$.get(uri+"?FWAction=addTask&sessionId="+sessionId+"&currentTask="+giCount, function(data, textStatus) {
});
oTable = $('#example').dataTable();
var addedId = oTable.fnAddData( [
"",
giCount,
"",
"",
"0",
"",
"0",
"",
"0",
"0",
"" ],true );
oTable.fnDraw(true);

var theNode = oTable.dataTable().fnSettings().aoData[addedId[0]].nTr;
theNode.setAttribute('id',giCount);
$('#example tbody #'+giCount+' #newSubTask').hide();
}

I would like the newly added row to be Editable! Can anyone please help me out?

allan

makeEditable is a 3rd party plug-in, so I'm afraid it is not something I can offer any support for. As far as I am aware, the author has deprecated the plug-in, so probably isn't offer support for it any more, but you could ask in the issue tracker there.

Allan

asifhussain

Thanks for the reply Allan,
Now i have a way of adding an Editable row via editable.
But i am facing 2 problems,
1. How to validate the editable field when i add a new row via editable?
2. When i open detail of the row and edit, the edit doesnt work!

Her's the code,
function fnClickAddRow() {
if(giCount==''||giCount=='undefined') {
giCount=0;
}
giCount++;
jQuery.ajaxSetup({async:false,cache: false});
var uri = "/servlets/ProjectScopeScratchPadServlet";
$.get(uri+"?FWAction=addTask&sessionId="+sessionId+"&currentTask="+giCount, function(data, textStatus) {
});
oTable = $('#example').dataTable();
var addedId = oTable.fnAddData( [
"",
giCount,
"",
"",
"0",
"",
"0",
"",
"0",
"0",
"" ],true );
oTable.fnDraw(true);
var aPos;
$('#example tbody tr').each( function () {
if(oTable.fnGetData(this.childNodes[1])==giCount){
aPos = oTable.fnGetPosition(this);
return false;
}
});
$('td:eq(2)', oTable.fnGetNodes(aPos)).editable(function(v, s) {
var rowData = oTable.fnGetData(this.parentNode);
$.get(uri+"?FWAction=editTask&sessionId="+sessionId+"&currentTask="+rowData[1]+"&description="+v, function(data, textStatus) {
});
return (v);
});
var theNode = oTable.dataTable().fnSettings().aoData[addedId[0]].nTr;
theNode.setAttribute('id',giCount);
$('#example tbody #'+giCount+' #newSubTask').hide();
}

asifhussain

I have found a solution to this. Thanks a lot for your reply Allan :)