Datatables Editable Layout issue after update

chankl78

I am trying to create this in my Site but I am able to achieve the Yellow background with borders after the cells updated.
http://jquery-datatables-editable.googlecode.com/svn/trunk/index.html

Can someone teach me how to do that?
What I achieve is "" after it updated.

This is the site which I have created.
http://worldsoft.dyndns.org:81/Accounts/ChartofAccounts.cshtml

I am using MSSQL 2008 with asp.net cshtml.

Below is my code for the Main file.
[code]
@{
Layout = "~/WorldSoft.cshtml";
Page.Title = "Chart of Accounts";

var db = Database.Open("WorldSoftConnectionString");
var SQLString = "Select * From mChartofAccount";
var varAccounts = db.Query(SQLString);

/*AccountingDataContext db = new AccountingDataContext();
var varAccounts = (from Accounts in db.mChartofAccounts
select new { Accounts.AccountID, Accounts.AccountName, Accounts.AcctID, Accounts.AccountType, Accounts.GroupID,
Accounts.GroupName}).ToList();*/
}

@section Javascript {






$(document).ready(function () {
$('#tModuleListing').dataTable({
"iDisplayLength": 25, // Default No of Records per page on 1st load
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], // Set no of records in per page
"aaSorting": [[0, "asc"]], // Default 1st column sorting
//"bJQueryUI": true, //No themeroller
"aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}], // Hide Column
"bStateSave": true, // Remember paging & filters
"bDeferRender": true, // Delay loading of DOM
"bProcessing": false,
"sPaginationType": "full_numbers" // Include page number
}).makeEditable({
sUpdateURL: "Ajax_Functions/ChartOfAccountsUpdate.cshtml",
"aoColumns": [
{
indicator: 'Saving ...',
tooltip: 'Click to edit',
type: 'text'
},
{
indicator: 'Saving ...',
tooltip: 'Click to edit',
type: 'text'
},
{
indicator: 'Saving...',
tooltip: 'Click to select Type',
loadtext: 'loading...',
type: 'select',
onblur: 'submit',
data: "{'':'Please select', 'Credit':'Credit','Debit':'Debit'}"
}
]
});
});


$(document).ready(function () {
$('#tModuleListing').dataTable().rowGrouping({ iGroupingColumnIndex: 0 });
});


(document).ready(function () {
/* Init DataTables */
var oTable = $('#tModuleListing').dataTable();

/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable('Ajax_Functions/ChartOfAccountsUpdate.cshtml', {
"callback": function (sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
},
"submitdata": function (value, settings) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition(this)[2]
};
},
"height": "14px"
});
});


$('#tModuleListing').dataTable().makeEditable({
fnShowError: function (message, action) {
switch (action) {
case "update":
jAlert(message, "Update failed");
break;
case "delete":
jAlert(message, "Delete failed");
break;
case "add":
$("#lblAddError").html(message);
$("#lblAddError").show();
break;
}
}
});

}



GroupCodeAccountType

@foreach (var p in varAccounts)
{
@p.GroupID - @p.GroupName@p.AccountID@p.AccountName@p.AccountType
}



[/code]

Below is my update code
[code]
@{

var ModuleID = Request["id"];
var NewValue = Request["value"];
var RowID = Request["rowid"];
var ColumnPosition = Request["columnPosition"];
var ColumnID = Request["columnId"];
var ColumnName = Request["columnName"];

// Find the correct data
AccountingDataContext db = new AccountingDataContext();
var varAccount = from b in db.mChartofAccounts where b.AcctID == int.Parse(ModuleID) select b;
var AccountFirst = varAccount.First();

switch(ColumnName)
{
case "Code":
varAccount.First().AccountID = NewValue;
break;
case "Account":
AccountFirst.AccountName = NewValue;
break;
case "Type":
varAccount.First().AccountType = NewValue;
break;
}

try
{
db.SubmitChanges();
}
catch (Exception e)
{
Console.WriteLine(e);
// Provide for exceptions.
}

//return;
Json.Write(NewValue, Response.Output);
}
[/code]