Inline editing

kp_sandy

Hi there,

I'm looking for form editing functionality, to be exact like the way CRUD operation is implemented here at http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html.
The editor datatable shown here is not freeware. Is there any sample code using exactly the same functionality with datatable in ASP.NET? Also, if it is free?

Sorry lot of demands here! Thanks in advance.

Regards,
Sandy

girishmr

Well you can use the free DataTable API and plug it with a modal window ( you can use the elegant and simple twitter bootstrap) to edit the data and save. Irrespective of whether its php/asp/jsp @ backend :)
Hope this helps

Girish

mounpal

Cuando se va crear un nuevo registro y damo Delete
$('#tbl_forms_correos a.delete').live('click', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow( nRow );
});

Genera este error.
oTable.fnUpdate( aData[i], nRow, i, false );

Sugerencia colocar nEditing = null;

qdaria

$('#tbl_forms_correos a.delete').live('click', function (e) {
e.preventDefault();

var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow( nRow );
nEditing = null;
});

sam999

I am new to dataTables. I am trying to use the following to setup a datatable to be editable as in this example:

var oTable = $('#example').dataTable({
'aaData': my.dataMatrix,
'aoColumns': my.columnArray,
});

I can't for the life of me figure out how to define aoColumns to get an Edit link or button in the column cell.

In the HTML for your example, you have

Edit
Delete

using aoColumns, the closest I can get to this so far is

Edit

I did this using the sClass tag.

Any help would be greatly appreciated.

girishmr

If you are using script ver < 1.9.3 use this

[code]
"aoColumns": [

{"fnRender": function(oObj)
{
return '';

}
}

]

[/code]

if targetting specific columns, replace return statement with the below code

[code]
oObj.aData[8] = '';
return oObj.aData[8];
[/code]


If script ver >= 1.9.3 use this


[code]
aoColumnDefs: [
{
"aTargets":[12], // Assuming you want your link / button / action to be here
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
$(nTd).css('text-align', 'center');
},
"mData": null,
"mRender": function( data, type, full) {
return '';
}
}
]

[/code]

Hope it helps

GatoLindo

I'm been following this tutorial, that I found very useful so far. Now I was trying to adapt it to my needs.
In the editRow function, I was trying to work with checkboxs, but without success.
Same in the saveRow. How can I change it to use checkboxs?
Cheers
Rui Martins

function editRow ( oTable, nRow )
{
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '';
jqTds[1].innerHTML = '';
jqTds[2].innerHTML = '';
jqTds[3].innerHTML = '';
jqTds[4].innerHTML = '';
jqTds[5].innerHTML = 'Save';
}

soulpower

Hey Alan,
Does this plugin has client side and server side validation? If it has can you show example of how it works??????

allan

The code presented in the blog doesn't no (although it could readily be added). Editor however does: http://editor.datatables.net/

Allan

soulpower

that is not what i wanted.Cant we do the validation on this plugin??????

allan

Sure you can - but you need to add it :-).

madaweb

The demo of inline editing is interesting but it's just a presentation.

How really submit editing and deleting? Is there another demo showing a row with instead of ? In fact, in the database, it is the ID of a product type which is stored in the table, so why we need to use tag.

allan

It is just a presentation as you say :-). It is there to use as a base if you want to build it up into a more complete solution.

If you want a ready-rolled package to save yourself the development time, you might consider looking at Editor: http://editor.datatables.net .

Allan