edit form in row.. master detail type implementation

pwc1011

is there a simple way to insert what i would call a form below a row to edit data for a row? I know it is possible to make a row editable, but this is a little different.

for example, say the rows are addresses and they show the address name and state, but not all the address information. say I want to have an edit button for the row, and when the button is clicked, an edit form appears below the row with all the fields for editing. sort of like a master/detail in-line.

thanks,
patrick

allan

Hi Patrick,

I'd suggest using something like this: http://datatables.net/examples/api/row_details.html , but rather than just having the render function stick some data into the 'details' row, you could have it put a form in, and then use fnUpdate() to update the row based on new input.

How does that sound?

Regards,
Allan

pwc1011

Excellent!

I thought I looked through the examples, but clearly I didn't look well enough. As long as I can turn the details into an edit form, that will be just perfect.

Thanks!
Patrick

pwc1011

Allan,

Having gone through what you sent me and doing some testing, it would seem there is no reason I can't use div formatting in the detail area as well. Instead of building a table, I will try just use a div and load a form without table formatting.

allan

Hi pwc1011,

Either should work - div layout or a table. The selectors in DataTables _should_ be smart enough not to mess around with the sub-table. If you are running in to an interaction problem, then it's a bug...

Regards,
Allan

cloud19

hi allan,

can you send me an example of this? whenever i'm inserting an tag inside...

[code]var sOut = '';
sOut += 'Alarm Name:'+aData[2]+'';
sOut += 'Alarm Description:'+aData[5]+'';
sOut += 'Alarm Condition:';
sOut += 'Email Recipient:'+aData[9]+'';
sOut += ''+Submit+''+Clear+'';
sOut += '';[/code]

The function fnFormatDetails( nTr ) is no longer working. I'm not sure if i'm in the same line with both of you guys. So, hope you could help me on this.

allan

In what way is it not working? A JS error?

Allan

cloud19

hi Allan!

Thanks for the reply. Actually, In my code I was trying to call another javascript function such that the action of the form would depend on what button will the user click.

[code]sOut += '
';[/code]

the function looks like this..

[code]function fnFormAction ( action )
{
alert('entry');
var actionForm = document.getElementById("updateForm");

if (action = 'close') {
alert('close');
document.updateForm.action = "update.action?action=close";
} else {
alert('save');
document.updateForm.action = "update.action?action=save";
}
}[/code]

What's happening is that the alert entry and close is already showing up even when I haven't clicked on anything yet. I only click on the button where the editable row details should appear. Neither did I click the save nor the cancel button.

The error says it cannot find document.updateForm. I'm not sure if this is possible. I was just trying to experiment on things, wishing it'll work for me.

Thanks again. Hoping to hear from you soon.