Adding an Input/Row Dynamically to Edit

kraftomatic

Hey All,

I have a Datatable with some basic data on each row, along with a button the left of each row. There are two form options - one of which, when selected, requires the user to fill out a reason for their selection.

What I'd like to do is something similar to the below example, where a row is created with an input field, where the user can enter in some text. Nothing more, just data that's saved when the form/table is submitted.

Any idea how I can do this? Here's the example I was thinking of:

http://datatables.net/release-datatables/examples/api/add_row.html

Thanks in advance.

allan

Hi,

How are you currently adding the row? It sounds like you need to use fnAddData with the HTML that you want for the cell in question specified in the data being added to the table. It just does an .innerHTML write, so you can pass in whatever HTML you want.

Allan

kraftomatic

Thanks Allan. I have this modified code currently:

[code]
function fnClickAddRow() {
$('#example').dataTable().fnAddData( [
giCount+".1",
giCount+".2",
//giCount+".3",
"",
giCount+".4" ] );

giCount++;
}
[/code]

Thanks.

allan

That will create a row with an input box, but you also want the buttons? How are the buttons currently being created, are they done using sDefaultContent or something else? Are you able to link me to the page so I can see what is happening?

Allan

kraftomatic

Sure Allan. Here's the page:

http://witchkraftracing.com/allan/wk_mockup_test.html

I basically want to click the button, and if "Do not deliver" is selected, then show the input field where the user can give a reason why.

Currently I have the "Add a row" functionality separate and partially working in the example.

Thanks for your help!

kraftomatic

Allan, any chance to look at this by chance? Thanks.

xiaoyuandlg

http://www.kettic.com/winforms_ui/csharp_guide/gridview_records_row_insert_delete.shtml

allan

@xiaoyuandlg - I'm not sure how that is relevant to this discussion? You keep posting links to that C# grid control - it is not relevant in this forum since this is Javascript based. Please stop doing that.

@kraftomatic - Really sorry this slipped my mind back in December. I suspect that you don't really want to use fnAddRow in this case, since rows are effectively independent in DataTables - there would be nothing to tie the "reason" row, to the row that it was marked for.

What I would suggest is having a hidden `` in the same cell as the 'Delivery' button and add an event handler which will show or hide that element based on the selection made in the Delivery column. Does that sound reasonable?

Allan