issue with fnDraw after cloning a Row from jQuery Datatable

sairam0325

I am using jQuery Editable Datatable plugin for my data on my ASP.NET MVC web page with below code.



<!-- Header Row -->

Action <!-- This is Dropdown -->
Revenue Code
HCPCS
Covered Unit Count
Amount Charged
Non-Covered Charges
 






@{
var currentLines = auditLines.Where(m => m.CaseEventName == "Current" && m.RevenueCenter != "0001").ToList();
var count = 0;
}
@foreach (var line in currentLines)
{

@Html.DisplayFor(modelItem => line.ActionCode)
@Html.DisplayFor(modelItem => line.RevenueCenter)
@Html.DisplayFor(modelItem => line.HCPCSCode)
@Html.DisplayFor(modelItem => line.LineUnitCount)
@Html.DisplayFor(modelItem => line.AmountChargeTotalRevenueCenter)
@Html.DisplayFor(modelItem => line.AmountChargedNonCoveredRevenueCenter)
@*SplitLine*@

++count;
}




With Jquery makeEditable, I am replacing ActionCode column with Dropdown and based on this, I have some calculations to reflect on other columns.


$(document).ready(function () {

var oTableAuditLines = $('#tblAuditLines').dataTable({
"bRetrieve": true,
//"iDisplayLength": 50,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "../Content/media/swf/copy_cvs_xls_pdf.swf"
},
"aoColumns": [

{ "bSortable": false, //ActionCode
"bSearchable": false
},
null, //RevenueCenter
null, //HCPCS
null, //Line Unit Count
null, //Amount Charged
null, //Non-Covered Charges
null //Split Line Button
]
}).makeEditable({
sUpdateURL: "SetValue",
"aoColumns": [
{
tooltip: 'Double-Click to select Action Code',
loadtext: 'loading...',
type: 'select',
onblur: 'submit',
event: 'dblclick',
data: "{'NF':'NF','RR':'RR','TR':'TR'}",
callback: function (sValue, y)
{
var row = $(this ).closest('tr');
var aPos = oTableAuditLines.fnGetPosition(this);
var currRow = oTableAuditLines.fnGetData(aPos[0]);
var amtCharged = parseFloat(currRow[4]).toFixed(2);
var coveredUnitCount = parseInt(currRow[3]);
debugger;
if(sValue=="RR") //if a value > 0 was entered in coveredunitcount and then action code was selected then
{
// Some Do Calculations
else
{
UndoNonCoveredCharges(currRow,aPos[0]);
}
}
**oTableAuditLines.fnDraw(false);**
return sValue;
}
},
null, //Revenue Code
null, // HCPCS
null, //Covered Unit Count
null,
null,
null //Split Lines Button

]

});


To Add/ Split selected Line i have the below code and this is working fine and adding new Line after the selected/Clicked Row.


//Split Lines
$('#tblAuditLines tbody td button').live('click', function () {
debugger;
var curRow = $(this).closest('tr');
var newRow = curRow.clone(true);
curRow.after(newRow);
});


But when i change the ActionCode from Dropdown, it is Redrawing the table (meaning whatever the NewRow that is Added is getting Deleted) though i set it to false as it is bolded in the above code.

oTableAuditLines.fnDraw(false);

I am wondering how i can retain the added row even after i change the Dropdown selected value in the parent row?

Anyone worked on this scneario. Any responses are appreciated.

Thanks

allan

See this FAQ: http://datatables.net/faqs#append . You need to use the DataTables API, not DOM manipulation.

Allan

sairam0325

Thanks Allan. That answered my question.