Editable hidden row and write-back to SQL server

staticum

Hi All,

New to Datatables but just switched from Gridview and absolutely love them - i'm restricted to developing in vb.net so i have a question RE: hidden rows.

My page is loading as follows:

I have an aspx.vb file with a class _Default with a bunch of properties that instantiates on Page_Load and sucks out the data from a MS SQL server. I then load them into an asp repeater using Evals to load the data into rows - then loading that into a Datatable.

So that's all great - BUT - I have a hidden rows (using the great examples on this site) and although I can load content into the hidden rows no problem using hidden columns - i have no idea how to write any changes to the data in the hidden rows ie. a textboxs containing string, BACK to the SQL server upon fnClose() or a "save" button in the hidden row???

Some direction would be great ... unfortunately no JSON on our MS SQL server.

staticum

By the way... one idea I had was to embed a with the data and buttons attached to vb.net functions, etc in to each row and then load that as the hidden row... that way the write back to the server could just be done using the button controls... BUT i don't know how to load a element as a hidden row... see below the code that is sort of what i mean...

So if i had the following code - how can I show an existing page element "HiddenDetails as the hidden/drill dow row on clicking class=control img???

[code]
$(document).ready(function () {
var oTable = $('#SomeDataTable').dataTable({
"bProcessing": false,
"aaSorting": [[6, "asc"]],
"bPaginate": false,
"aoColumns": [
/* 0 - Parent trigger */{"bSearchable": false, "bSortable": false, "bVisible": true },
/* 1 - Hidden */{"bSearchable": false, "bSortable": false, "bVisible": false }

]
});



//function to control the image
$('#SomeDataTable td.control').live('click', function () {
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);

/* SO GET THE in page element id=HiddenDetails and pass it to the fnOpen()*/

$(anOpen).each(function () {
if (this !== nTr) {
$('td.control', this).click();
}
});

if (i === -1) {
$('img', this).attr('src', sImageUrl + "folder_close_32x32.png");
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push(nTr);
}
else {
$('img', this).attr('src', sImageUrl + "folder_open_32x32GS.png");
$('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});

function fnFormatDetails(oTable, nTr) {
var oData = oTable.fnGetData(nTr);
var sOut =
'' +
'' +
' A' +
'Test data B: A' +
'Test data C:' + textString + ' A' +
'' +
'';
return sOut;
}
}










Some Visible Row
hidden td






Parent row with the img trigger for the hidden row.


Hidden Details
Show some stuff here ie. a text box and button to write back content to SQL
and the likes though vb.net code behind.
Something something
Stick a text box and a button to save data back to SQL using VB.net function









[/code]

Super appreciative of anyones help

allan

> i have no idea how to write any changes to the data in the hidden rows ie. a textboxs containing string, BACK to the SQL server upon fnClose() or a "save" button in the hidden row???

I suspect a save button will be easier in the first instance to get this working, and then progress onto having it save automatically once that is working.

So fundamentally, the way I would approach this myself, is to make an Ajax request with the information from the form elements in your 'details' row. Something event as simple as:

[code]
$('body').on( 'submit', '#SomeDataTable form', function (e) {
e.preventDefault();
$.post('/url', $(this).serialize(), function (data, textStatus, jqXHR) {
// update row with return from server if needed
} );
} );
[/code]

This assumes that you have a valid form in place - which it actually looks like you don't at the moment - I don't actually see any input elements either, but you'll need them if you want to have editable elements of course.

> i don't know how to load a element as a hidden row...

You'd do something like this in DataTables 1.9-:

[code]
// Create an empty details row
var detailsRow = table.fnOpen( tr, '', '' );

// Append the hidden row
$('td', detailsRow).append( '#hiddenRow' );
[/code]

In DataTables 1.10 (when it is available) you'll be able to do this:

[code]
table.row( tr ).child( $('#hiddenRow') ).show();
[/code]

Regards,
Allan